Verovatno ste već bili tamo. Kako biramo između prikazivanja modala korisnicima i kada ćemo ih navigirati na posebnu, novu stranicu? I da li je to uopšte važno? Zapravo, ima. Odluka utječe na tok korisnika, njihov kontekst, njihovu sposobnost traženja detalja, a sa njom i učestalost grešaka i završetak zadatka. Obje opcije mogu biti ometajuće i frustrirajuće - u pogrešno vrijeme i na pogrešnom mjestu. Zato je bolje da to ispravimo. Pa, da vidimo kako to učiniti. Modali naspram dijaloga naspram preklapanja naspram svjetlosnih kutija Iako često govorimo o jednoj modalnoj komponenti korisničkog sučelja, često zanemarujemo fine, zamršene nijanse između svih različitih tipova modala. Zapravo, nije svaki modal isti. Modali, dijalozi, preklapanja i okviri za pregled - svi zvuče slično, ali su zapravo prilično različiti:
Dijalog Generički termin za “razgovor” (korisnik ↔ sistem). OverlayMali panel sa sadržajem koji se prikazuje na vrhu stranice. ModalUser mora komunicirati s preklapanjem + pozadina onemogućena. NonmodalUser mora komunicirati s omogućenim preklapanjem + pozadina. Lightbox Zatamnjena pozadina za fokusiranje pažnje na modal.
Kao što Anna Kaley ističe, većina preklapanja se pojavljuje u pogrešno vrijeme, prekida korisnike tokom kritičnih zadataka, koristi loš jezik i prekida protok korisnika. Oni su po prirodi prekidni, i obično sa visokim nivoom ozbiljnosti bez jake potrebe za tim.
Sigurno je da korisnici moraju biti usporeni i prekinuti ako posljedice njihove akcije imaju veliki utjecaj, ali u većini scenarija nemodali su mnogo suptilniji i prijateljskija opcija da se nešto skrene korisniku. Ako ništa drugo, uvijek predlažem da to bude zadano. Modali → Za pojedinačne, samostalne zadatke Kao dizajneri, često odbacujemo modale kao nebitne i dosadne — a često i jesu! — ipak imaju i svoju vrijednost. Mogu biti od velike pomoći da upozore korisnike na potencijalne greške ili im pomognu da izbjegnu gubitak podataka. Oni također mogu pomoći u izvođenju povezanih radnji ili udubljivanju u detalje bez prekidanja trenutnog stanja stranice. Ali najveća prednost modala je ta što pomažu korisnicima da zadrže kontekst trenutnog ekrana. To ne znači samo korisničko sučelje, već i uređeni unos, poziciju pomicanja, stanje harmonika, odabir filtera, sortiranje i tako dalje.
Ponekad korisnici moraju brzo da potvrde izbor (npr. filteri kao što je prikazano gore) i onda odmah krenuti odatle. Automatsko spremanje može postići isto, naravno, ali nije uvijek potrebno ili poželjno. A blokiranje korisničkog sučelja često nije dobra ideja. Međutim, modali se ne koriste ni za kakve zadatke. Obično ih koristimo za pojedinačne, samostalne zadatke gdje korisnici treba da uskoče, završe zadatak, a zatim se vrate tamo gdje su bili. Nije iznenađujuće da dobro funkcioniraju za kratke interakcije visokog prioriteta (npr. upozorenja, destruktivne radnje, brze potvrde). Kada modali pomažu: 🚫 Modali su često ometajući, invazivni i zbunjujući.🚫 Otežavaju poređenje i kopiranje-paste.✅ Ipak, modali omogućavaju korisnicima da održavaju više konteksta.✅ Korisni su za sprječavanje nepovratnih grešaka i gubitka podataka.✅ Korisno ako bi slanje korisnika na novu stranicu ometalo. ✅ Prikaži modal samo ako korisnici cijene smetnje.✅ Prema zadanim postavkama, preferirajte neblokirajuće dijaloge („nemodalne“).✅ Dozvolite korisnicima da minimiziraju, sakriju ili vrate dijalog kasnije.✅ Koristite modal da usporite korisnike, npr., provjerite složeni unos.✅ Dajte izlaz sa „Zatvori ili kliknite na polje izvana.“ Stranice → Za složene tokove rada u više koraka Čarobnjaci ili navigacija s karticama unutar modala ne funkcioniraju previše dobro, čak ni u složenim poslovnim proizvodima - tamo bočne ploče ili ladice obično rade bolje. Problemi počinju kada korisnici treba da uporede ili referenciraju tačke podataka - ali modali blokiraju ovo ponašanje, pa umjesto toga ponovo otvaraju istu stranicu u više kartica.
Za složenije tokove i procese u više koraka najbolje funkcioniraju samostalne stranice. Stranice također rade bolje kada zahtijevaju punu pažnju korisnika, a upućivanje na prethodni ekran nije od velike pomoći. A fioke rade za podzadatke koji su previše složeni za jednostavan modalni, ali im nije potrebna navigacija po cijeloj stranici. Kada izbjegavati modalitete: 🚫 Izbjegavajte modale za poruke o greškama.🚫 Izbjegavajte modale za obavještenja o značajkama.🚫 Izbjegavajte modale za iskustvo ugradnje.🚫 Izbjegavajte modale za složene, dugotrajne zadatke u više koraka.🚫 Izbjegavajte više ugniježđenih modala i umjesto njih koristite prev/next.🚫 Izbjegavajte modalitete koji nisu apsolutno neophodni. Izbjegavajte obojeZa ponovljene zadatke U mnogim složenim proizvodima sa velikim brojem zadataka, korisnici će se naći da obavljaju iste zadatke više puta, iznova i iznova. Tu i modali i nove navigacije stranica dodaju trenje jer prekidaju tok ili prisiljavaju korisnike da prikupljaju podatke koji nedostaju između svih različitih kartica ili prikaza. Prečesto korisnici završe s pokvarenim iskustvom, punim beskrajnih potvrda, pretjeranih upozorenja, opširnih uputa ili samo nedostajuće referentne točke. Kao što je Saulius Stebulis spomenuo, u ovim scenarijima, proširivi odjeljci ili uređivanje na mjestu često rade bolje – oni drže zadatak usidren za trenutni ekran. U praksi, u mnogim scenarijima, korisnici ne izvršavaju svoje zadatke u izolaciji. Oni treba da traže podatke, kopiraju i zalepe vrednosti, preciziraju unose na različitim mestima ili samo pregledaju slične zapise dok rade na svojim zadacima. Prekrivači i fioke su korisniji u održavanju pristupa pozadinskim podacima tokom zadatka. Kao rezultat, kontekst uvijek ostaje na svom mjestu, dostupan za referencu ili copy-paste. Sačuvajte modale i navigaciju po stranicama za trenutke u kojima prekid zaista dodaje vrijednost — posebno da biste spriječili kritične greške. Modali protiv stranica: Stablo odlučivanja Prije nekog vremena, Ryan Neufeld je sastavio vrlo koristan vodič kako bi pomogao dizajnerima da biraju između modala i stranica. Dolazi sa praktičnim PNG cheatsheet-om i Google Doc predloškom s pitanjima raščlanjenim na 7 odjeljaka. Dugačak je, izuzetno temeljan, ali vrlo jednostavan za praćenje:
Možda izgleda zastrašujuće, ali to je prilično jednostavan proces u 4 koraka:
Kontekst ekrana. Prvo provjeravamo da li korisnici trebaju održavati kontekst osnovnog ekrana. Složenost i trajanje zadatka. Jednostavniji, fokusirani zadaci koji ne ometaju pažnju mogli bi koristiti modalni, ali dugi, složeni tokovi trebaju stranicu. Referenca na temeljnu stranicu. Zatim provjeravamo da li korisnici često moraju da se pozivaju na podatke u pozadini ili je zadatak jednostavna potvrda ili odabir. Odabir pravog preklapanja. Konačno, ako je preklapanje zaista dobra opcija, ono nas vodi da biramo između modalnog ili nemodalnog (sklon nemodalnom).
Wrapping Up Kad god je moguće, izbjegavajte blokiranje cijelog korisničkog sučelja. Neka dijaloški okvir pluta, djelomično pokriva korisničko sučelje, ali omogućava navigaciju, pomicanje i kopiranje. Ili prikažite sadržaj modala kao bočnu ladicu. Ili umjesto toga koristite vertikalnu harmoniku. Ili dovedite korisnike na zasebnu stranicu ako trebate prikazati puno detalja. Ali ako želite povećati efikasnost i brzinu korisnika, izbjegavajte modale po svaku cijenu. Koristite ih da usporite korisnike, da im povežete pažnju, da spriječite greške. Kao što je Therese Fessenden primijetila, niko ne voli da ga prekidaju, ali ako morate, uvjerite se da je apsolutno vrijedno troškova. Upoznajte “Smart Interface Design Patterns” Možete pronaći cijeli odjeljak o modalima i alternativama u Smart Interface Design Patterns, našem 15-satnom video kursu sa 100-tima praktičnih primjera iz projekata iz stvarnog života — uz live UX trening kasnije ove godine. Sve od mega-padajućih menija do složenih poslovnih tabela — sa 5 novih segmenata koji se dodaju svake godine. Pređite na besplatni pregled. Koristite kod BIRDIE da uštedite 15% popusta. Upoznajte Smart Interface Design Patterns, naš video kurs o dizajnu interfejsa i UX-u.
Video + UX trening Samo videoVideo + UX trening$ 495,00 $ 699,00
Nabavite video + UX trening 25 video lekcija (15 h) + UX trening uživo. 100 dana garancije povrata novca. Video samo 300,00$ 395,00$
Preuzmite video kurs 40 video lekcija (15h). Ažurira se svake godine. Dostupan i kao UX paket sa 2 video kursa.
Korisni resursi
Različite vrste iskačućih prozora, Anna Kaley Najbolje prakse za dizajniranje UI modala, Uxcel Koristimo previše prokletih modala: UX smjernice, Adrian Egger Modalni i nemodalni dijalozi, Therese Fessenden Moderni dizajn korisničkog sučelja preduzeća: Modalni dijalozi, James Jacobs Modali u sistemima dizajna
