Probablemente hayas estado allí antes. ¿Cómo elegimos? modo de visualización Para el usuario, ¿cuándo lo llevamos a una nueva página separada? ¿Importa?
De hecho, lo es. Esta decisión afecta el flujo del usuario, su contexto, su capacidad para encontrar información detallada y, en consecuencia, Frecuencia de errores y finalización de tareas.. Ambas opciones pueden resultar perjudiciales y frustrantes en el lugar equivocado y en el momento equivocado.
Así que será mejor que hagamos las cosas. Bueno, veamos cómo hacer esto.
Modal, diálogo, superposición, caja de luz.
Si bien a menudo hablamos de elementos de interfaz de usuario unimodal, a menudo pasamos por alto los matices sutiles y complejos entre los diferentes tipos de modalidades. De hecho, No todas las modalidades son iguales. Modales, cuadros de diálogo, superposiciones y cajas de luz: todos suenan similares, pero en realidad son bastante diferentes:
- diálogo
Término genérico para “conversación” (usuario ↔ sistema). - cubrir
Un pequeño panel de contenido que aparece en la parte superior de la página. - modal
El usuario debe interactuar con la superposición + fondo. personas discapacitadas. - no modal
El usuario debe interactuar con la superposición + fondo. Activado. - caja de luz
El fondo se oscurece para centrar la atención en el modal.
Protagonizada por Anna Kelly Reflejosla 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 del usuario. ellos son De naturaleza disruptivay normalmente de mayor gravedad, pero sin necesidad intensa.
debe ser el usuario debe se verán frenados e interrumpidos si las consecuencias de sus acciones son significativas, pero en su mayor parte Los verbos no modales son más sutiles. y una opción más amigable para captar la atención del usuario. Si hay uno siempre lo recomiendo es por defecto.
Modal → para una tarea única e independiente
Como diseñadores, a menudo pensamos que los modales son irrelevantes y molestos. ¡Este suele ser el caso! – pero también tienen valor. son muy útiles Advertir a los usuarios sobre posibles errores O ayúdelos 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. preservar el contexto de la pantalla actual. Significa no solo la interfaz de usuario, sino también editar la entrada, la posición de desplazamiento, el estado del acordeón, la selección de filtros, la clasificación, etc.
A veces, los usuarios necesitan Confirma rápidamente tu selección (por ejemplo, el filtro que se muestra arriba) y luego continúe inmediatamente desde allí. Por supuesto, el guardado automático puede tener el mismo propósito, pero no siempre es necesario o deseado. Por lo general, bloquear la interfaz de usuario no es una buena idea.
Sin embargo, las cajas modales no se utilizan para ninguna tarea. Generalmente los usamos para tarea única e independiente Se supone que el usuario debe intervenir, completar la tarea y luego regresar al punto de partida. No es sorprendente que funcionen bien para interacciones de alta prioridad y de corta duración (por ejemplo, alertas, acciones disruptivas, confirmaciones rápidas).
Cuando los verbos modales ayudan:
🚫 Los verbos modales suelen ser disruptivos, intrusivos y confusos.
🚫 Dificultan comparar y copiar y pegar.
✅ Sin embargo, los modales permiten a los usuarios mantener múltiples contextos.
✅ Ayuda a prevenir errores irreversibles y pérdida de datos.
✅ Útil si enviar usuarios a una nueva página fuera perjudicial.
✅ Mostrar el modo sólo si el usuario presta atención a esta interferencia.
✅ Prefiere diálogos sin bloqueo (“no modales”) de forma predeterminada.
✅ Permite a los usuarios minimizar, ocultar o restaurar el cuadro de diálogo más tarde.
✅ Utilice patrones para ralentizar a los usuarios, como validar entradas complejas.
✅ Utilice Cerrar, tecla ESC o haga clic fuera del cuadro para dar una salida.
Página → Ideal para flujos de trabajo complejos de varios pasos
mago o Navegación con pestañas en modal Incluso en productos empresariales complejos, los paneles laterales o los cajones suelen funcionar mejor. El problema comienza cuando los usuarios necesitan comparar o hacer referencia a puntos de datos, pero el modo impide este comportamiento, por lo que vuelven a abrir la misma página en varias pestañas.
Para procesos más complejos y procesos de varios pasos, Las páginas independientes funcionan mejor. Las páginas también funcionan mejor cuando requieren toda la atención del usuario y consultar la pantalla anterior no sirve de mucha ayuda. Los cajones son adecuados para subtareas que son demasiado complejas para el modo simple, pero que no requieren navegación de página completa.
Cuándo evitar los verbos modales:
🚫 Evite el uso de verbos modales mensaje de error.
🚫 Evite el uso de verbos modales Notificación de funciones.
🚫 Evite el uso de verbos modales Experiencia de incorporación.
🚫 Evite el uso de modales complejos, tareas largas de varios pasos.
🚫 evitar Múltiples modales anidados y use anterior/siguiente en su lugar.
🚫 evitar Activar modal automáticamente A menos que sea absolutamente necesario.
Para tareas repetitivas, evite ambos.
En muchos productos complejos y con muchas tareas, los usuarios se encuentran realizando las mismas tareas una y otra vez. Allá, Las modalidades y la navegación por nuevas páginas aumentan la fricción Porque interrumpen el flujo o obligan al usuario a recopilar datos que se pierden entre las diferentes pestañas o vistas.
Con demasiada frecuencia, los usuarios terminan con una experiencia interrumpida llena de confirmaciones interminables, advertencias exageradas, instrucciones extensas o simplemente falta de puntos de referencia. como Saulio Steblis mencionóen estos escenarios, Parte ampliable o Editar en el lugar Por lo general, funciona mejor: mantienen la tarea fija en la pantalla actual.
De hecho, en muchos escenarios, los usuarios no completan tareas de forma aislada. Necesitan encontrar información, copiar y pegar valores, refinar entradas en diferentes ubicaciones o simplemente ver registros similares a medida que completan tareas.
Las superposiciones y los cajones son más útiles para mantener el acceso a los datos de fondo durante una tarea. Por lo tanto, el contexto siempre permanece en su lugar, disponible para referencia o copiar y pegar. Guarde las modalidades y la navegación de páginas para los momentos en que las interrupciones realmente agreguen valor, especialmente para evitar errores críticos.
Modales y páginas: árboles de decisión
No hace mucho, Ryan Neufeld elaboró un guía muy útil Ayuda a los diseñadores Elige entre modos y páginas.. Viene con un conveniente nota PNG y un plantilla de documentos de google Las preguntas se dividen en 7 partes.
Es largo y muy completo, pero fácil de seguir:
Puede parecer desalentador, pero es muy simple. proceso de 4 pasos:
- contexto de pantalla.
Primero, verificamos si el usuario necesita mantener el contexto de la pantalla subyacente. - Complejidad y duración de la tarea..
Las tareas más simples, más enfocadas y que no distraen pueden usar patrones, pero los procesos largos y complejos requieren páginas. - Consulte la página subyacente..
Luego comprobamos si el usuario necesita consultar datos en segundo plano con frecuencia o si la tarea es una simple confirmación o selección. - Elige la cobertura adecuada.
Finalmente, si la superposición es realmente una buena opción, nos guía a elegir entre modal o no modal (favoreciendo lo no modal).
Resumir
Evite bloquear toda la interfaz de usuario si es posible. Hay un cuadro de diálogo flotante que cubre parcialmente la interfaz de usuario pero permite navegar, desplazarse y copiar y pegar. O muestre el contenido del modal como un cajón lateral. O utilice un acordeón vertical en su lugar. O, si necesita mostrar mucha información detallada, lleve al usuario a una página separada.
Pero si desea mejorar la eficiencia y la velocidad del usuario, Evita los verbos modales a toda costa. Úsalos para ralentizar a los usuarios, centrar su atención y evitar errores. como Teresa Fessenden señalóA nadie le gusta que lo molesten, pero si debe hacerlo, asegúrese de que definitivamente valga la pena.
Comprender el “patrón de diseño de interfaz inteligente”
puedes encontrar uno Toda la sección sobre verbos modales. y alternativas Patrón de diseño de interfaz inteligentenuestro Curso en vídeo de 15 horas. Contiene cientos de ejemplos prácticos de proyectos de la vida real, y más adelante este año se lanzará capacitación sobre experiencias de usuario en vivo. Todo, desde grandes listas desplegables hasta complejas tablas empresariales, con 5 nuevos segmentos agregados cada año. Saltar a vista previa gratuita. Usar código Pajarito llegar Ahorra 15% dejar.
Recursos útiles
(yk)
