Probabil ai mai fost acolo. Cum alegem între afișarea unui modal utilizatorilor și când îi navigăm către o pagină nouă, separată? Și contează deloc? De fapt, da. Decizia influențează fluxul utilizatorilor, contextul acestora, capacitatea lor de a căuta detalii și, cu aceasta, frecvența erorilor și finalizarea sarcinilor. Ambele opțiuni pot fi perturbatoare și frustrante - la momentul nepotrivit și la locul nepotrivit. Așa că ar fi bine să înțelegem bine. Ei bine, să vedem cum să facem exact asta. Modaluri vs. Dialoguri vs. Suprapuneri vs. Lightbox Deși vorbim adesea despre o singură componentă a interfeței de utilizare modală, adesea ignorăm nuanțele fine și complicate dintre toate tipurile diferite de modali. De fapt, nu orice modal este la fel. Modalurile, dialogurile, suprapunerile și casetele luminoase — toate sună similar, dar sunt de fapt destul de diferite:
Dialog Un termen generic pentru „conversație” (utilizator ↔ sistem). Suprapunere Un mic panou de conținut afișat în partea de sus a unei pagini. ModalUser trebuie să interacționeze cu suprapunerea + fundalul dezactivat. NonmodalUser trebuie să interacționeze cu suprapunerea + fundalul activate. Lightbox Fundal estompat pentru a concentra atenția asupra modalului.
După cum subliniază Anna Kaley, majoritatea suprapunerilor apar la momentul nepotrivit, întrerup utilizatorii în timpul sarcinilor critice, folosesc un limbaj slab și întrerup fluxul utilizatorilor. Ele sunt întreruptoare prin natura lor și, de obicei, au un nivel ridicat de severitate, fără o nevoie puternică de asta.
Cu siguranță utilizatorii trebuie să fie încetiniți și întrerupți dacă consecințele acțiunii lor au un impact mare, dar pentru majoritatea scenariilor non-modalele sunt mult mai subtile și o opțiune mai prietenoasă pentru a aduce ceva în atenția utilizatorului. În orice caz, sugerez întotdeauna să fie implicit. Modale → Pentru sarcini unice, autonome În calitate de designeri, deseori respingem modalele ca fiind irelevante și enervante - și adesea sunt! — totuși au și valoarea lor. Ele pot fi foarte utile pentru a avertiza utilizatorii despre potențiale greșeli sau pentru a-i ajuta să evite pierderea datelor. De asemenea, ele pot ajuta la efectuarea acțiunilor conexe sau la detalierea detaliilor fără a întrerupe starea curentă a paginii. Dar cel mai mare avantaj al modalelor este că ajută utilizatorii să păstreze contextul ecranului curent. Nu înseamnă doar interfața de utilizare, ci și intrarea editată, poziția de defilare, starea acordeonurilor, selecția filtrelor, sortarea și așa mai departe.
Uneori, utilizatorii trebuie să confirme rapid o selecție (de exemplu, filtrele așa cum se arată mai sus) și apoi să continue imediat de acolo. Salvarea automată poate realiza același lucru, desigur, dar nu este întotdeauna necesară sau dorită. Și blocarea interfeței de utilizare nu este adesea o idee bună. Cu toate acestea, modalele nu sunt folosite pentru nicio sarcină. De obicei, le folosim pentru sarcini unice, autonome, în care utilizatorii ar trebui să intre, să finalizeze o sarcină și apoi să se întoarcă acolo unde se aflau. Deloc surprinzător, funcționează bine pentru interacțiuni scurte și cu prioritate ridicată (de exemplu, alerte, acțiuni distructive, confirmări rapide). Când modalele ajută: 🚫 Modalurile sunt adesea perturbatoare, invazive și confuze.🚫 Ele fac dificilă compararea și copierea și lipirea.✅ Cu toate acestea, modalele permit utilizatorilor să mențină mai multe contexte.✅ Utile pentru a preveni erorile ireversibile și pierderea de date.✅ Util dacă trimiterea utilizatorilor către o pagină nouă ar fi perturbatoare. ✅ Afișați un mod numai dacă utilizatorii vor aprecia întreruperea.✅ În mod implicit, preferați dialogurile neblocante („nonmodale”).✅ Permiteți utilizatorilor să minimizeze, să ascundă sau să restabilească dialogul mai târziu.✅ Folosiți un modal pentru a încetini utilizatorii, de exemplu, verificați introducerea complexă.✅ Oferiți o cale de ieșire cu „Închidere”, tasta ESC sau faceți clic în afara casetei. Pagini → Pentru fluxuri de lucru complexe, în mai mulți pași Vrăjitorii sau navigarea cu file în modal nu funcționează prea bine, chiar și în produsele complexe ale întreprinderii - acolo, panourile laterale sau sertarele funcționează de obicei mai bine. Problemele încep atunci când utilizatorii trebuie să compare sau să facă referire la puncte de date – totuși modaliile blochează acest comportament, așa că redeschid aceeași pagină în mai multe file.
Pentru fluxuri mai complexe și procese în mai mulți pași, paginile independente funcționează cel mai bine. De asemenea, paginile funcționează mai bine atunci când solicită toată atenția utilizatorului, iar referirea la ecranul anterior nu este foarte utilă. Iar sertarele funcționează pentru sub-sarcini care sunt prea complexe pentru un modal simplu, dar nu necesită o navigare pe întreaga pagină. When to avoid modals: 🚫 Evitați modale pentru mesajele de eroare.🚫 Evitați modale pentru notificările de caracteristici.🚫 Evitați modale pentru experiența de integrare.🚫 Evitați modale pentru sarcini complexe, lungi în mai mulți pași.🚫 Evitați mai multe modale imbricate și utilizați în schimb prev/next. Evitați ambelePentru sarcini repetate În multe produse complexe, grele de sarcini, utilizatorii se vor găsi îndeplinesc aceleași sarcini în mod repetat, iar și iar. Acolo, atât modalele, cât și noile navigații ale paginilor adaugă fricțiuni, deoarece întrerup fluxul sau obligă utilizatorii să adune date lipsă între toate filele sau vizualizările diferite. Prea des, utilizatorii ajung să aibă o experiență întreruptă, plină de confirmări fără sfârșit, avertismente exagerate, instrucțiuni detaliate sau doar puncte de referință lipsă. După cum a menționat Saulius Stebulis, în aceste scenarii, secțiunile extensibile sau editarea la loc funcționează adesea mai bine - mențin sarcina ancorată de ecranul curent. În practică, în multe scenarii, utilizatorii nu își îndeplinesc sarcinile în mod izolat. Ei trebuie să caute date, să copieze-lipi valori, să rafinați intrările în diferite locuri sau să revizuiască doar înregistrări similare pe măsură ce își desfășoară sarcinile. Suprapunerile și sertarele sunt mai utile în menținerea accesului la datele de fundal în timpul sarcinii. Ca urmare, contextul rămâne întotdeauna la locul său, disponibil pentru referință sau copy-paste. Salvați modurile și navigarea în pagină pentru momentele în care întreruperea adaugă cu adevărat valoare – mai ales pentru a preveni greșelile critice. Modaluri vs. Pagini: un arbore de decizie Cu ceva timp în urmă, Ryan Neufeld a creat un ghid foarte util pentru a-i ajuta pe designeri să aleagă între modal și pagini. Vine cu o foaie PNG utilă și un șablon Google Doc cu întrebări defalcate în 7 secțiuni. Este lung, extrem de complet, dar foarte ușor de urmărit:
Poate părea descurajantă, dar este un proces destul de simplu în 4 pași:
Contextul ecranului. În primul rând, verificăm dacă utilizatorii trebuie să mențină contextul ecranului de bază. Complexitatea și durata sarcinilor. Sarcinile mai simple, concentrate, care nu distrag atenția ar putea folosi un modal, dar fluxurile lungi și complexe au nevoie de o pagină. Referire la pagina de bază. Apoi, verificăm dacă utilizatorii trebuie adesea să se refere la date din fundal sau dacă sarcina este o simplă confirmare sau selecție. Alegerea suprapunerii potrivite. În cele din urmă, dacă o suprapunere este într-adevăr o opțiune bună, ne ghidează să alegem între modal sau nonmodal (înclinând spre un nonmodal).
Încheierea Ori de câte ori este posibil, evitați blocarea întregii interfețe de utilizare. Au o casetă de dialog plutitoare, care acoperă parțial interfața de utilizare, dar care permite navigarea, derularea și copierea-lipirea. Sau afișați conținutul modalului ca sertar lateral. Sau folosește în schimb un acordeon vertical. Sau aduceți utilizatorii pe o pagină separată dacă aveți nevoie să afișați multe detalii. Dar dacă doriți să creșteți eficiența și viteza utilizatorilor, evitați modalele cu orice preț. Folosiți-le pentru a încetini utilizatorii, pentru a le concentra atenția, pentru a preveni greșelile. După cum a menționat Therese Fessenden, nimănui nu îi place să fie întrerupt, dar dacă trebuie, asigurați-vă că merită absolut costul. Faceți cunoștință cu „Modele de design pentru interfețe inteligente” Puteți găsi o secțiune întreagă despre modalități și alternative în Smart Interface Design Patterns, cursul nostru video de 15 ore cu 100 de exemple practice din proiecte din viața reală - cu un training live UX mai târziu în acest an. Totul, de la mega-menuse derulante la tabele complexe de întreprindere - cu 5 segmente noi adăugate în fiecare an. Salt la o previzualizare gratuită. Folosește codul BIRDIE pentru a economisi 15% reducere. Faceți cunoștință cu Smart Interface Design Patterns, cursul nostru video despre proiectarea interfeței și UX.
Video + UX Training Numai video Video + UX Training 495,00 USD 699,00 USD
Obțineți Video + UX Training25 de lecții video (15 ore) + Live UX Training. Garanție de rambursare a banilor în 100 de zile. Numai videoclip 300,00 USD 395,00 USD
Obțineți cursul video40 de lecții video (15 ore). Actualizat anual. Disponibil și ca pachet UX cu 2 cursuri video.
Resurse utile
Diferite tipuri de ferestre pop-up, de Anna Kaley Cele mai bune practici pentru proiectarea modalelor UI, de Uxcel We Use Too Many Damn Modals: UX Guidelines, by Adrian Egger Modal & Nonmodal Dialogs, de Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, de James Jacobs Modale în sistemele de proiectare
