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.

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.

Image Removed

Modal pasivo

Los modales pasivos presentan información que el usuario debe conocer acerca de su flujo de trabajo actual. No contiene acciones que el usuario pueda realizar y no debe incluir ningún dato que deba enviarse. Sirven como un tipo de notificación que alerta al usuario sobre información urgente, como informar errores del sistema o transmitir una consecuencia de la acción de un usuario.

Descartar un modal pasivo

Los modales pasivos son persistentes hasta que se descartan de una de las siguientes formas.

• 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

Modal de Peligro

El modal de peligro es un tipo específico de modal transaccional que se utiliza para acciones destructivas o irreversibles. En modal de peligro, el botón principal es reemplazado por un botón de peligro. Se utilizan comúnmente en momentos de alto impacto como confirmación de una acción que podría resultar en una pérdida significativa de datos si se realizara accidentalmente.

Modal de reconocimiento

Los modales de reconocimiento se utilizan cuando el sistema requiere que el usuario reconozca la información presentada. Contiene solo un botón, comúnmente "Aceptar". El reconocimiento se confirma cuando el usuario hace clic en el botón principal.

Descartar un modal de reconocimiento

Los modales de reconocimiento son persistentes hasta que se descartan de una de las siguientes formas.

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

• x : Al hacer clic en el xicono de cierre en la parte superior derecha, se cerrará el modal sin enviar el reconocimiento del usuario y el usuario regresará al contexto anterior.

• Esc : presione ESCen el teclado.

Botón único

Los botones individuales se colocan en el lado derecho, abarcan el 50% del modal y sangran hasta el borde. En la mayoría de los escenarios, se utiliza un botón principal cuando se necesita un botón.

Modal transaccional

Los modales transaccionales se utilizan para validar las decisiones del usuario o para obtener una confirmación secundaria del usuario. Los modales transaccionales requieren que se lleve a cabo una acción para que el modal se complete y cierre. Contiene botones de acción primaria y cancelar.

Descartar un modal transaccional

Los modales transaccionales son persistentes hasta que se descartan de una de las siguientes formas.

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

Dos botones

Cuando se utilizan dos botones, el botón secundario se encuentra a la izquierda y el botón principal se coloca a la derecha. Cada botón abarca el 50% del cuadro de diálogo y tiene sangrado completo hasta el borde.

Tres botones

En el raro caso de que se necesiten tres botones, cada uno tiene el 25% del ancho del diálogo y está alineado con el lado derecho del modal. Solo el botón más a la derecha puede ser un botón principal y los otros dos son botones secundarios. Si las tres acciones tienen el mismo peso, las tres deberían ser botones secundarios.

Modal de progreso

Para tareas más largas, use un modo de progreso para darle al usuario una sensación de finalización y orientación dentro del flujo enfocado. Para flujos complejos con opciones complejas, considere usar una página completa en lugar de una modal. Un modal de progreso no es una solución para el exceso de contenido modal. Solo debe usarse para presentar información en partes más consumibles y enfocadas.

Descartar un modal de progreso

Los modales transaccionales son persistentes hasta que se descartan de una de las siguientes formas.

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

• Botón Cancelar : Al hacer clic en el botón Cancelar, se cerrará el modal y el usuario regresará 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.

Grupo de botones

Hay tres botones en el pie de página modal de progreso: Cancelar, Anterior, Siguiente. El ancho de cada botón es el 25% de la ventana de diálogo y tiene sangrado completo. Anterior y Siguiente se agrupan y se colocan en la mitad derecha del cuadro de diálogo, con Anterior como botón secundario y Siguiente como botón principal. En el último paso de la secuencia, la etiqueta del botón Siguiente debe cambiar para reflejar la acción final. El botón Cancelar está alineado al lado izquierdo del diálogo y usa un botón fantasma.

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

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.

Tamaños por breakpoint

Modal Extra pequeña

Breakpoint

Ancho porcentual

Margen

1584

24%

16px / 1rem

1312

24%

16px / 1rem

1056

32%

16px / 1rem

672

48%

16px / 1rem

320

100%

16px / 1rem

Modal Pequeña

Breakpoint

Ancho porcentual

Margen

1584

36%

20%

1312

36%

20%

1056

42%

16px / 1rem

672

60%

16px / 1rem

320

100%

16px / 1rem

Modal por Defecto

Breakpoint

Ancho porcentual

Margen

1584

48%

20%

1312

48%

20%

1056

60%

20%

672

84%

20%

320

100%

Modal Grande

Breakpoint

Ancho porcentual

Margen

1584

72%

20%

1312

72%

20%

1056

84%

20%

672

96%

20%

320

100%

16px / 1rem

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.

Image Removed

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.

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.

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

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