Directrices para cuadros de diálogo de mensaje

Artículo
05/18/2015

Muestra del aspecto de un control de cuadro de diálogo estándar

Descripción

Un cuadro de diálogo de mensaje es un elemento de UI superpuesto que proporciona una superficie estable y contextual que siempre es modal y se descarta expresamente. Los cuadros de diálogo de mensaje se muestran siempre en la misma ubicación en pantalla.

Ejemplo

Captura de pantalla que ilustra el control de cuadro de diálogo estándar

Errores

Los mensajes de error que se aplican al contexto general de la aplicación usan cuadros de diálogo de mensaje. Son diferentes de los mensajes de error que se pueden presentar en línea. Un ejemplo apropiado es un cuadro de diálogo de mensaje que muestra un error de conectividad; esto afecta críticamente al valor que puede conseguir el usuario de la aplicación:

Ejemplo de cuadro de diálogo de mensaje

Preguntas

Esto es un ejemplo de un cuadro de diálogo de mensaje desde el agente de consentimiento de dispositivo de Windows pidiendo consentimiento para usar los servicios de localización:

Ejemplo de cuadro de diálogo de mensaje

Qué hacer y qué no hacer

Usa los cuadros de diálogo de mensaje para transmitir información urgente que el usuario debe ver y confirmar antes de continuar. Un ejemplo es "El período de evaluación para las características avanzadas ha expirado".
Usa cuadros de diálogo de mensaje para presentar preguntas bloqueadoras que necesitan que el usuario proporcione información. Una pregunta bloqueadora es aquella en que la aplicación no puede realizar una selección en nombre del usuario y no puede proceder a ofrecer su funcionalidad al usuario. Una pregunta bloqueadora debería ofrecer opciones claras al usuario. No es una pregunta que se pueda pasar por alto ni posponer.
Usa cuadros de diálogo de mensajes para solicitar acción explícita del usuario o para entregarle un mensaje importante. Ejemplos de uso de cuadros de diálogo:
- El usuario va a modificar un activo valioso de manera permanente
- El usuario va a eliminar un activo valioso
- La seguridad del sistema del usuario podría estar en riesgo
Usa cuadros de diálogo cuando la aplicación o el sistema deben invertir gran cantidad de tiempo en las acciones subsiguientes que un descarte accidental sería perjudicial para la confianza del usuario.
Todos los cuadros de diálogo de mensaje deben identificar claramente el objetivo del usuario en la primera línea de texto (con o sin título).
No uses cuadros de diálogo de mensaje cuando la aplicación tenga que confirmar la intención del usuario con respecto a una acción realizada por este. El elemento apropiado es un control flotante. Consulta Directrices sobre controles flotantes.
No uses cuadros de diálogo de mensajes en el caso de los errores que son contextuales para un lugar específico de la página, como los errores de validación (en los campos de contraseña, por ejemplo), usa el lienzo de la aplicación para mostrar errores en línea. Consulta Selección de las superficies correctas para la UI: Errores.

Instrucciones de uso adicionales

Todos los cuadros de diálogo de mensaje deben identificar claramente el objetivo del usuario en la primera línea del texto del cuadro de diálogo. En las siguientes directrices se explica cómo usar los campos "título" y "contenido" del cuadro de diálogo de mensaje para transmitir la información de manera eficaz.

Título (instrucción principal, opcional)
- Usa un título corto para explicar lo que se necesita hacer con el cuadro de diálogo. Los títulos largos no se ajustan y se truncan.
- Puedes omitir el título si vas a usar el cuadro de diálogo para transmitir un mensaje sencillo, un error o una pregunta. Deja que el texto del contenido transmita esta información esencial.
- Asegúrate de que el título se relacione directamente con las opciones de botón.
Contenido (texto descriptivo)
- Presenta el mensaje, el error o la pregunta de bloqueo de la manera más sencilla posible, sin información extraña.
- Cuando se usa un título,usa el área de contenido para proporcionar más detalles o definir terminología. No repitas el título con otras palabras ligeramente distintas.
Botones
- Usa botones con texto que identifique respuestas específicas a la instrucción principal o el contenido. Un ejemplo sería: "¿Quieres permitir que nombreDeAplicación acceda a tu ubicación?", seguido de los botones "Permitir" y "Bloquear". Cuando las respuestas son específicas, se comprenden con mayor rapidez y la toma de decisiones resulta eficaz.
- Evita usar patrones genéricos como "Aceptar/Cancelar".
- Especifica el botón predeterminado, que debe ser la acción que más quieres que realice el usuario. En el ejemplo anterior, "Permitir" es la opción predeterminada.
  - Si no lo especificas, el botón predeterminado será el que está más a la izquierda.
  - Ubica la opción más segura y conservadora en el extremo derecho. En el ejemplo anterior, "Bloquear" es la opción situada en el extremo derecho y es más conservadora.
Color
- Los fondos de los cuadros de diálogo de mensaje son siempre blancos. Los colores primarios de la aplicación que posee los cuadros de diálogo se usan para los controles.