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

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.

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 ve y cómo), las tareas en segundo plano (como la impresión, el examen y el formato) u otra información contextual (como la selección y el estado del 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.

Una barra de estado típica.

Nota

Las directrices relacionadas con el área de notificación se presentan en un artículo independiente.

¿Es esta la interfaz de usuario adecuada?

Para decidirte, intenta responder a estas preguntas:

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

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

• ¿Es la ventana 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 se deben usar como barra de menús 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.

• ¿El estado es útil y relevante? 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 requiera atención y no se pueda omitir fácilmente, como un cuadro de diálogo o dentro de la propia ventana principal.

  

  Barra de direcciones rojas en Windows Internet Explorer.

• ¿El programa está pensado principalmente para usuarios principiantes? Por lo general, los usuarios inexpertos 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. De hecho, es tan fácil 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 descarnado, animación o parpadeo, pero para diseñar esta limitación. Puede hacerlo de la siguiente forma:

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

Si sólo haces una cosa...

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

Patrones de uso

Las barras de estado tienen varios patrones de uso:

Uso	Ejemplo
Estado actual de la ventana Mostrar el origen de lo que se muestra junto con cualquier modo de vista	En este ejemplo, la barra de estado muestra la ruta de acceso al documento.
Progress Muestra el progreso de las tareas en segundo plano, ya sea con una barra de progreso determinada o una animación.	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.
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.

Instrucciones

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.
• Presentar 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 franjas 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:

  Overlay	Estado
  	Advertencia
  	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 o exigen atención. El ojo es sensible a los cambios en el campo periférico de la visión, por lo que los cambios de estado deben ser sutiles.

• Para los iconos que proporcionan información de estado importante, prefiere las 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.

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 tenga un aspecto y se comporte como un botón de menú o un botón de división. Estas áreas de barra de estado deben tener una flecha desplegable para indicar que se pueden hacer clic en ellas.
  • Muestra el menú en el clic izquierdo sobre el mouse hacia abajo, no hacia arriba.
  • No admita hacer clic con el botón derecho o 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.

Texto

• Por lo general, use etiquetas concisas. Corte cualquier texto que se pueda eliminar.
• Prefiere fragmentos de oraciones, 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 gerund) y termina con puntos suspensivos. Por ejemplo: "Copiando...". Esta etiqueta puede cambiar dinámicamente si la operación tiene varios pasos o está procesando varios objetos.
• No use color, negrita o 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 sobre herramientas.

Documentación

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