Los modales son notificaciones altamente disruptivas que brindan a los usuarios información crítica que necesita su atención o acción. Conservar y bloquear tareas hasta que el usuario las descarte. Los modales permiten más acciones del usuario que otras notificaciones y pueden incluir otros componentes.

Las Modales interrumpen al usuario y pausan su tarea actual. Pueden ser perjudiciales para los usuarios si no se usan con moderación. Solo use un modal cuando el mensaje sea crítico y necesite la atención o acción inmediata del usuario. Las modales persisten hasta que los usuarios interactúan con ellos y solo desaparecen cuando el usuario las descarta.

Mejores prácticas:

• Muestra solo una notificación modal a la vez.

• Utilizar modales cuando necesite interrumpir inmediatamente la tarea de un usuario.

• Brindar pasos claros para resolver y descartar la notificación.

Anatomía

1. Encabezado: incluye un título, una etiqueta opcional y el icono de cierre. El título debe ser breve y describir claramente la tarea o el propósito de los diálogos. Utilice la etiqueta opcional sobre el título para establecer el contexto de la información en el cuadro de diálogo.

2. Cuerpo: contiene la información y / o los controles necesarios para completar la tarea del diálogo. Puede incluir texto y componentes del mensaje.

3. Acciones: las principales acciones necesarias para completar o cancelar la tarea de diálogo. Los grupos de botones cambian según la variante modal. Use palabras descriptivas para las acciones como Agregar, Eliminar, Guardar y evite palabras vagas como Listo o Aceptar.

4. x: el xicono de cerrar cerrará el cuadro de diálogo sin enviar ningún dato.

5. Superposición: (solo cuadros de diálogo modales) Superposición de pantalla que oculta el contenido de la página.

Cuándo usar

• Úselo para enfocar la atención del usuario.

• Úselo para completar tareas breves.

• Úselo para recopilar información del usuario.

• Úselo para mostrar información relevante.

Cuando no usar

• No lo use si el contenido no está relacionado con el flujo de trabajo actual.

• No lo utilice para mostrar grandes cantidades de datos.

• No vuelva a crear una aplicación o página completa en un cuadro de diálogo.

• No lo use cuando el usuario no haya activado el diálogo.

Tipos

Para modales pasivos:

• x : Al hacer clic en el xicono de cierre en la esquina superior derecha, se cerrará el modal sin enviar ningún dato y el usuario regresará a su contexto anterior.

• Haga clic en otro lugar : al hacer clic fuera del área modal pasiva, se cerrará automáticamente el modal.

• Esc : presione ESCen el teclado

Para modales transaccionales, de progreso y de reconocimiento:

• Finalización de la tarea : hacer clic en la acción principal completará la tarea y cerrará automáticamente el modal.

• Botón Cancelar : hacer clic en el botón cancelar cerrará el modal y devolverá al usuario a su contexto anterior. Cancelar deshace todos los cambios aplicados.

• x : Al hacer clic en el xicono de cierre en la esquina superior derecha, se cerrará el modal sin enviar ningún dato y el usuario regresará a su contexto anterior.

• Esc : presione ESCen el teclado

Mejores prácticas

Utilice los diálogos con moderación

No abuses de los diálogos. Son disruptivos y pueden molestar fácilmente al usuario si se usan incorrectamente o con demasiada frecuencia. Cuando se utilizan cuadros de diálogo para tareas no relacionadas con el flujo de trabajo, es probable que un usuario comience a ignorar o descartar los cuadros de diálogo sin comprender completamente el contenido. Esto puede hacer que los usuarios tomen decisiones apresuradas o impulsivas cuando se trata de diálogos más críticos.

Los diálogos deben ser iniciados por el usuario

Una acción del usuario, como hacer clic en un botón, debería activar la apertura del cuadro de diálogo. No interrumpa al usuario abriendo un cuadro de diálogo cuando no lo espera. Evite las ventanas emergentes generadas por el sistema que distraigan al usuario mientras trabaja. Los desencadenantes pueden ser una consecuencia directa o indirecta de la acción de un usuario. Un ejemplo de una acción indirecta es un usuario que cierra una pestaña con contenido no guardado que luego hace que un cuadro de diálogo le pregunte si desea guardar sus cambios antes de cerrar. Si el sistema genera automáticamente una alerta que no es consecuencia de la acción de un usuario, sino una respuesta a los procesos que ocurren en segundo plano, entonces se debe usar una notificación de brindis.

Mantenga las tareas de diálogo simples y enfocadas

Las tareas de diálogo deben ser directas y fáciles de completar. Evite la aparición de características en los diálogos donde un diálogo que alguna vez fue simple se ha llenado de interacciones. Al decidir utilizar un diálogo, considere cómo la tarea podría expandirse en el futuro y si un diálogo podrá incorporar adiciones de manera efectiva. Un ejemplo de una tarea simple sería agregar un nuevo elemento a una lista donde los detalles del elemento se agregan y envían a través de un diálogo.