Segurament hi heu estat abans. Com triem entre mostrar un modal als usuaris i quan els naveguem a una pàgina nova i independent? I té res d'importància? De fet, ho fa. La decisió influeix en el flux dels usuaris, el seu context, la seva capacitat de cercar detalls i, amb això, la freqüència d'errors i la realització de les tasques. Ambdues opcions poden ser pertorbadores i frustrants, en el moment equivocat i en el lloc equivocat. Així que millor que ho encertem. Bé, anem a veure com fer-ho. Modals vs. Diàlegs vs. Superposicions vs. Lightboxes Tot i que sovint parlem d'un únic component de la interfície d'usuari modal, sovint ignorem els matisos fins i complexos entre tots els diferents tipus de modals. De fet, no tots els modals són iguals. Modals, diàlegs, superposicions i caixes de llum, tots sonen semblants, però en realitat són força diferents:
Diàleg Un terme genèric per a "conversa" (usuari ↔ sistema). Superposició Un petit panell de contingut que es mostra a la part superior d'una pàgina. ModalUser ha d'interaccionar amb la superposició + el fons desactivats. L'usuari no modal ha d'interaccionar amb la superposició + el fons activats. Lightbox Fons atenuat per centrar l'atenció en el modal.
Com destaca l'Anna Kaley, la majoria de les superposicions apareixen en el moment equivocat, interrompen els usuaris durant les tasques crítiques, fan servir un llenguatge deficient i trenquen el flux dels usuaris. Són interruptius per naturalesa, i normalment amb un alt nivell de gravetat sense necessitat d'això.
Segurament els usuaris s'han de frenar i interrompre si les conseqüències de la seva acció tenen un gran impacte, però per a la majoria d'escenaris els no modals són molt més subtils i una opció més amigable per atreure alguna cosa a l'atenció de l'usuari. En qualsevol cas, sempre suggereixo que sigui un valor predeterminat. Modals → Per a tasques individuals i autònomes Com a dissenyadors, sovint descartem els modals per irrellevants i molestos, i sovint ho són! — però també tenen el seu valor. Poden ser molt útils per advertir els usuaris sobre possibles errors o ajudar-los a evitar la pèrdua de dades. També poden ajudar a realitzar accions relacionades o aprofundir en detalls sense interrompre l'estat actual de la pàgina. Però el major avantatge dels modals és que ajuden els usuaris a mantenir el context de la pantalla actual. No vol dir només la interfície d'usuari, sinó també l'entrada editada, la posició de desplaçament, l'estat dels acordions, la selecció de filtres, l'ordenació, etc.
De vegades, els usuaris han de confirmar una selecció ràpidament (p. ex., els filtres com es mostra més amunt) i després procedir immediatament des d'allà. L'emmagatzematge automàtic pot aconseguir el mateix, és clar, però no sempre és necessari ni desitjat. I bloquejar la interfície d'usuari sovint no és una bona idea. Tanmateix, els modals no s'utilitzen per a cap tasca. Normalment, els fem servir per a tasques individuals i autònomes on els usuaris haurien d'entrar, completar una tasca i tornar a on estaven. No és sorprenent que funcionen bé per a interaccions curtes i d'alta prioritat (p. ex., alertes, accions destructives, confirmacions ràpides). Quan els modals ajuden: 🚫 Els modals solen ser pertorbadors, invasius i confusos.🚫 Dificulten la comparació i el copiar-enganxar.✅ Tot i així, els modals permeten als usuaris mantenir múltiples contextos.✅ Útil per evitar errors irreversibles i la pèrdua de dades.✅ Útil si enviar usuaris a una pàgina nova seria pertorbador. ✅ Mostra un modal només si els usuaris valoraran la interrupció. ✅ De manera predeterminada, preferiu els diàlegs que no bloquegen ("no modals"). ✅ Permet als usuaris minimitzar, amagar o restaurar el diàleg més tard. Pàgines → Per a fluxos de treball complexos i de diversos passos Els assistents o la navegació per pestanyes dins de modalitats no funcionen massa bé, fins i tot en productes empresarials complexos; allà, els panells laterals o els calaixos solen funcionar millor. Els problemes comencen quan els usuaris necessiten comparar o fer referència a punts de dades, però els modals bloquegen aquest comportament, de manera que tornen a obrir la mateixa pàgina en diverses pestanyes.
Per a fluxos més complexos i processos de diversos passos, les pàgines autònomes funcionen millor. Les pàgines també funcionen millor quan demanen tota l'atenció de l'usuari i la referència a la pantalla anterior no és molt útil. I els calaixos funcionen per a subtasques massa complexes per a un modal senzill, però que no necessiten una navegació per pàgina completa. Quan evitar els modals: 🚫 Eviteu els modals per als missatges d'error.🚫 Eviteu els modals per a les notificacions de funcions.🚫 Eviteu els modals per a l'experiència d'incorporació.🚫 Eviteu els modals per a tasques complexes i llargues de diversos passos.🚫 Eviteu múltiples modals imbricats i utilitzeu prev/next. Eviteu tots dosPer a tasques repetides En molts productes complexos i amb tasques pesades, els usuaris es trobaran fent les mateixes tasques repetidament, una i altra vegada. Allà, tant els modals com les noves navegacions de pàgines afegeixen fricció perquè interrompen el flux o obliguen els usuaris a recopilar dades que falten entre totes les diferents pestanyes o vistes. Massa sovint, els usuaris acaben amb una experiència trencada, plena de confirmacions interminables, advertències exagerades, instruccions detallades o simplement punts de referència que falten. Com va esmentar Saulius Stebulis, en aquests escenaris, les seccions ampliables o l'edició in situ sovint funcionen millor: mantenen la tasca ancorada a la pantalla actual. A la pràctica, en molts escenaris, els usuaris no completen les seves tasques de manera aïllada. Han de buscar dades, copiar i enganxar valors, refinar les entrades en diferents llocs o simplement revisar registres similars mentre treballen amb les seves tasques. Les superposicions i els calaixos són més útils per mantenir l'accés a les dades de fons durant la tasca. Com a resultat, el context sempre es manté al seu lloc, disponible per a referència o copiar i enganxar. Estalvieu modalitats i navegació per pàgines per als moments en què la interrupció realment afegeix valor, especialment per evitar errors crítics. Modals vs. pàgines: un arbre de decisions Fa un temps, Ryan Neufeld va elaborar una guia molt útil per ajudar els dissenyadors a triar entre modalitats i pàgines. Ve amb un pràctic full de trucs PNG i una plantilla de Google Doc amb preguntes desglossades en 7 seccions. És llarg, extremadament complet, però molt fàcil de seguir:
Pot semblar descoratjador, però és un procés bastant senzill de 4 passos:
Context de la pantalla. En primer lloc, comprovem si els usuaris necessiten mantenir el context de la pantalla subjacent. Complexitat i durada de la tasca. Les tasques més senzilles, enfocades i que no distreuen podrien utilitzar un modal, però els fluxos llargs i complexos necessiten una pàgina. Referència a la pàgina subjacent. Després, comprovem si els usuaris sovint necessiten fer referència a dades en segon pla o si la tasca és una simple confirmació o selecció. Escollir la superposició adequada. Finalment, si una superposició és realment una bona opció, ens guia a triar entre modal o no modal (inclinant-nos cap a un no modal).
Embolcallant Sempre que sigui possible, eviteu bloquejar tota la interfície d'usuari. Teniu un diàleg flotant, que cobreix parcialment la interfície d'usuari, però permet navegar, desplaçar-vos i copiar i enganxar. O mostra el contingut del modal com un calaix lateral. O utilitzeu un acordió vertical. O porta els usuaris a una pàgina separada si necessites mostrar molts detalls. Però si voleu augmentar l'eficiència i la velocitat dels usuaris, eviteu els modals a tota costa. Utilitzeu-los per frenar els usuaris, per agrupar la seva atenció, per evitar errors. Com va assenyalar Therese Fessenden, a ningú li agrada que l'interrompin, però si cal, assegureu-vos que valgui la pena el cost. Coneix "Patrons de disseny d'interfície intel·ligent" Podeu trobar tota una secció sobre modalitats i alternatives a Smart Interface Design Patterns, el nostre curs de vídeo de 15 hores amb centenars d'exemples pràctics de projectes de la vida real, amb una formació en UX en directe a finals d'aquest any. Tot, des de mega-menus desplegables fins a taules empresarials complexes, amb 5 segments nous afegits cada any. Aneu a una vista prèvia gratuïta. Utilitza el codi BIRDIE per estalviar un 15% de descompte. Coneix Smart Interface Design Patterns, el nostre curs de vídeo sobre disseny d'interfícies i UX.
Vídeo + Formació UX Només vídeoVídeo + Formació UX 495,00 $ 699,00 $
Obtén vídeo + UX Training25 lliçons de vídeo (15 h) + Live UX Training. Garantia de devolució de 100 dies. Només vídeo 300,00 $ 395,00 $
Aconsegueix el videocurs40 lliçons en video (15h). Actualitzat anualment. També disponible com a paquet UX amb 2 cursos de vídeo.
Recursos Útils
Diferents tipus de finestres emergents, d'Anna Kaley Bones pràctiques per dissenyar UI Modals, d'Uxcel Utilitzem massa modals maleïts: directrius UX, d'Adrian Egger Diàlegs modals i no modals, de Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, de James Jacobs Modals en sistemes de disseny
