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 de una condición especial en un control.

Captura de pantalla que muestra un globo indicando que Bloqueo Mayúsculas está activado.

Un globo típico.

Los globos tienen un icono, un título y un cuerpo de texto, todos ellos opcionales. A diferencia de los tooltips y los infotips, los globos también tienen una cola que identifica su origen. Normalmente la fuente es un control, si es así, se denomina control del propietario.

Aunque los globos informan a los usuarios de problemas no críticos, no evitan los problemas, aunque el control del propietario sí podría hacerlo. Cualquier problema no resuelto debe ser gestionado por la interfaz de usuario (UI) del propietario cuando los usuarios intenten confirmar la acción.

Los globos suelen utilizarse con cuadros de texto o controles que utilizan cuadros de texto para cambiar valores, como cuadros combinados, vistas de lista y vistas de árbol. Otros tipos de controles están suficientemente bien limitados y no necesitan la retroalimentación adicional que ofrecen los globos. Además, si hay un problema con otros tipos de controles, suele estar relacionado con la incoherencia entre varios controles, una situación para la que los globos no son adecuados. Solo los controles de entrada de texto no tienen restricciones y son una fuente común de errores puntuales.

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

Nota: Directrices relacionadas con notificaciones, tooltips e infotips, y mensajes de error se presentan en artículos separados.

¿Es este el control adecuado?

Para decidirse, considere estas preguntas:

  • ¿Describe la información un problema o una condición especial? Si no, use otro control. No utilice globos para mostrar información complementaria de un control; considere la posibilidad de utilizar el texto estático,infotips, divulgación progresiva, o avisos en su lugar.
  • ¿se puede detectar inmediatamente el problema o la condición especial ya sea en la entrada o cuando el control propietario pierde el foco de entrada? Si no es así, utilice un mensaje de error mostrado en una tarea de diálogo or cuadro de mensaje.
  • Para los problemas, ¿es crítico el problema? Si es así, utilice un mensaje de error mostrado en una tarea de diálogo or cuadro de mensaje. Estos mensajes de error requieren interacción (lo que es adecuado para errores críticos), mientras que los globos no.
  • En el caso de las condiciones especiales, ¿es válida la condición aunque pueda ser involuntaria? Si es así, los globos son apropiados. Para las condiciones no válidas, es mejor prevenirlas desde el principio. Para las condiciones previstas probables, no es necesario hacer nada.
  • ¿Puede expresarse de forma concisa el problema o la condición especial? Si no, use otro control. Los globos no pueden tener explicaciones detalladas ni proporcionar información complementaria.
  • ¿Describe la información el control sobre el que se pasa el ratón? Si es así, utilice un consejo 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, considere usar una notificación o cuadro de diálogo en su lugar. Es probable que los usuarios pasen por alto los globos fuera de la actividad actual y, por defecto, los globos expiran a los 10 segundos.
  • ¿La información procede de una fuente única y específica? Si un problema o afección tiene múltiples orígenes o no tiene un origen específico, utilice un mensaje in situ o un cuadro de diálogo.

Incorrecto: captura de pantalla de un globo: inicio de sesión fallido

En este ejemplo, el problema podría ser con el nombre de usuario o la contraseña, pero informar del problema con un globo sugiere visualmente que solo la contraseña es el problema. Por consiguiente, la respuesta que se obtiene al introducir un nombre de usuario incorrecto es engañosa.

Los globos son una alternativa a los infotips, los cuadros de diálogo y los mensajes in situ. A diferencia de los tooltips y los infotips:

  • Los globos pueden mostrarse 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 cuerpo de texto y un icono.
  • Los globos pueden ser interactivos, mientras que es imposible hacer clic en un consejo.

A diferencia de los cuadros de diálogo modales:

  • A diferencia de los cuadros de diálogo modales:
  • Los globos identifican una fuente única y específica. Los diálogos modales pueden tener múltiples fuentes, o ninguna fuente específica.

A diferencia de los mensajes in-situ:

  • Los globos se notan más.
  • Los globos no requieren espacio en pantalla ni el diseño dinámico necesario para mostrar mensajes locales.
  • Los globos se eliminan 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 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 propietario tiene el foco de entrada. para corregir el problema, es posible que el usuario tenga que cambiar o volver a introducir los datos; pero si el control propietario ignora los datos incorrectos, es posible que el usuario no tenga que hacer ningún cambio. Debido a que el problema no es crítico, no icono de error es necesario.
Captura de pantalla que muestra un globo indicando un carácter incorrecto.
Un globo utilizado para informar de un problema de entrada de usuario no crítico.
Condición especial El control propietario está en un estado que afecta a la entrada. Este estado es probablemente involuntario y el usuario puede no darse cuenta de que la entrada se ve afectada.
utilizar globos para evitar frustraciones alertando a los usuarios de condiciones especiales en cuanto se producen (por ejemplo, superar el tamaño máximo de entrada o activar el bloqueo de mayúsculas por error). es importante dar este tipo de información sin robar el foco de entrada ni forzar la interacción, ya que estas condiciones podrían ser intencionadas. Estos globos son especialmente importantes para los cuadros de contraseñas y pines, en los que los usuarios trabajan con una retroalimentación mínima. Los globos tienen un icono de advertencia.
Captura de pantalla que muestra globos que indican que Bloque Mayúsculas está activado y que se ha introducido un carácter incorrecto.
Un globo utilizado para informar de una condición especial.

Instrucciones

Cuándo mostrar

  • Mostrar el globo en cuanto se detecte el problema o la condición especial, aunque sea repetidamente, sin ningún retraso apreciable.
    • Para los problemas relacionados con caracteres individuales o con el tamaño máximo de entrada, muestre el globo inmediatamente al introducir los caracteres.
    • Para los problemas relacionados con el valor de entrada (incluido el requisito de un valor que no esté en blanco), muestre el globo cuando el control propietario pierda el foco de entrada. De lo contrario, mostrar globos mientras los usuarios introducen datos potencialmente válidos puede distraerles y molestarles.
  • Mostrar solo un globo a la vez. Mostrar varios globos puede resultar abrumador. Si un solo acontecimiento da lugar a varios problemas, preséntelos todos a la vez o solo informe del problema más importante.

Incorrecto: captura de pantalla de dos globos apuntando a una caja

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

Cuánto tiempo para mostrar

  • Eliminar un globo cuando:
    • Se resuelve el problema o se elimina la condición especial.
    • El usuario introduce datos válidos (para problemas de entrada).
    • El globo expira. Por defecto, los globos se eliminan después de 10 segundos, aunque los usuarios pueden cambiar esto modificando el parámetro del sistema SPI_MESSAGEDURATION.
  • Elimina el tiempo de espera si los usuarios no pueden continuar hasta que se resuelva el problema.Desarrolladores: En Win32, puede ajustar la hora de visualización con el mensaje TTM_SETDELAYTIME.

Cómo mostrar

  • Mostrar globos debajo del control de su propietario. Al hacerlo, los usuarios pueden ver el contexto, incluido el control propietario y su etiqueta. Microsoft Windows ajusta automáticamente la posición de los globos para que queden completamente en pantalla. El comportamiento por defecto es mostrar un globo encima de su control propietario, como se hace con las notificaciones.

Correcto: captura de pantalla de un globo debajo de su control

Incorrecto: captura de pantalla de un globo encima de su control

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

cuadros de texto de contraseña y PIN

  • Utilice un globo para indicar que Bloqueo Mayúsculas está activado, usando el texto del siguiente ejemplo:

captura de pantalla de un globo que indica que el bloqueo de mayúsculas está activado

En este ejemplo, un globo indica que Bloqueo Mayúsculas está activado en un cuadro de texto PIN.

  • Utilice un globo para indicar cuando 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 en los cuadros de texto ordinarios.

captura de pantalla de un globo que indica los limites del código pin

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

  • Utilice un globo para indicar cuando los usuarios introducen caracteres incorrectos. Sin embargo, es mejor no tener este tipo de 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 datos documentados sobre contraseñas o PINs válidos.

captura de pantalla de un globo que indica una entrada incorrecta

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

Otros cuadros de texto

  • Considere la posibilidad de utilizar un globo para indicar cuándo los usuarios intentan superar el tamaño máximo de entrada en los cuadros de texto críticos y breves dirigidos a usuarios principiantes. Algunos ejemplos son los nombres de usuario y los nombres de cuenta. Los cuadros de texto emiten un pitido cuando los usuarios intentan sobrepasar el límite máximo de entrada, pero es posible que los usuarios noveles no entiendan el significado del pitido.

captura de pantalla de un globo que indica los límites de caracteres

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

Interacción

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

Iconos

  • Elige el icono en función del patrón de uso:

    Patrón Iconos
    Problema de entrada Sin icono. No usar un icono de error aquí hay consistencia con el tono Windows guías.
    Condiciones especiales El pixel estándar 16x16 icono de advertencia.

Accesibilidad

Si se utilizan correctamente, los globos mejoran la accesibilidad. Para que los globos sean accesibles:

  • Solo se muestran los globos relacionados con la actividad actual del usuario.
  • El texto del globo debe ser conciso. De este modo, el texto del globo es más fácil de leer para los usuarios con baja visión y se minimiza la interrupción cuando lo leen los lectores de pantalla.
  • Vuelve a mostrar el globo cada vez que se repita el problema o la condición.

Texto

Título del texto

  • Utilice un texto de título que resuma brevemente el problema de entrada o la condición especial en un lenguaje claro, sencillo, conciso y específico. Los usuarios deben ser capaces de entender el propósito del globo rápidamente y con el mínimo esfuerzo.
  • Utilizar fragmentos de texto u oraciones completas sin puntuación final.
  • Utilice mayúsculas y minúsculas de estilo de oración. Para más información, consulte el glosario.
  • No utilice más de 48 caracteres (en inglés) para facilitar la localización. El título tiene una longitud máxima de 63 caracteres y debe poder ampliarse al menos un 30% para adaptarse a la localización.

texto del cuerpo

  • Utilice la primera frase del cuerpo del texto para exponer el problema o la afección de forma que sea claramente relevante para el usuario. No repita la información del título. Omítalo si no hay nada más que añadir.
  • Utilice la segunda frase para indicar qué puede hacer el usuario para resolver el problema o revertir el estado. De acuerdo al estilo y al tono guías, no se necesita usar la palabra por favor en esta declaración. Pon dos saltos de línea entre la primera y la segunda frase.

captura de pantalla de un globo con el título y el cuerpo del texto

Este ejemplo muestra el diseño estándar del globo de texto.

  • Explique cómo resolver el problema o revertir el estado aunque esa explicación sea obvia, pero omite la redundancia entre el enunciado del problema y su resolución. Excepciones:
    • Omita la resolución si no puede expresarse de forma concisa o sin redundancias significativas.
    • Omita la resolución si el usuario no tiene nada que hacer, como cuando se ignoran los caracteres incorrectos.
  • Utilizar oraciones completas con puntuación final.
  • Utilice mayúsculas como en las frases.
  • No utilice más de 200 caracteres (en inglés) para facilitar la localización. El cuerpo del texto tiene una longitud máxima de 255 caracteres y debe poder ampliarse al menos un 30% para adaptarse a la localización.

Documentación

Al referirse a los globos:

  • Utilice el texto exacto del título, incluidas las mayúsculas.
  • Refiérase al componente como un globo, no como una notificación o una alerta.
  • Cuando sea posible, formatee el texto del título utilizando negrita. En caso contrario, ponga el título entre comillas solo si es necesario para evitar confusiones.