Vjerojatno ste već bili tamo. Kako biramo između prikazivanja modala korisnicima i kada ih vodimo na zasebnu, novu stranicu? I je li to uopće bitno? Zapravo, ima. Odluka utječe na tok korisnika, njihov kontekst, njihovu sposobnost traženja pojedinosti, a time i učestalost pogrešaka i dovršetak zadatka. Obje opcije mogu biti ometajuće i frustrirajuće - u krivo vrijeme i na krivom mjestu. Zato je bolje da to ispravimo. Pa, da vidimo kako to učiniti. Modali vs. Dijalozi vs. Prekrivanja vs. Lightboxovi Dok često govorimo o jednoj modalnoj komponenti korisničkog sučelja, često zanemarujemo fine, zamršene nijanse između svih različitih vrsta modala. Zapravo, nije svaki modal isti. Modali, dijalozi, preklapanja i svjetlosni okviri — svi zvuče slično, ali zapravo su prilično različiti:
DijalogOpći izraz za "razgovor" (korisnik ↔ sustav). Prekrivanje Mala ploča sa sadržajem prikazana na vrhu stranice. ModalUser mora komunicirati s onemogućenim slojem + pozadinom. NonmodalUser mora komunicirati s omogućenim slojem + pozadinom. Lightbox Zatamnjena pozadina za usmjeravanje pažnje na modal.
Kao što ističe Anna Kaley, većina preklapanja pojavljuje se u krivo vrijeme, ometa korisnike tijekom kritičnih zadataka, koristi se ružnim jezikom i prekida protok korisnika. Oni su po prirodi prekidajući i obično imaju visoku razinu ozbiljnosti bez jake potrebe za tim.
Zasigurno se korisnici moraju usporiti i prekinuti ako posljedice njihove radnje imaju velik utjecaj, ali za većinu scenarija nemodalni su puno suptilniji i prijateljskija opcija da se korisniku na nešto skrene pozornost. 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! — ali i oni imaju svoju vrijednost. Mogu biti od velike pomoći za upozorenje korisnika na moguće pogreške ili im pomoći da izbjegnu gubitak podataka. Oni također mogu pomoći u izvođenju povezanih radnji ili dublje u detalje bez prekida trenutnog stanja stranice. Ali najveća prednost modala je ta što pomažu korisnicima da zadrže kontekst trenutnog zaslona. To ne znači samo korisničko sučelje, već i uređeni unos, položaj pomicanja, stanje harmonika, odabir filtara, sortiranje i tako dalje.
Ponekad korisnici moraju brzo potvrditi odabir (npr. filtri kao što je prikazano gore) i zatim odmah nastaviti od tamo. 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 u koje bi korisnici trebali uskočiti, izvršiti zadatak i zatim se vratiti tamo gdje su bili. Ne iznenađuje da dobro funkcioniraju za kratke interakcije visokog prioriteta (npr. upozorenja, destruktivne akcije, brze potvrde). Kada modali pomažu: 🚫 Modali su često ometajući, invazivni i zbunjujući.🚫 Otežavaju usporedbu i kopiranje-lijepljenje.✅ Ipak, modali omogućuju korisnicima održavanje višestrukih konteksta.✅ Korisni za sprječavanje nepovratnih pogrešaka i gubitka podataka.✅ Korisni ako bi slanje korisnika na novu stranicu bilo ometajuće. ✅ Prikaži modal samo ako će korisnici cijeniti smetnju. ✅ Prema zadanim postavkama preferiraj dijaloške okvire bez blokiranja ("nemodalni"). ✅ Omogući korisnicima da minimiziraju, sakriju ili vrate dijaloški okvir kasnije. ✅ Upotrijebi modal da usporiš korisnike, npr., provjeri složeni unos. ✅ Dajte izlaz pomoću "Zatvori", tipke ESC ili kliknite izvan okvira. Stranice → Za složene tijekove 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 bolje funkcioniraju. Problemi počinju kada korisnici trebaju usporediti ili referencirati podatkovne točke — ali modali blokiraju ovo ponašanje, pa umjesto toga ponovno 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 pozornost korisnika, a pozivanje na prethodni zaslon nije od velike pomoći. A ladice rade za podzadatke koji su presloženi za jednostavan modal, ali ne trebaju navigaciju cijelom stranicom. Kada izbjegavati modale: 🚫 Izbjegavajte modale za poruke o pogrešci. 🚫 Izbjegavajte modale za obavijesti o značajkama. 🚫 Izbjegavajte modale za iskustvo uključivanja. 🚫 Izbjegavajte modale za složene, dugotrajne zadatke u više koraka. 🚫 Izbjegavajte višestruke ugniježđene modale i umjesto toga koristite prethodni/sljedeći. 🚫 Izbjegavajte modale koji se automatski pokreću osim ako je to apsolutno neophodno. Izbjegavajte obojeZa zadatke koji se ponavljaju U mnogim složenim proizvodima koji zahtijevaju teške zadatke, korisnici će se naći kako ponavljaju iste zadatke, iznova i iznova. Tamo i modalne i nove navigacije stranicama dodaju probleme jer prekidaju tijek ili tjeraju korisnike da prikupljaju podatke koji nedostaju između svih različitih kartica ili prikaza. Prečesto korisnici završe s pokvarenim iskustvom, punim beskonačnih potvrda, pretjeranih upozorenja, opširnih uputa ili jednostavno nedostajućih referentnih točaka. Kao što je Saulius Stebulis spomenuo, u ovim scenarijima proširivi odjeljci ili uređivanje na licu mjesta često rade bolje — oni drže zadatak usidren na trenutnom zaslonu. U praksi, u mnogim scenarijima, korisnici ne dovršavaju svoje zadatke u izolaciji. Moraju potražiti podatke, kopirati-zalijepiti vrijednosti, pročistiti unose na različitim mjestima ili samo pregledati slične zapise dok rade na svojim zadacima. Slojevi i ladice korisniji su u održavanju pristupa pozadinskim podacima tijekom zadatka. Kao rezultat toga, kontekst uvijek ostaje na svom mjestu, dostupan za referencu ili copy-paste. Sačuvajte modale i navigaciju stranicama za trenutke u kojima prekid doista dodaje vrijednost — posebno za sprječavanje kritičnih pogrešaka. Modali nasuprot stranicama: stablo odlučivanja Prije nekog vremena, Ryan Neufeld sastavio je vrlo koristan vodič za pomoć dizajnerima pri odabiru između modala i stranica. Dolazi sa zgodnim PNG listom za varanje i predloškom Google Doc s pitanjima podijeljenim u 7 odjeljaka. Dug je, iznimno temeljit, ali ga je vrlo lako pratiti:
Možda izgleda zastrašujuće, ali to je prilično jednostavan postupak u 4 koraka:
Kontekst zaslona. Prvo provjeravamo trebaju li korisnici održavati kontekst temeljnog zaslona. Složenost i trajanje zadatka. Jednostavniji, fokusirani zadaci koji ne ometaju mogli bi koristiti modal, ali dugi, složeni tokovi trebaju stranicu. Referenca na temeljnu stranicu. Zatim provjeravamo trebaju li korisnici često upućivati na podatke u pozadini ili je zadatak jednostavna potvrda ili odabir. Odabir pravog preklapanja. Na kraju, ako je preklapanje doista dobra opcija, ono nas upućuje na izbor između modalnog ili nemodalnog (sklon nemodalnom).
Zamotavanje Kad god je moguće, izbjegavajte blokiranje cijelog korisničkog sučelja. Neka dijaloški okvir pluta, djelomično prekriva korisničko sučelje, ali dopušta navigaciju, pomicanje i kopiranje. Ili prikažite sadržaj modala kao bočnu ladicu. Ili umjesto toga upotrijebite okomitu harmoniku. Ili dovedite korisnike na zasebnu stranicu ako trebate prikazati puno detalja. Ali ako želite povećati učinkovitost i brzinu korisnika, izbjegavajte modale pod svaku cijenu. Koristite ih da usporite korisnike, da prikupite njihovu pažnju, da spriječite pogreške. Kao što je primijetila Therese Fessenden, nitko ne voli da ga se prekida, ali ako morate, pobrinite se da je to apsolutno vrijedno troška. Upoznajte "Pattern Interface Design Patterns" Možete pronaći cijeli odjeljak o modalitetima i alternativama u Pametnim obrascima dizajna sučelja, našem 15-satnom videotečaju sa 100 praktičnih primjera iz projekata iz stvarnog života — s UX obukom uživo kasnije ove godine. Sve od mega-padajućih do složenih poslovnih tablica — s 5 novih segmenata koji se dodaju svake godine. Prijeđite na besplatni pregled. Koristite kod BIRDIE za uštedu od 15%. Upoznajte pametne uzorke dizajna sučelja, naš video tečaj o dizajnu sučelja i korisničkom sučelju.
Video + UX obuka Samo video Video + UX obuka $ 495,00 $ 699,00
Nabavite video + UX obuku 25 video lekcija (15h) + UX obuku uživo. 100 dana garancije povrata novca. Samo video 300,00 $ 395,00 $
Nabavite videotečaj40 video lekcija (15h). Ažurira se svake godine. Dostupno i kao UX Bundle s 2 video tečaja.
Korisni resursi
Različite vrste skočnih prozora, Anna Kaley Najbolje prakse za dizajniranje modala korisničkog sučelja, Uxcel Koristimo previše prokletih modala: UX smjernice, Adrian Egger Modalni i nemodalni dijalozi, Therese Fessenden Dizajn modernog poslovnog korisničkog sučelja: Modalni dijalozi, James Jacobs Modali u sustavima dizajna
