Barras de estado (conceptos básicos de diseño)

Una barra de estado es un área en la parte inferior de una ventana principal que muestra información sobre el estado de la ventana actual (por ejemplo, lo que se está viendo y cómo), las tareas en segundo plano (como la impresión, el examen y el formato) u otra información contextual (como el estado de selección y teclado).

Las barras de estado suelen indicar el estado a través del texto y los iconos, pero también pueden tener indicadores de progreso, así como menús para comandos y opciones relacionados con el estado.

captura de pantalla de

Barra de estado típica.

¿Es esta la interfaz de usuario adecuada?

Para decidirlo, tenga en cuenta estas preguntas:

• ¿Es relevante el estado cuando los usuarios usan activamente otros programas? Si es así, use un icono de área de notificación de .

• ¿El elemento de estado necesita mostrar las notificaciones? Si es así, debe usar un icono de área de notificación.

• ¿La ventana es una ventana principal? Si no es así, no use una barra de estado. Los cuadros de diálogo, los asistentes, los paneles de control y las hojas de propiedades no deben tener barras de estado.

• ¿La información está principalmente en el estado? Si no es así, no use una barra de estado. Las barras de estado no deben usarse como barra de menús de secundaria o barra de herramientas.

• ¿La información explica cómo usar el control seleccionado? Si es así, muestre la información junto al control asociado mediante una explicación complementaria o una etiqueta de instrucción en su lugar.

• ¿Es útil y relevante el estado? Es decir, ¿es probable que los usuarios cambien su comportamiento como resultado de esta información? Si no es así, no muestre el estado o colóquelo en un archivo de registro.

• ¿Es crítico el estado? ¿Se requiere una acción inmediata? Si es así, muestre la información en un formulario que exija atención y no se pueda omitir fácilmente, como un cuadro de diálogo de o dentro de la propia ventana principal.

  

  Barra de direcciones roja en Windows Internet Explorer.

• ¿El programa está pensado principalmente para usuarios novatos? Por lo general, los usuarios no experimentados no conocen las barras de estado, por lo que reconsidera el uso de barras de estado en este caso.

Conceptos de diseño

Las barras de estado son una excelente manera de proporcionar información de estado sin interrumpir a los usuarios ni interrumpir su flujo. Sin embargo, las barras de estado son fáciles de pasar por alto. Tan fácil, de hecho, que muchos usuarios no notan las barras de estado en absoluto.

La solución a este problema no es exigir la atención del usuario mediante iconos de moda, animación o parpadeo, pero para diseñar esta limitación. Para ello, puede hacer lo siguiente:

• Asegúrese de que la información de estado es útil y relevante. Si no es así, no proporcione una barra de estado en absoluto.
• No se usan barras de estado para obtener información crucial. Los usuarios nunca deben tener que saber qué está en la barra de estado. Si los usuarios deben verlo, no lo coloques en una barra de estado.

Si solo haces una cosa...

Asegúrese de que la información de la barra de estado sea útil y relevante, pero no crucial.

Patrones de uso

Las barras de estado tienen varios patrones de uso:

Uso	Ejemplo
de estado de la ventana actual Mostrar el origen de lo que se muestra junto con los modos de vista	En este ejemplo, la barra de estado muestra la ruta de acceso al documento.
progreso Muestra el progreso de las tareas en segundo plano, ya sea con una barra de progreso determinada o una animación.	de barra de progreso En este ejemplo, la barra de estado incluye una barra de progreso para mostrar la carga de la página web en una ventana de Internet Explorer.
de información contextual Mostrar información contextual sobre lo que el usuario está haciendo actualmente.	En este ejemplo, Microsoft Paint muestra el tamaño de selección en píxeles.

Directrices

General

• Considere la posibilidad de proporcionar un comando Ver barra de estado si solo algunos usuarios necesitarán la información de la barra de estado. Oculte la barra de estado de forma predeterminada si la mayoría de los usuarios no lo necesitarán.
• No use la barra de estado para explicar los elementos de la barra de menús. Este patrón de ayuda no se puede detectar.

Presentación

• Deshabilite el estado modal que no se aplica. El estado modal incluye los estados de teclado y documento.
• Quite el estado no modal que no se aplica.
• Presente información de estado en el orden siguiente: estado actual de la ventana; progreso; y información contextual.

Iconos

• Elija diseños de iconos de estado fácilmente reconocibles. Prefiere iconos con contornos únicos sobre iconos con forma cuadrada o rectangular.

• Use swaths de rojo puro, amarillo y verde solo para comunicar la información de estado. De lo contrario, estos iconos son confusos.

  Correcto:

  

  incorrecto:

  

  En el ejemplo incorrecto, el icono rojo sugiere involuntariamente un error, lo que crea confusión.

• Use variaciones de icono o superposiciones para indicar los cambios de estado o estado. Use variaciones de icono para mostrar los cambios en cantidades o puntos fuertes. Para otros tipos de estado, use estas superposiciones estándar:

  Superponer	Estado
  captura de pantalla de	Advertencia
  captura de pantalla de	Error
  	Deshabilitado o desconectado
  	Bloqueado o sin conexión

• No cambie el estado con demasiada frecuencia. Los iconos de la barra de estado no deben aparecer ruidosos, inestables ni exigir atención. El ojo es sensible a los cambios en el campo periférico de visión, por lo que los cambios de estado deben ser sutiles.

• En el caso de los iconos que proporcionan información de estado importante, prefiera etiquetas en contexto.

• Los iconos de la barra de estado sin etiquetar deben tener información sobre herramientas.

Para obtener más información, vea iconos de .

Interacción

• Haga que un área de barra de estado sea interactiva para permitir que los usuarios accedan directamente a comandos y opciones relacionados.
  • Use un control que parezca y se comporte como un botón de menú o un botón de división. Estas áreas de la barra de estado deben tener una flecha desplegable para indicar que se pueden hacer clic.
  • Muestra el menú en el mouse hacia abajo, no hacia arriba.
  • No admita hacer clic con el botón derecho ni hacer doble clic. Los usuarios no esperan estas interacciones en una barra de estado, por lo que es probable que no las intenten.
• Mostrar información sobre herramientas al mantener el puntero.

Mensaje de texto

• Por lo general, use etiquetas concisas. Corte cualquier texto que se pueda eliminar.
• Prefiere fragmentos de oración, sin terminar la puntuación. Use oraciones completas (con puntuación final) solo cuando los fragmentos de oraciones no sean significativamente más cortos.
• Para las etiquetas de progreso opcionales, indique lo que está haciendo la operación con una etiqueta que comienza con un verbo (formulario de gerundia) y termina con puntos suspensivos. Por ejemplo: "Copiar...". Esta etiqueta puede cambiar dinámicamente si la operación tiene varios pasos o está procesando varios objetos.
• No use color, negrita ni cursiva para resaltar el texto de la barra de estado.
• Para obtener instrucciones sobre expresiones de información sobre herramientas, consulte información sobre herramientas e información.

Documentación

Consulte las barras de estado como barras de estado, no las líneas de estado ni otras variaciones. Ejemplo: "El número de página actual se muestra en la barra de estado".