Probablemente hayas estado allí antes. ¿Cómo elegimos entre mostrar un modal a los usuarios y cuándo los navegamos a una página nueva e independiente? ¿Y eso importa en absoluto? En realidad, así es. La decisión influye en el flujo de los usuarios, su contexto, su capacidad para buscar detalles y, con ello, la frecuencia de errores y la finalización de tareas. Ambas opciones pueden resultar perturbadoras y frustrantes: en el momento y el lugar equivocados. Así que será mejor que lo hagamos bien. Bueno, veamos cómo hacer precisamente eso. Modales vs. Diálogos vs. Superposiciones vs. Lightboxes Si bien a menudo hablamos de un único componente modal de la interfaz de usuario, a menudo ignoramos los matices finos e intrincados entre los diferentes tipos de modales. De hecho, no todos los modales son iguales. Modales, cuadros de diálogo, superposiciones y cajas de luz: todos suenan similares, pero en realidad son bastante diferentes:
DialogUn término genérico para “conversación” (usuario ↔ sistema). SuperposiciónUn pequeño panel de contenido que se muestra en la parte superior de una página. ModalUser debe interactuar con la superposición + fondo deshabilitado. El usuario no modal debe interactuar con la superposición + fondo habilitado. Fondo LightboxDimmed para centrar la atención en el modal.
Como destaca Anna Kaley, la mayoría de las superposiciones aparecen en el momento equivocado, interrumpen a los usuarios durante tareas críticas, utilizan un lenguaje deficiente e interrumpen el flujo de los usuarios. Son disruptivos por naturaleza y, por lo general, con un alto nivel de gravedad sin una gran necesidad de ello.
Seguramente los usuarios deben ser ralentizados e interrumpidos si las consecuencias de su acción tienen un gran impacto, pero en la mayoría de los escenarios los no modales son una opción mucho más sutil y más amigable para llamar la atención del usuario sobre algo. En todo caso, siempre sugiero que sea un valor predeterminado. Modales → Para tareas individuales y autónomas Como diseñadores, a menudo descartamos los modales como irrelevantes y molestos, ¡y a menudo lo son! – sin embargo, también tienen su valor. Pueden resultar muy útiles para advertir a los usuarios sobre posibles errores o ayudarles a evitar la pérdida de datos. También pueden ayudar a realizar acciones relacionadas o profundizar en detalles sin interrumpir el estado actual de la página. Pero la mayor ventaja de los modales es que ayudan a los usuarios a mantener el contexto de la pantalla actual. No se refiere sólo a la interfaz de usuario, sino también a la entrada editada, la posición de desplazamiento, el estado de los acordeones, la selección de filtros, la clasificación, etc.
En ocasiones, los usuarios necesitan confirmar una selección rápidamente (por ejemplo, filtros como se muestra arriba) y luego proceder inmediatamente desde allí. El guardado automático puede lograr lo mismo, por supuesto, pero no siempre es necesario o deseado. Y bloquear la interfaz de usuario no suele ser una buena idea. Sin embargo, los modales no se utilizan para ninguna tarea. Por lo general, los usamos para tareas únicas e independientes en las que los usuarios deben intervenir, completar una tarea y luego regresar a donde estaban. Como era de esperar, funcionan bien para interacciones breves y de alta prioridad (por ejemplo, alertas, acciones destructivas, confirmaciones rápidas). Cuando los modales ayudan: 🚫 Los modales suelen ser disruptivos, invasivos y confusos.🚫 Hacen que sea difícil comparar y copiar y pegar. ✅ Sin embargo, los modales permiten a los usuarios mantener múltiples contextos. ✅ Útil para evitar errores irreversibles y pérdida de datos. ✅ Útil si enviar a los usuarios a una nueva página sería perjudicial. ✅ Muestre un modal solo si los usuarios valorarán la interrupción. ✅ De forma predeterminada, prefiera cuadros de diálogo sin bloqueo ("no modales"). Páginas → Para flujos de trabajo complejos de varios pasos Los asistentes o la navegación con pestañas dentro de los modales no funcionan muy bien, incluso en productos empresariales complejos; allí, los paneles laterales o los cajones suelen funcionar mejor. Los problemas comienzan cuando los usuarios necesitan comparar o hacer referencia a puntos de datos; sin embargo, los modales bloquean este comportamiento, por lo que vuelven a abrir la misma página en varias pestañas.
Para flujos más complejos y procesos de varios pasos, las páginas independientes funcionan mejor. Las páginas también funcionan mejor cuando exigen toda la atención del usuario y la referencia a la pantalla anterior no es muy útil. Y los cajones funcionan para subtareas que son demasiado complejas para un modal simple, pero que no necesitan una navegación de página completa. Cuándo evitar los modales: 🚫 Evite los modales para mensajes de error.🚫 Evite los modales para notificaciones de funciones.🚫 Evite los modales para la experiencia de incorporación.🚫 Evite los modales para tareas complejas y largas de varios pasos.🚫 Evite múltiples modales anidados y use prev/next en su lugar.🚫 Evite los modales activados automáticamente a menos que sea absolutamente necesario. Evite ambosPara tareas repetidas En muchos productos complejos y con muchas tareas, los usuarios se encontrarán realizando las mismas tareas repetidamente, una y otra vez. Allí, tanto las navegaciones modales como las de nuevas páginas añaden fricción porque interrumpen el flujo o obligan a los usuarios a recopilar datos faltantes entre las diferentes pestañas o vistas. Con demasiada frecuencia, los usuarios terminan con una experiencia rota, llena de confirmaciones interminables, advertencias exageradas, instrucciones detalladas o simplemente faltan puntos de referencia. Como mencionó Saulius Stebulis, en estos escenarios, las secciones expandibles o la edición in situ a menudo funcionan mejor: mantienen la tarea anclada en la pantalla actual. En la práctica, en muchos escenarios, los usuarios no completan sus tareas de forma aislada. Necesitan buscar datos, copiar y pegar valores, refinar entradas en diferentes lugares o simplemente revisar registros similares mientras realizan sus tareas. Las superposiciones y los cajones son más útiles para mantener el acceso a los datos de fondo durante la tarea. Como resultado, el contexto siempre permanece en su lugar, disponible para referencia o copiar y pegar. Guarde los modales y la navegación de páginas para momentos en los que la interrupción realmente agregue valor, especialmente para evitar errores críticos. Modales versus páginas: un árbol de decisiones Hace un tiempo, Ryan Neufeld elaboró una guía muy útil para ayudar a los diseñadores a elegir entre modales y páginas. Viene con una práctica hoja de referencia PNG y una plantilla de Google Doc con preguntas divididas en 7 secciones. Es extenso, extremadamente completo, pero muy fácil de seguir:
Puede parecer desalentador, pero es un proceso bastante simple de 4 pasos:
Contexto de la pantalla. Primero, verificamos si los usuarios necesitan mantener el contexto de la pantalla subyacente. Complejidad y duración de la tarea. Las tareas más simples, enfocadas y que no distraigan podrían usar un modal, pero los flujos largos y complejos necesitan una página. Referencia a la página subyacente. Luego, verificamos si los usuarios a menudo necesitan consultar datos en segundo plano o si la tarea es una simple confirmación o selección. Elegir la superposición adecuada. Finalmente, si una superposición es realmente una buena opción, nos guía para elegir entre modal o no modal (inclinándose hacia un no modal).
Concluyendo Siempre que sea posible, evite bloquear toda la interfaz de usuario. Tener un cuadro de diálogo flotante que cubra parcialmente la interfaz de usuario, pero que permita la navegación, el desplazamiento y copiar y pegar. O mostrar el contenido del modal como cajón lateral. O utilice un acordeón vertical en su lugar. O lleve a los usuarios a una página separada si necesita mostrar muchos detalles. Pero si desea aumentar la eficiencia y la velocidad de los usuarios, evite los modales a toda costa. Úsalos para ralentizar a los usuarios, concentrar su atención y evitar errores. Como señaló Therese Fessenden, a nadie le gusta que lo interrumpan, pero si es necesario, asegúrese de que valga la pena el costo. Conozca los "patrones de diseño de interfaces inteligentes" Puede encontrar una sección completa sobre modales y alternativas en Patrones de diseño de interfaz inteligente, nuestro curso en video de 15 horas con cientos de ejemplos prácticos de proyectos de la vida real, con una capacitación de UX en vivo a finales de este año. Todo, desde mega menús desplegables hasta tablas empresariales complejas, con 5 nuevos segmentos agregados cada año. Salta a una vista previa gratuita. Utilice el código BIRDIE para ahorrar un 15 % de descuento. Conozca los patrones de diseño de interfaces inteligentes, nuestro curso en video sobre diseño de interfaces y UX.
Video + Capacitación UXSolo videoVideo + Capacitación UX$ 495.00 $ 699.00
Obtenga video + capacitación UX25 lecciones en video (15 h) + capacitación UX en vivo.Garantía de devolución de dinero de 100 días.Solo video$ 300,00$ 395,00
Consigue el vídeo curso 40 lecciones en vídeo (15h). Actualizado anualmente. También disponible como paquete UX con 2 cursos en video.
Recursos útiles
Diferentes tipos de ventanas emergentes, por Anna Kaley Mejores prácticas para diseñar modos de interfaz de usuario, por Uxcel Usamos demasiados malditos modales: pautas de UX, por Adrian Egger Diálogos modales y no modales, de Therese Fessenden Diseño de interfaz de usuario empresarial moderno: diálogos modales, por James Jacobs Modales en sistemas de diseño
