Modal

Tipos de modales

Estos modales comunican información importante que las personas usuarias deben reconocer. Poseen un único botón principal que debe estar ubicado del lado derecho del componente.

Los modales de reconocimiento pueden ser descartados haciendo clic en la acción principal, presionando la tecla ESC en el teclado o mismo haciendo clic por fuera del modal.

Son utilizados para validar las decisiones de las personas usuarias. Este tipo de modal requiere que se realice una acción para que el mismo se complete y se cierre. Posee botones de cancelación y de acción principal. El botón secundario se debe ubicar a la izquierda y el botón principal a la derecha.

Los modales de confirmación son persistentes hasta que se descartan haciendo clic en la acción principal, en el botón secundario, presionando la tecla ESC en el teclado o mismo haciendo clic por fuera del modal.

Son utilizados cuando una persona usuaria necesita confirmar una decisión que afectará su experiencia de manera negativa o irreversible. En este modal el botón principal se reemplaza por un botón de peligro y se descarta de la misma forma que los modales de confirmación.

Diseño y estructura (contexto de uso)

Título como único mensaje

El título del modal puede incluír el mensaje completo para asegurar la claridad visual del componente y que la descripción no comunique información repetitiva. Incluso puede cotener una volanta para anteceder el título.

Estado focus

Cuando un modal se abre, el foco inicial debe estar en la primera ubicación que acepte la entrada de información de una persona usuaria. Por ejemplo, si el modal contiene un formulario, el enfoque debe establecerse automáticamente en el primer campo.

Sin embargo, el uso de formularios dentro de los modales es opcional. Si se trata de un modal que no posee campos, el foco debe estar en el botón principal y permanecer en el cuadro de diálogo hasta que la persona usuaria lo cierre.

Usabilidad

Buenas prácticas

Utilizar los modales para confirmar acciones o completar tareas que requieran toda la atención de la persona usuaria.

Usar los modales con moderación ya que interrumpen el flujo de trabajo hasta que se seleccione una acción.

Mostrar los modales como resultado de la acción de una persona usuaria. Por ejemplo, tocar un botón, un enlace o un ícono.

Usar títulos simples que comuniquen claramente el efecto principal de la acción que esté a punto de realizar una persona. Lo ideal es que los títulos usen la misma frase o una similar a la llamada a la acción que llevó a alguien al cuadro de diálogo en primer lugar.

Mantener una coherencia textual entre el título del modal y las opciones para los próximos pasos. Por ejemplo, si el título de un cuadro de diálogo es "Eliminar conversación", la etiqueta del botón de la acción principal sería "Eliminar".

Malas prácticas

No sorprender a la persona usuaria, no mostrar un modal automáticamente si no realizó ninguna acción previa.

Evitar hacer preguntas como "¿Estás seguro de que deseas salir?" o "¿Querés cancelar?". Son redundantes en la decisión que ya tomó la persona al realizar una acción previa. Esta frase también establece un conjunto de acciones de sí/no, lo que puede volverse confuso. En su lugar, reformule el mensaje para centrarlo en el resultado o efecto.

Evitar el contenido largo que requiera desplazamiento. El contenido extenso puede ser problemático porque empuja los botones fuera de la vista inicial del usuario, lo que puede causar confusión.

No mostrar más de un modal a la vez. Si la situación requiere una secuencia de decisiones, considere utilizar un diseño diferente.