Los modales son un tipo de diálogo que se utiliza para presentar información crítica o solicitar información del usuario necesaria para completar el flujo de trabajo de un usuario. Los modales interrumpen el flujo de trabajo de un usuario por diseño. Cuando está activo, un usuario está bloqueado del contenido de la página y no puede regresar a su flujo de trabajo anterior hasta que se complete la tarea modal o el usuario descarte el modal. Si bien son efectivos cuando se usan correctamente, los modales deben usarse con moderación para limitar las interrupciones al usuario.

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. 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.

Cuándo usar

Requerir una respuesta inmediata del usuario

Utilice un cuadro de diálogo para solicitar información que impida que el sistema continúe con un proceso iniciado por el usuario.

Notificar al usuario de información urgente

Utilice un diálogo modal para notificar al usuario de información urgente sobre su trabajo actual. Los diálogos modales se utilizan comúnmente para informar errores del sistema o transmitir una consecuencia de la acción de un usuario.

Confirmar la decisión de un usuario

Utilice un diálogo modal para confirmar las decisiones del usuario. Describa claramente la acción que se está confirmando y explique las posibles consecuencias que pueda causar. Tanto el título como el botón deben reflejar la acción que ocurrirá. Si la acción es destructiva o irreversible, utilice un modal de peligro transaccional.

Tipos

Para modales pasivos:

• x : Al hacer clic en el x icono 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 ESC en 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 x icono 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 ESC en el teclado

Anatomía

• 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.

• Cuerpo: contiene la información y / o los controles necesarios para completar la tarea del diálogo. 

  • Puede incluir texto y componentes del mensaje.

  • Un modal debe incluir solo contenido relevante para completar la tarea actual.

  • El texto solo debe tener el 80% del ancho del modal y los componentes pueden abarcar el 100% del ancho.

• Pie o footer: Utilice palabras descriptivas para las acciones como Agregar, Eliminar y Guardar. Evite palabras vagas como Listo o Aceptar. 

  • Si necesita incluir un "documento" u otra acción no principal, inclúyalo como un enlace en el cuerpo del modal.

  • 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.

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

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

Tamaños

Hay cuatro tamaños modales: extra pequeño, pequeño, predeterminado, grande. Elija un tamaño que funcione mejor para la cantidad de contenido modal que tiene. Los modales con mensajes cortos deben usar un modal pequeño para evitar largas líneas individuales; para componentes complejos, como la tabla de datos, el modal predeterminado o grande será más cómodo.

Cada tamaño modal tiene un ancho de respuesta que cambia según el tamaño del navegador. A medida que el navegador disminuye, el porcentaje de ancho modal aumenta, manteniendo así una proporción adecuada entre el modal y el navegador.

Alturas máximas

Cada tamaño modal tiene una altura máxima para mantener una proporción de ventana adecuada. Si su modal tiene demasiado desplazamiento debido a una altura máxima, considere usar el siguiente tamaño modal. Si la altura modal grande todavía no es suficiente espacio, entonces este es un indicador de que puede ser necesaria una página completa en su lugar.

Móvil

En dispositivos móviles, en los puntos de ruptura más pequeños no se aplica la altura máxima. La altura puede ser el 100% de la pantalla o mantener la altura definida por el contenido mientras se adhiere a la parte inferior de la pantalla del móvil.

Título como mensaje

Para mensajes cortos y directos, el título puede incluir todo el mensaje para agregar claridad visual a un título y un mensaje de cuerpo que de otro modo serían repetitivos. Al utilizar este estilo, no se puede incluir ningún otro cuerpo.

Comportamientos

Desencadenar

Los modales se activan como resultado de la acción de un usuario y no son generados por el sistema. Los componentes comunes que pueden activar una inclusión modal, un botón, un enlace o un icono. En un teclado, seleccionando Entero Spacedebería iniciar el modal.

Atención

Una vez que el modal esté abierto, establezca el enfoque inicial en la primera ubicación que acepte la entrada del usuario. Por ejemplo, si el modal contiene un formulario, el foco debe establecerse automáticamente en el primer campo cuando se abre. Si es un modal transaccional sin entradas de formulario en la sección del cuerpo, entonces el primer enfoque debe estar en el botón principal.

El foco debe permanecer atrapado en el cuadro de diálogo hasta que se cierre. Al navegar por el teclado, Taby Shift-Tabno mueva el exterior foco de la modal.

Cargando

La acción de finalización de la tarea debe realizarse de inmediato. Si se necesita un período de carga más largo, entonces debería aparecer una ruleta de carga y una superposición en la parte superior del área del cuerpo modal con el contenido desactivado. El botón de acción principal debe desactivarse mientras se realiza la carga.

Si se necesita un período de carga rápido, utilice un comportamiento de carga en línea en el botón principal para indicar que los datos se están procesando.

Extra pequeña

Pequeña

Defecto

Grande

Validación

Valide las entradas de un usuario antes de que se cierre el modal. Si alguna entrada no es válida, el modal debe permanecer abierto con la entrada marcada en un estado de error e incluir un mensaje de error en línea. El mensaje debe informar al usuario lo que ha sucedido y brindar orientación sobre los próximos pasos o posibles soluciones. Los mensajes de error efectivos e inmediatos pueden ayudar al usuario a comprender el problema y cómo solucionarlo.

Cuando sea posible, recomendamos validar los datos del usuario antes de enviarlos. Este tipo de validación en línea (también conocida como validación del lado del cliente) debería ocurrir tan pronto como el campo pierda el foco. Esto ayudará a identificar fácilmente los elementos que deben corregirse. Los mensajes de error en el campo deberían desaparecer cuando se cumplen los criterios del formulario. Si los datos no se pudieron enviar debido a problemas del lado del servidor, debería aparecer una notificación en línea.

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.