Probablemente xa estiveches alí antes. Como eliximos entre mostrar un modal aos usuarios e cando os navegamos a unha páxina nova e separada? E importa nada? En realidade, si. A decisión inflúe no fluxo dos usuarios, no seu contexto, na súa capacidade para buscar detalles e, con ela, na frecuencia de erros e na realización da tarefa. Ambas opcións poden ser perturbadoras e frustrantes, no momento e no lugar equivocados. Así que é mellor que acertemos. Ben, imos ver como facelo. Modais vs. Diálogos vs. Superposicións vs. Lightboxes Aínda que a miúdo falamos dun único compoñente de IU modal, moitas veces ignoramos os matices finos e intrincados entre todos os diferentes tipos de modais. De feito, non todos os modais son iguais. Modais, diálogos, superposicións e caixas de luz: todos soan similares, pero en realidade son moi diferentes:
DiálogoUn termo xenérico para "conversación" (usuario ↔ sistema). SuperposiciónUn pequeno panel de contido que se mostra na parte superior dunha páxina. ModalUser debe interactuar coa superposición + fondo desactivada. NonmodalUser debe interactuar coa superposición + fondo habilitadas. Lightbox Fondo atenuado para centrar a atención no modal.
Como destaca Anna Kaley, a maioría das superposicións aparecen no momento incorrecto, interrompen os usuarios durante as tarefas críticas, usan unha linguaxe deficiente e interrompen o fluxo dos usuarios. Son interruptivos por natureza, e normalmente con un alto nivel de gravidade sen unha forte necesidade diso.
Seguramente os usuarios deben ser ralentizados e interrompidos se as consecuencias da súa acción teñen un alto impacto, pero para a maioría dos escenarios os non modais son moito máis sutís e unha opción máis amigable para chamar a atención do usuario. En todo caso, sempre suxiro que sexa por defecto. Modais → Para tarefas únicas e autónomas Como deseñadores, moitas veces descartamos os modais como irrelevantes e molestos, e moitas veces o son! - aínda que tamén teñen o seu valor. Poden ser moi útiles para advertir aos usuarios sobre posibles erros ou axudalos a evitar a perda de datos. Tamén poden axudar a realizar accións relacionadas ou a afondar nos detalles sen interromper o estado actual da páxina. Pero a maior vantaxe dos modais é que axudan aos usuarios a manter o contexto da pantalla actual. Non significa só a IU, senón tamén a entrada editada, a posición de desprazamento, o estado dos acordeóns, a selección de filtros, a clasificación, etc.
Ás veces, os usuarios necesitan confirmar unha selección rapidamente (por exemplo, filtros como se mostra arriba) e, a continuación, proceder inmediatamente desde alí. O gardado automático pode conseguir o mesmo, por suposto, pero non sempre é necesario nin desexado. E bloquear a IU moitas veces non é unha boa idea. Non obstante, os modais non se usan para ningunha tarefa. Normalmente, usámolos para tarefas únicas e autónomas nas que os usuarios deben entrar, completar unha tarefa e, a continuación, volver a onde estaban. Como era de esperar, funcionan ben para interaccións curtas e de alta prioridade (por exemplo, alertas, accións destrutivas, confirmacións rápidas). Cando os modais axudan: 🚫 Os modais adoitan ser perturbadores, invasivos e confusos.🚫 Dificultan a súa comparación e copia e pega. ✅ Con todo, os modais permiten que os usuarios manteñan varios contextos.✅ Útiles para evitar erros irreversibles e perda de datos.✅ Útil se enviar usuarios a unha nova páxina resultaría perturbador. ✅ Mostrar un modal só se os usuarios valoran a interrupción. ✅ De forma predeterminada, prefire diálogos non bloqueantes ("non modais"). ✅ Permitir aos usuarios minimizar, ocultar ou restaurar o diálogo máis tarde. ✅ Use un modal para ralentizar os usuarios, por exemplo, verificar entradas complexas. ✅ Deixa unha saída con "Pechar", a tecla ESC ou fai clic fóra da caixa. Páxinas → Para fluxos de traballo complexos de varios pasos Os asistentes ou a navegación por pestanas dentro dos modais non funcionan demasiado ben, mesmo en produtos empresariais complexos; alí, os paneis laterais ou os caixóns normalmente funcionan mellor. Os problemas comezan cando os usuarios necesitan comparar ou referenciar puntos de datos; aínda que os modais bloquean este comportamento, polo que volven abrir a mesma páxina en varias pestanas.
Para fluxos máis complexos e procesos de varios pasos, as páxinas autónomas funcionan mellor. As páxinas tamén funcionan mellor cando esixen toda a atención do usuario e a referencia á pantalla anterior non é moi útil. E os caixóns funcionan para subtarefas que son demasiado complexas para un modal simple, pero que non precisan unha navegación por páxina completa. Cando evitar os modais: 🚫 Evite os modais para as mensaxes de erro.🚫 Evite os modais para as notificacións de funcións.🚫 Evite os modais para a experiencia de incorporación.🚫 Evite os modais para tarefas complexas e longas de varios pasos.🚫 Evite varios modais anidados e use prev/next no seu lugar. Evita AmbosPara tarefas repetidas En moitos produtos complexos e con tarefas pesadas, os usuarios atoparanse realizando as mesmas tarefas repetidamente, unha e outra vez. Alí, tanto as navegacións modais como as novas páxinas engaden fricción porque interrompen o fluxo ou obrigan aos usuarios a reunir os datos que faltan entre todas as diferentes pestanas ou vistas. Con demasiada frecuencia, os usuarios acaban cunha experiencia rota, chea de confirmacións interminables, avisos esaxerados, instrucións detalladas ou só puntos de referencia que faltan. Como mencionou Saulius Stebulis, nestes escenarios, as seccións ampliables ou a edición no lugar adoitan funcionar mellor: manteñen a tarefa ancorada na pantalla actual. Na práctica, en moitos escenarios, os usuarios non completan as súas tarefas de forma illada. Necesitan buscar datos, copiar e pegar valores, refinar as entradas en diferentes lugares ou simplemente revisar rexistros similares mentres realizan as súas tarefas. As superposicións e os caixóns son máis útiles para manter o acceso aos datos en segundo plano durante a tarefa. Como resultado, o contexto permanece sempre no seu lugar, dispoñible para referencia ou copiar e pegar. Garda os modais e a navegación da páxina para os momentos nos que a interrupción realmente engade valor, especialmente para evitar erros críticos. Modais vs páxinas: unha árbore de decisións Hai un tempo, Ryan Neufeld elaborou unha guía moi útil para axudar aos deseñadores a escoller entre modais e páxinas. Vén cunha útil folla de trucos PNG e un modelo de Google Doc con preguntas divididas en 7 seccións. É longo, moi completo, pero moi fácil de seguir:
Pode parecer desalentador, pero é un proceso bastante sinxelo de catro pasos:
Contexto da pantalla. En primeiro lugar, comprobamos se os usuarios precisan manter o contexto da pantalla subxacente. Complexidade e duración das tarefas. As tarefas máis sinxelas, centradas e que non distraen poden usar un modal, pero os fluxos longos e complexos precisan dunha páxina. Referencia á páxina subxacente. Despois, comprobamos se os usuarios adoitan facer referencia a datos en segundo plano ou se a tarefa é unha simple confirmación ou selección. Elixir a superposición correcta. Finalmente, se unha superposición é realmente unha boa opción, guíanos a escoller entre modal ou non modal (inclinándose por un non modal).
Concluíndo Sempre que sexa posible, evite bloquear toda a IU. Ten un diálogo flotante que cobre parcialmente a IU, pero permite navegar, desprazarse e copiar e pegar. Ou mostrar o contido do modal como un caixón lateral. Ou use un acordeón vertical no seu lugar. Ou leva aos usuarios a unha páxina separada se precisas mostrar moitos detalles. Pero se queres aumentar a eficiencia e a velocidade dos usuarios, evita os modais a toda costa. Utilízaos para ralentizar os usuarios, para agrupar a súa atención e evitar erros. Como observou Therese Fessenden, a ninguén lle gusta que o interrompan, pero se é necesario, asegúrate de que paga a pena o custo. Coñece os "Padróns de deseño de interfaces intelixentes" Podes atopar toda unha sección sobre modais e alternativas en Smart Interface Design Patterns, o noso curso de vídeo de 15 horas con centos de exemplos prácticos de proxectos da vida real, cun adestramento de UX en directo a finais deste ano. Todo, desde megamenús desplegables ata táboas empresariais complexas, con 5 novos segmentos engadidos cada ano. Ir a unha vista previa gratuíta. Usa o código BIRDIE para aforrar un 15 % de desconto. Coñece Smart Interface Design Patterns, o noso curso de vídeo sobre deseño de interfaces e UX.
Adestramento de vídeo + UX Só Vídeo + Adestramento de UX 495,00 $ 699,00 $
Obtén vídeo + UX Training25 clases de vídeo (15 h) + Live UX Training. 100 días de garantía de devolución do diñeiro. Só vídeo 300,00 $ 395,00 $
Obtén o curso de vídeo40 leccións de vídeo (15h). Actualizado anualmente. Tamén dispoñible como paquete UX con 2 cursos de vídeo.
Recursos útiles
Diferentes tipos de ventás emerxentes, de Anna Kaley Boas prácticas para o deseño de modais de IU, de Uxcel We Use Too Many Damn Modals: UX Guidelines, de Adrian Egger Diálogos modais e non modais, de Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, de James Jacobs Modais en Sistemas de Deseño
