Pestañas

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual .

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

captura de pantalla de

Un conjunto típico de pestañas.

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

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

Nota

Las directrices relacionadas con diseño, menús de pestañas, cuadros de diálogo y ventanas de propiedades se presentan en artículos independientes.

¿Es este el control correcto?

Para decidirlo, tenga en cuenta estas preguntas:

• ¿Los controles se pueden ajustar 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 están relacionadas 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 es completamente independiente en distintas páginas? ¿El cambio de una configuración en una página afectará a la configuración en otras páginas? Si no son independientes, use páginas de tareas o un asistente de en su lugar.
• ¿Las pestañas son principalmente iguales entre sí o hay una relación jerárquica? Si es jerárquico, considere la posibilidad de usar la divulgación progresiva o los cuadros de diálogo de secundarios 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 de . 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 de o 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. captura de pantalla de 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, se pueden usar pestañas para mostrar documentos diferentes 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 una manera de navegar por dentro de la ventana.

Si solo haces una cosa...

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

Directrices

General

• Usar 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).

• Usar pestañas verticales si:

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

  • Usar 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.

  de barra de desplazamiento

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

• Asegúrese de que las pestañas tienen un aspecto similar a las pestañas y no a otro tipo de control.

  incorrecto:

  

  En este ejemplo, estas pestañas tienen un aspecto similar 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 producir un mensaje de error.
• No asigne un significado especial a la última pestaña seleccionada. La selección de pestañas es para la navegación por la última selección de pestañas del usuario no es una configuración.
• No haga 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. Los iconos suelen agregar desorden visual innecesario, consumir espacio en pantalla y, a menudo, no mejorar la comprensión del usuario. Agregue solo iconos que ayuden a comprender, como 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 espacio suficiente 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 pestañas. Las pestañas no son para 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 sea así, quítelo. Al hacerlo, se 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 Ver se aplica en Diseño de lectura. Sin embargo, los usuarios pueden esperar 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 vista o documento en las etiquetas de pestaña.
• Evite nombres de pestaña demasiado largos. Si es necesario, tenga un tamaño máximo de nombre o truncar 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 use 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 nombres 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 pestaña. Para otros usos, aclare 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 de, haga clic en Opcionesy, a continuación, haga clic en la pestaña Ver .