Tabulaciones

Las pestañas proporcionan una manera de presentar información relacionada en páginas con etiquetas independientes.

Un conjunto típico de pestañas.

Normalmente, las pestañas están asociadas a ventanas de propiedades (y viceversa), pero las pestañas se pueden usar en cualquier tipo de ventana.

Los controles tab representan las carpetas manila con pestañas usadas para organizar la información en los gabinetes de presentación que se encuentran habitualmente en el Estados Unidos. (Las carpetas de Manila no se usan en todo el mundo).

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

• ¿Los controles caben cómodamente en una sola página de tamaño razonable? Si es así, use una sola página.
• ¿Hay una sola pestaña? Si es así, use una sola página.
• ¿Las pestañas se relacionan entre sí de alguna manera obvia? Si no es así, considere la posibilidad de dividir la información en ventanas independientes de información relacionada.
• Si se usa para la configuración, ¿la configuración de diferentes páginas es completamente independiente? ¿Cambiar una configuración en una página afectará a la configuración en otras páginas? Si no son independientes, use en su lugar páginas de tareas o un asistente .
• ¿Las pestañas son principalmente del mismo nivel entre sí o hay una relación jerárquica? Si es jerárquico, considere la posibilidad de usar cuadros de diálogo de divulgación progresiva o secundarios para mostrar información relacionada.
• ¿Se usan las pestañas para mostrar los pasos dentro de una tarea? Puede usar "pestañas" para mostrar los pasos dentro de una tarea solo si se presentan para tener un aspecto similar a los pasos y hay una manera obvia y alternativa de llegar al paso de texto, como un botón Siguiente. De lo contrario, si se requieren los pasos, use páginas en un flujo de página o un asistente. Si los pasos son opcionales, muestre los pasos opcionales mediante cuadros de diálogo modales en su lugar.
• ¿Las pestañas son diferentes vistas de los mismos datos? Si es así, considere la posibilidad de usar un botón de división o una lista desplegable para cambiar las vistas. Aunque las pestañas se pueden usar eficazmente para cambiar las vistas, las alternativas son más ligeras.

Patrones de uso

Las pestañas tienen varios patrones de uso:

Uso	Ejemplo
Superficie de ventana dinámica al igual que las barras de desplazamiento, las pestañas se pueden usar para aumentar el área expuesta de la ventana para mostrar información relacionada.	Con este patrón, el uso de pestañas es conceptualmente similar a colocar toda la información en las pestañas linealmente en una sola superficie desplazable, con las etiquetas de tabulación como encabezados. En este ejemplo, las pestañas aumentan eficazmente el área expuesta de la ventana.
Varias vistas al igual que los botones divididos o las listas desplegables, las pestañas se pueden usar para mostrar diferentes vistas de la misma información o relacionada.	En este ejemplo, las pestañas cambian las vistas dentro de un documento.
Varios documentos Al igual que varias ventanas, las pestañas se pueden usar para mostrar diferentes documentos en una sola ventana.	En estos ejemplos, las pestañas muestran documentos diferentes dentro de una sola ventana de aplicación.
Opciones exclusivas al igual que los botones de radio, las pestañas se pueden usar para presentar varias opciones exclusivas. en este patrón, solo se aplica la pestaña seleccionada y se omiten todas las demás pestañas.	En este ejemplo, las pestañas se usan (incorrectamente) como sustituto de los botones de radio. Este patrón no se recomienda porque usa un comportamiento no estándar. Las pestañas se comportan como una configuración en lugar de simplemente una manera de navegar dentro de la ventana.

Si sólo haces una cosa...

Asegúrese de que la información de las pestañas está relacionada, pero la configuración de las distintas páginas es independiente. La última pestaña seleccionada no debe tener ningún significado especial.

Instrucciones

General

• Use pestañas horizontales si:

  • La ventana tiene siete o menos pestañas.
  • Todas las pestañas caben en una fila, incluso cuando se localiza la interfaz de usuario (UI).

• Use pestañas verticales si:

  • La ventana de propiedades tiene ocho o más pestañas.

  • El uso de pestañas horizontales requeriría más de una fila.

    

    En este ejemplo, las pestañas verticales admiten ocho o más pestañas.

• No anidar pestañas ni combinar pestañas horizontales con pestañas verticales. En su lugar, reduzca el número de pestañas, use solo pestañas verticales o use otro control, como una lista desplegable.

• No desplácese por pestañas horizontales. El desplazamiento horizontal no se puede detectar fácilmente. Sin embargo, puede desplazarse por pestañas verticales.

  Incorrecto:

  

  En este ejemplo, se desplazan las pestañas horizontales.

• En el caso de las pestañas de una ventana o panel que se puede cambiar de tamaño, coloque una barra de desplazamiento, cuando sea necesario, en la página, no en la ventana o el panel. Las pestañas siempre deben estar visibles y no desplazarse fuera de la vista.

  

  En este ejemplo, la página de pestañas tiene la barra de desplazamiento, no el panel.

• Asegúrese de que las pestañas se parecen a las pestañas y no a otro tipo de control.

  Incorrecto:

  

  En este ejemplo, estas pestañas se parecen a los botones de comando.

Interacción

• Cuando los controles solo se aplican a una página, colóquelos dentro del borde de la página con pestañas.
• Cuando los controles se aplican a toda la ventana, colóquelos fuera de la página con pestañas.
• No asigne efectos a las pestañas cambiantes. Las pestañas deben ser accesibles en cualquier orden. Cambiar la pestaña actual nunca debe tener efectos secundarios, aplicar la configuración o dar lugar a un mensaje de error.
• No asigne un significado especial a la última pestaña seleccionada. La selección de tabulación es para la navegación por la última selección de pestañas del usuario no es una configuración.
• No hagas que la configuración de una página dependa de la configuración de otras páginas. En su lugar, coloque cualquier configuración dependiente en la misma página.
• Si es probable que los usuarios empiecen con la última pestaña mostrada, haga que la pestaña persista y selecciónela de forma predeterminada. Haga que la configuración se conserve por ventana, por usuario. De lo contrario, seleccione la primera página de forma predeterminada.

Iconos

• No coloque iconos en pestañas. Normalmente, los iconos agregan desorden visual innecesario, consumen espacio en pantalla y, a menudo, no mejoran la comprensión del usuario. Agregue solo iconos que ayuden a comprender, como los símbolos estándar.

  Incorrecto:

  

  En este ejemplo, los iconos agregan desorden visual y hacen poco para mejorar la comprensión del usuario.

  Excepción: Puede usar iconos claramente reconocibles si es posible que no haya suficiente espacio para mostrar etiquetas significativas:

  Correcto:

  

  En este ejemplo, la ventana es tan estrecha que los iconos comunican mejor las pestañas que las etiquetas.

• No use logotipos de productos para gráficos de tabulación. Las pestañas no son para la personalización de marca.

Patrón de superficie de ventana dinámica

• No use barras de desplazamiento en páginas de pestañas. Las pestañas funcionan de forma similar a las barras de desplazamiento para aumentar el área efectiva de una ventana. Un mecanismo debe ser suficiente.

• Use etiquetas de pestaña concisas. Use una o dos palabras que describan claramente el contenido de la página. Las etiquetas más largas consumen espacio de pantalla, especialmente cuando se localizan las etiquetas.

• Use etiquetas de pestaña específicas y significativas. Evite etiquetas de pestaña genéricas que se puedan aplicar a cualquier pestaña, como General, Avanzado o Configuración.

• Si una pestaña no se aplica al contexto actual y los usuarios no esperan que lo haga, quítelo. Esto simplifica la interfaz de usuario y los usuarios no lo perderán.

  Incorrecto:

  

  En este ejemplo, la pestaña Ubicaciones de archivos está deshabilitada incorrectamente cuando Microsoft Word se usa como editor de correo electrónico. En lugar de deshabilitar esta pestaña, se debe quitar porque los usuarios no esperarían ver ni cambiar las ubicaciones de los archivos en este contexto.

• Si una pestaña no se aplica al contexto actual y es posible que los usuarios lo esperen:

  • Muestra la pestaña.
  • Deshabilite los controles de la página.
  • Incluya texto que explique por qué se deshabilitan los controles.

  No deshabilite la pestaña, ya que hacerlo no es autoexplicativo y prohíbe la exploración. Los usuarios que buscan un valor específico se verían obligados a buscar en todas las demás pestañas.

  

  En este ejemplo, ninguna de las opciones De vista se aplica en Diseño de lectura. Sin embargo, es posible que los usuarios esperen que se apliquen en función de la etiqueta de pestaña, por lo que se muestra la página, pero las opciones están deshabilitadas.

Varios patrones de vistas y documentos

• Use los nombres de la vista o del documento en las etiquetas de pestaña.
• Evite nombres de tabulación demasiado largos. Si es necesario, tenga un tamaño máximo de nombre o trunquen la etiqueta de pestaña mostrada mediante puntos suspensivos. Las etiquetas más largas consumen espacio de pantalla, especialmente cuando se localizan las etiquetas.
• Si una pestaña no se aplica al contexto actual, quite la pestaña.

Patrón de opciones exclusivas

• ¡No uses este patrón! En su lugar, use botones de radio o una lista desplegable.

  Incorrecto:

  

  En este ejemplo, las pestañas se usan incorrectamente como sustituto de los botones de radio.

  Correcto:

  

  En este ejemplo, los botones de radio se usan correctamente en su lugar.

Etiquetas

• Etiquetar pestañas en función de su patrón. Use sustantivos en lugar de verbos, sin terminar la puntuación. Consulte las instrucciones de patrón anteriores para obtener más información.
• Use mayúsculas de estilo de frase.
• No asigne una clave de acceso. Las pestañas son accesibles a través de sus teclas de método abreviado (Ctrl+Tab, Ctrl+Mayús+Tab, Ctrl+PgUp, Ctrl+PgDn). Hay una escasez de buenas opciones de clave de acceso, por lo que no asignar claves de acceso a pestañas facilita su asignación a otros controles.

Documentación

Al hacer referencia a pestañas:

• Use el texto exacto de la etiqueta, incluida su mayúscula, e incluya la pestaña de palabras.
• Para describir la interacción del usuario, use haga clic.
• Cuando sea posible, dé formato a la etiqueta con texto en negrita. De lo contrario, coloque la etiqueta entre comillas solo si es necesario para evitar confusiones.
• Dado que varios usos pueden ser ambiguos, especialmente para un público mundial, use solo la pestaña sustantivo para hacer referencia solo a un control de tabulación. Para otros usos, aclara el significado con un descriptor: la tecla Tab, una tabulación o una marca de tabulación en la regla.

Ejemplo: en el menú Herramientas , haga clic en Opciones y, a continuación, haga clic en la pestaña Ver .