Verjetno ste že bili tam. Kako izberemo med prikazovanjem modala uporabnikom in kdaj jih usmerimo na ločeno, novo stran? In ali je sploh pomembno? Pravzaprav je. Odločitev vpliva na tok uporabnikov, njihov kontekst, njihovo sposobnost iskanja podrobnosti ter s tem pogostost napak in dokončanje nalog. Obe možnosti sta lahko moteči in frustrirajoči – ob napačnem času in na napačnem mestu. Zato je bolje, da to naredimo pravilno. No, poglejmo, kako to narediti. Modali v primerjavi s pogovornimi okni v primerjavi s prekrivnimi elementi v primerjavi s svetlobnimi ploščami Medtem ko pogosto govorimo o eni sami modalni komponenti uporabniškega vmesnika, pogosto prezremo fine, zapletene nianse med vsemi različnimi vrstami modalov. Pravzaprav ni vsak modal enak. Modali, pogovorna okna, prekrivni elementi in svetlobne plošče – vsi se slišijo podobno, vendar so v resnici precej različni:
Dialog Splošni izraz za »pogovor« (uporabnik ↔ sistem). Prekrivna plošča Majhna vsebinska plošča, prikazana na vrhu strani. ModalUser mora komunicirati z onemogočenim prekrivanjem + ozadjem. NonmodalUser mora komunicirati z omogočenim prekrivanjem + ozadjem. Lightbox Zatemnjeno ozadje za osredotočanje pozornosti na modal.
Kot poudarja Anna Kaley, se večina prekrivk pojavi ob nepravem času, moti uporabnike med kritičnimi opravili, uporablja nespodoben jezik in prekine tok uporabnikov. Po naravi so moteči in običajno z visoko stopnjo resnosti brez močne potrebe po tem.
Zagotovo je treba uporabnike upočasniti in prekiniti, če imajo posledice njihovega dejanja močan učinek, vendar so za večino scenarijev nemodalnosti veliko bolj subtilna in prijaznejša možnost, da na nekaj pritegnete pozornost uporabnika. Če že, vedno predlagam, da je privzeto. Modali → Za posamezne, samostojne naloge Kot oblikovalci modale pogosto zavračamo kot nepomembne in nadležne - in pogosto so! — vendar imajo tudi svojo vrednost. Lahko so zelo koristni, da uporabnike opozorijo na morebitne napake ali jim pomagajo preprečiti izgubo podatkov. Prav tako lahko pomagajo izvajati sorodna dejanja ali poglabljati v podrobnosti, ne da bi prekinili trenutno stanje strani. Toda največja prednost modalov je, da uporabnikom pomagajo ohraniti kontekst trenutnega zaslona. To ne pomeni samo uporabniškega vmesnika, ampak tudi urejen vnos, položaj drsenja, stanje harmonik, izbiro filtrov, razvrščanje itd.
Včasih morajo uporabniki hitro potrditi izbiro (npr. filtre, kot je prikazano zgoraj) in nato takoj nadaljevati od tam. Samodejno shranjevanje lahko seveda doseže isto, vendar ni vedno potrebno ali zaželeno. In blokiranje uporabniškega vmesnika pogosto ni dobra ideja. Vendar se modali ne uporabljajo za nobena opravila. Običajno jih uporabljamo za posamezne, samostojne naloge, pri katerih bi morali uporabniki vskočiti, dokončati nalogo in se nato vrniti tja, kjer so bili. Ni presenetljivo, da dobro delujejo pri kratkih interakcijah z visoko prioriteto (npr. opozorila, destruktivna dejanja, hitre potrditve). Ko modali pomagajo: 🚫 Modali so pogosto moteči, invazivni in zmedeni. 🚫 Težko primerjajo in kopirajo-prilepijo. ✅ Kljub temu modali uporabnikom omogočajo vzdrževanje več kontekstov. ✅ Uporabni za preprečevanje nepopravljivih napak in izgube podatkov. ✅ Uporabni, če bi bilo pošiljanje uporabnikov na novo stran moteče. ✅ Prikažite modal samo, če bodo uporabniki cenili motnjo.✅ Privzeto raje izberite neblokirna pogovorna okna (»nemodalna«).✅ Uporabnikom dovolite, da minimizirajo, skrijejo ali obnovijo pogovorno okno pozneje.✅ Uporabite modal za upočasnitev uporabnikov, npr. preverite zapleten vnos.✅ Omogočite izhod z »Zapri«, tipko ESC ali kliknite zunaj polja. Strani → Za zapletene poteke dela v več korakih Čarovniki ali navigacija z zavihki znotraj modalov ne deluje preveč dobro, tudi v zapletenih podjetniških izdelkih – tam stranske plošče ali predali običajno delujejo bolje. Težave se začnejo, ko morajo uporabniki primerjati ali se sklicevati na podatkovne točke – vendar modali blokirajo to vedenje, zato znova odprejo isto stran na več zavihkih.
Za bolj zapletene tokove in večstopenjske postopke najbolje delujejo samostojne strani. Strani prav tako delujejo bolje, ko zahtevajo popolno pozornost uporabnika, sklicevanje na prejšnji zaslon pa ni v veliko pomoč. In predali delujejo za podnaloge, ki so preveč zapletene za preprost način, vendar ne potrebujejo navigacije po celotni strani. Kdaj se izogniti načinom: 🚫 Izogibajte se modalom za sporočila o napakah.🚫 Izogibajte se modalom za obvestila o funkcijah.🚫 Izogibajte se modalom za izkušnjo vkrcanja.🚫 Izogibajte se modalom za zapletena, dolgotrajna opravila v več korakih.🚫 Izogibajte se več ugnezdenim modalom in namesto tega uporabite prejšnji/naslednji.🚫 Izogibajte se samodejno sproženim modalom, razen če je to nujno potrebno. Izogibajte se obemaZa ponavljajoče se naloge V številnih zapletenih izdelkih, ki zahtevajo veliko nalog, bodo uporabniki vedno znova in znova opravljali ista opravila. Tam modalne in nove navigacije po straneh povzročajo trenje, ker prekinejo tok ali prisilijo uporabnike, da zbirajo manjkajoče podatke med vsemi različnimi zavihki ali pogledi. Prepogosto imajo uporabniki pokvarjeno izkušnjo, polno neskončnih potrditev, pretiranih opozoril, podrobnih navodil ali samo manjkajočih referenčnih točk. Kot je omenil Saulius Stebulis, v teh scenarijih razširljivi odseki ali urejanje na mestu pogosto delujejo bolje – nalogo ohranjajo zasidrano na trenutnem zaslonu. V praksi v mnogih scenarijih uporabniki svojih nalog ne dokončajo sami. Med opravljanjem svojih nalog morajo poiskati podatke, kopirati in prilepiti vrednosti, izboljšati vnose na različnih mestih ali samo pregledati podobne zapise. Prekrivki in predali so bolj koristni pri ohranjanju dostopa do podatkov v ozadju med opravilom. Posledično kontekst vedno ostane na svojem mestu, na voljo za referenco ali kopiranje in lepljenje. Prihranite modale in navigacijo po straneh za trenutke, ko prekinitev resnično doda vrednost - zlasti za preprečevanje kritičnih napak. Modali proti stranem: drevo odločitev Pred časom je Ryan Neufeld sestavil zelo koristen vodnik, ki oblikovalcem pomaga pri izbiri med načini in stranmi. Prihaja s priročno goljufijo PNG in predlogo Google Doc z vprašanji, razdeljenimi na 7 razdelkov. Je dolgotrajen, izjemno temeljit, a zelo preprost za sledenje:
Morda se zdi zastrašujoče, vendar gre za povsem preprost postopek v 4 korakih:
Kontekst zaslona. Najprej preverimo, ali morajo uporabniki ohraniti kontekst osnovnega zaslona. Zapletenost in trajanje naloge. Enostavnejše, osredotočene in nemoteče naloge bi lahko uporabile način, vendar dolgi, zapleteni tokovi potrebujejo stran. Sklicevanje na osnovno stran. Nato preverimo, ali se morajo uporabniki pogosto sklicevati na podatke v ozadju ali je opravilo preprosta potrditev ali izbira. Izbira pravega prekrivanja. Nazadnje, če je prekrivanje res dobra možnost, nas vodi, da izberemo med modalnim ali nemodalnim (nagibamo se k nemodalnemu).
Zaključek Kadarkoli je mogoče, se izogibajte blokiranju celotnega uporabniškega vmesnika. Imejte lebdeče pogovorno okno, ki delno pokriva uporabniški vmesnik, vendar omogoča navigacijo, pomikanje in kopiranje in lepljenje. Ali prikažite vsebino modala kot stranski predal. Ali namesto tega uporabite navpično harmoniko. Ali pa pripeljite uporabnike na ločeno stran, če morate prikazati veliko podrobnosti. Če pa želite povečati učinkovitost in hitrost uporabnikov, se za vsako ceno izogibajte načinom. Uporabite jih, da upočasnite uporabnike, združite njihovo pozornost in preprečite napake. Kot je opozorila Therese Fessenden, nihče ne mara, da ga motijo, a če že morate, se prepričajte, da je popolnoma vredno stroškov. Spoznajte "vzorce oblikovanja pametnih vmesnikov" Celoten razdelek o načinih in alternativah lahko najdete v Vzorcih oblikovanja pametnih vmesnikov, našem 15-urnem video tečaju s 100 praktičnimi primeri iz projektov v resničnem življenju — z usposabljanjem UX v živo kasneje letos. Vse od mega-spustnih menijev do zapletenih podjetniških tabel — s 5 novimi segmenti, dodanimi vsako leto. Skoči na brezplačen predogled. Uporabite kodo BIRDIE, da prihranite 15 % popusta. Spoznajte vzorce oblikovanja pametnih vmesnikov, naš video tečaj o oblikovanju vmesnikov in UX.
Video + UX usposabljanje Samo video Video + UX usposabljanje $ 495,00 $ 699,00
Pridobite videoposnetek + usposabljanje UX25 video lekcij (15 ur) + usposabljanje UX v živo. 100-dnevna garancija vračila denarja. Samo videoposnetki 300,00 $ 395,00 $
Pridobite video tečaj 40 video lekcij (15 ur). Posodobljeno letno. Na voljo tudi kot paket UX z 2 video tečajema.
Uporabni viri
Različne vrste pojavnih oken, avtorica Anna Kaley Najboljše prakse za oblikovanje modal uporabniškega vmesnika, Uxcel Uporabljamo preveč prekletih načinov: Smernice UX, Adrian Egger Modalni in nemodalni dialogi, Therese Fessenden Moderno oblikovanje uporabniškega vmesnika podjetja: Modalna pogovorna okna, avtor James Jacobs Modali v oblikovalskih sistemih
