Globos

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.

Un globo es una pequeña ventana emergente que informa a los usuarios de un problema no crítico o una condición especial en un control.

Screenshot that shows a balloon indicating that Caps Lock is on.

Un globo típico.

Los globos tienen un icono, un título y texto del cuerpo, todos los cuales son opcionales. A diferencia de la información sobre herramientas y la información, los globos también tienen una cola que identifica su origen. Normalmente, el origen es un control si es así, se conoce como control propietario.

Aunque los globos informan a los usuarios de problemas no críticos, no impiden problemas aunque el control del propietario pueda. Cualquier problema no controlado debe ser controlado por la interfaz de usuario (UI) propietario cuando los usuarios intentan confirmar la acción.

Los globos se suelen usar con cuadros de texto o controles que usan cuadros de texto para cambiar valores, como cuadros combinados, vistas de lista y vistas de árbol. Otros tipos de controles están suficientemente restringidos y no necesitan los globos de comentarios adicionales. Además, si hay un problema con otros tipos de controles, a menudo implica incoherencia entre varios controles una situación para la que los globos no son adecuados. Solo los controles de entrada de texto son sin restricciones y un origen común de errores de punto único.

Una notificación es un tipo específico de globo mostrado por un icono de área de notificación .

Nota: Las directrices relacionadas con las notificaciones, la información sobre herramientas y la información, y los mensajes de error se presentan en artículos independientes.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

  • ¿La información describe un problema o una condición especial? Si no es así, usa otro control. No use globos para mostrar información complementaria para un control; considere la posibilidad de usar texto estático, información sobre información, divulgación progresiva o avisos en su lugar.
  • ¿Se puede detectar el problema o la condición especial inmediatamente en la entrada o cuando el control propietario pierde el foco de entrada? Si no es así, use un mensaje de error mostrado en un cuadro de diálogo o mensaje de tarea.
  • Para los problemas, ¿es crítico el problema? Si es así, use un mensaje de error mostrado en un cuadro de diálogo o mensaje de tarea. Estos mensajes de error requieren interacción (que es adecuada para errores críticos), mientras que los globos no.
  • En el caso de las condiciones especiales, ¿es probable que la condición sea válida todavía no deseada? Si es así, los globos son adecuados. En el caso de las condiciones no válidas, es mejor evitarlas en primer lugar. Para condiciones probables previstas, no es necesario hacer nada.
  • ¿Se puede expresar el problema o la condición especial de forma concisa? Si no es así, usa otro control. Los globos no pueden tener explicaciones detalladas ni proporcionar información complementaria.
  • ¿La información describe el control que se está desplazando actualmente? Si es así, use una sugerencia en su lugar, a menos que los usuarios necesiten interactuar con el mensaje.
  • ¿La información está relacionada con la actividad actual del usuario? Si no es así, considere la posibilidad de usar una notificación o un cuadro de diálogo en su lugar. Es probable que los usuarios pasen por alto los globos fuera de la actividad actual y, de forma predeterminada, los globos agotan el tiempo de espera después de 10 segundos.
  • ¿La información procede de un único origen específico? Si un problema o condición tiene varios orígenes o ningún origen específico, use un mensaje en contexto o un cuadro de diálogo en su lugar.

Incorrecta:screen shot of a balloon: logon unsuccessful

En este ejemplo, el problema podría ser con el nombre de usuario o la contraseña, pero notificarlo con un globo sugiere visualmente que solo la contraseña es el problema. Por lo tanto, los comentarios de escribir un nombre de usuario incorrecto son engañosos.

Los globos son una alternativa a la información sobre información, los cuadros de diálogo y los mensajes en contexto. A diferencia de la información sobre herramientas y la información:

  • Los globos se pueden mostrar independientemente de la ubicación actual del puntero, por lo que tienen una cola que indica su origen.
  • Los globos tienen un título, un texto del cuerpo y un icono.
  • Los globos pueden ser interactivos, mientras que es imposible hacer clic en una propina.

A diferencia de los cuadros de diálogo modales:

  • Los globos no roban el foco de entrada ni requieren interacción.
  • Los globos identifican un único origen específico. Los cuadros de diálogo modales pueden tener varios orígenes o ningún origen específico.

A diferencia de los mensajes en contexto:

  • Los globos son más notables.
  • Los globos no requieren espacio de pantalla disponible ni el diseño dinámico necesario para mostrar mensajes en contexto.
  • Los globos se quitan automáticamente después de un tiempo de espera.

Patrones de uso

Los globos tienen estos patrones de uso:

Uso Ejemplo
Problema de entrada Un problema de entrada de usuario no crítico procedente de un único control de propietario, normalmente un cuadro de texto.
El uso de globos para mensajes de error no roba el foco de entrada, pero sigue siendo muy notable si el control de propietario tiene el foco de entrada. para corregir el problema, es posible que el usuario tenga que cambiar o volver a escribir la entrada; pero si el control de propietario omite la entrada incorrecta, es posible que el usuario no tenga que realizar ningún cambio en absoluto. dado que el problema no es crítico, no es necesario ningún icono de error .
Screenshot that shows a balloon indicating an incorrect character.
Un globo usado para notificar un problema de entrada de usuario no crítico.
Condición especial El control propietario está en un estado que afecta a la entrada. Es probable que este estado no se haya deseado y que el usuario no se dé cuenta de que la entrada se ve afectada.
use globos para evitar la frustración alertando a los usuarios de condiciones especiales tan pronto como se produzcan (por ejemplo, superando el tamaño máximo de entrada o estableciendo el bloqueo de límites por error). es importante proporcionar estos comentarios sin robar el foco de entrada ni forzar la interacción porque estas condiciones pueden ser intencionadas. Estos globos son especialmente importantes para las casillas de contraseña y anclaje, donde los usuarios están trabajando de otro modo con comentarios mínimos. estos globos tienen un icono de advertencia.
Screenshot that shows balloons indicating Caps Lock is on and an incorrect character is entered.
Un globo utilizado para informar de una condición especial.

Directrices

Cuándo mostrar

  • Muestre el globo tan pronto como se detecte el problema o la condición especial, incluso si se repite, sin ningún retraso notable.
    • Para problemas relacionados con caracteres individuales o el tamaño máximo de entrada, muestre el globo inmediatamente en la entrada.
    • En el caso de problemas relacionados con el valor de entrada (incluida la necesidad de un valor no en blanco), muestre el globo cuando el control propietario pierda el foco de entrada. De lo contrario, mostrar globos mientras los usuarios escriben entradas potencialmente válidas pueden ser molestos y distraídos.
  • Muestra solo un globo a la vez. Mostrar varios globos puede ser abrumador. Si un único evento produce varios problemas, presente todos los problemas a la vez o notifique solo el problema más importante.

Incorrecta:screen shot of two balloons pointing to one box

En este ejemplo, se presentan dos problemas incorrectamente al mismo tiempo.

Cuánto tiempo se va a mostrar

  • Quite un globo cuando:
    • El problema se resuelve o se quita una condición especial.
    • El usuario escribe datos válidos (para problemas de entrada).
    • El globo agota el tiempo de espera. De forma predeterminada, los globos se quitan después de 10 segundos, aunque los usuarios pueden cambiarlo modificando el parámetro del sistema SPI_MESSAGEDURATION.
  • Quite el tiempo de espera si los usuarios no pueden continuar hasta que se resuelva el problema. Desarrolladores: en Win32, puedes establecer la hora de presentación con el mensaje TTM_SETDELAYTIME.

Cómo mostrar

  • Muestra globos debajo de su control propietario. Esto permite a los usuarios ver el contexto, incluido el control de propietario y su etiqueta. Microsoft Windows ajusta automáticamente las posiciones del globo para que estén completamente en pantalla. El comportamiento predeterminado es mostrar un globo encima de su control de propietario, como se hace con las notificaciones.

Correcto:screen shot of a balloon displayed below its control

Incorrecta:screen shot of a balloon displayed above its control

En el ejemplo incorrecto, el globo se muestra incomodamente encima de su control propietario.

Cuadros de texto Contraseña y PIN

  • Use un globo para indicar que el bloqueo de mayúsculas está activado mediante el texto del ejemplo siguiente:

screen shot of a balloon indicating caps lock is on

En este ejemplo, un globo indica que el bloqueo de mayúsculas está activado en un cuadro de texto PIN.

  • Use un globo para indicar cuándo los usuarios intentan superar el tamaño máximo de entrada. Alcanzar el tamaño máximo de entrada es mucho menos obvio en los cuadros de texto de contraseña y PIN que los cuadros de texto normales.

screen shot of a balloon indicating pin code limits

En este ejemplo, un globo indica que el usuario está intentando superar el tamaño máximo de entrada.

  • Use un globo para indicar cuándo los usuarios introducen caracteres incorrectos. Sin embargo, es mejor no tener estas restricciones porque reducen la seguridad de la contraseña o el PIN. Para evitar la divulgación de información, el globo solo debe mencionar hechos documentados sobre contraseñas o PIN válidos.

screen shot of a balloon indicating incorrect input

En este ejemplo, un globo indica que el PIN requiere números.

Otros cuadros de texto

  • Considere la posibilidad de usar un globo para indicar cuándo los usuarios intentan superar el tamaño máximo de entrada de los cuadros de texto críticos y cortos destinados a los usuarios principiantes. Algunos ejemplos son los nombres de usuario y los nombres de cuenta. Los cuadros de texto suenan cuando los usuarios intentan superar la entrada máxima, pero es posible que los usuarios novatos no comprendan el significado del pitido.

screen shot of a balloon indicating character limits

En este ejemplo, un globo indica que el usuario intentó superar el tamaño máximo de entrada.

Interacción

  • Cuando los usuarios hacen clic en un globo, simplemente descarte el globo sin mostrar ninguna otra interfaz de usuario o tener ningún otro efecto secundario. A diferencia de las notificaciones, los globos no deben tener botones de cierre.

Iconos

Accesibilidad

Cuando se usan correctamente, los globos mejoran la accesibilidad. Para que los globos sean accesibles:

  • Solo se muestran globos relacionados con la actividad actual del usuario.
  • Mantenga el texto del globo conciso. Al hacerlo, el texto del globo es más fácil de leer para los usuarios con visión baja y minimiza la interrupción cuando los lectores de pantalla leen.
  • Reproduzca el globo cada vez que se repite el problema o la condición.

Texto

Texto del título

  • Use texto de título que resuma brevemente el problema de entrada o la condición especial en lenguaje claro, sin formato, conciso y específico. Los usuarios deben ser capaces de comprender el propósito del globo rápidamente y con un esfuerzo mínimo.
  • Use fragmentos de texto o oraciones completas sin terminar la puntuación.
  • Use mayúsculas de estilo de frase. Para obtener más información, consulte el glosario.
  • Use no más de 48 caracteres (en inglés) para dar cabida a la localización. El título tiene una longitud máxima de 63 caracteres y debe poder expandirse al menos un 30 por ciento para dar cabida a la localización.

Texto del cuerpo

  • Use la primera frase del texto del cuerpo para indicar el problema o condición de una manera que sea claramente relevante para el usuario. No repita la información en el título. Omita esto si no hay nada más que agregar.
  • Use la segunda oración para indicar lo que el usuario puede hacer para resolver el problema o revertir el estado. De acuerdo con las directrices estilo y tono , no es necesario usar la palabra Please en esta declaración. Coloque dos saltos de línea entre las oraciones primera y segunda.

screen shot of a balloon with title and body text

En este ejemplo se muestra el diseño de texto de globo estándar.

  • Explicar cómo resolver el problema o revertir el estado aunque esa explicación sea obvia, pero omita la redundancia entre la instrucción del problema y su resolución. Excepciones:
    • Omita la resolución si no se puede expresar concisamente o sin redundancia significativa.
    • Omita la resolución si no hay nada que haga el usuario, como cuando se omiten caracteres incorrectos.
  • Use oraciones completas con puntuación final.
  • Use mayúsculas de estilo de frase.
  • Use no más de 200 caracteres (en inglés) para dar cabida a la localización. El texto del cuerpo tiene una longitud máxima de 255 caracteres y debe poder expandirse al menos un 30 por ciento para dar cabida a la localización.

Documentación

Al hacer referencia a globos:

  • Use el texto exacto del título, incluida su mayúscula.
  • Consulte el componente como un globo, no como una notificación o una alerta.
  • Cuando sea posible, formatee el texto del título con texto en negrita. De lo contrario, coloque el título entre comillas solo si es necesario para evitar confusiones.