Pravdepodobne ste tam už boli. Ako si vyberieme medzi zobrazením modálu používateľom a kedy ich prejdeme na samostatnú novú stránku? A záleží na tom vôbec? V skutočnosti áno. Rozhodnutie ovplyvňuje tok používateľov, ich kontext, ich schopnosť vyhľadať podrobnosti a tým aj frekvenciu chýb a dokončenie úlohy. Obe možnosti môžu byť rušivé a frustrujúce – v nesprávnom čase a na nesprávnom mieste. Tak to radšej uvedieme na pravú mieru. No, pozrime sa, ako to urobiť. Modály vs. dialógové okná vs. prekrytia vs. lightboxy Aj keď často hovoríme o jedinom modálnom komponente používateľského rozhrania, často ignorujeme jemné, zložité nuansy medzi všetkými rôznymi typmi modálov. V skutočnosti nie každý spôsob dopravy je rovnaký. Modály, dialógy, prekrytia a svetelné boxy – všetky znejú podobne, no v skutočnosti sú celkom odlišné:
Dialog Všeobecný výraz pre „konverzáciu“ (používateľ ↔ systém). Prekrytie Malý panel obsahu zobrazený v hornej časti stránky. ModalUser musí interagovať s prekrytím + pozadím deaktivovaným. NonmodalUser musí interagovať s prekrytím + povoleným pozadím. LightboxTlmené pozadie na zameranie pozornosti na modal.
Ako zdôrazňuje Anna Kaley, väčšina prekrytí sa zobrazuje v nesprávny čas, prerušuje používateľov počas kritických úloh, používa nedostatočný jazyk a prerušuje tok používateľov. Sú svojou povahou rušivé a zvyčajne s vysokou úrovňou závažnosti bez toho, aby to bolo potrebné.
Používatelia musia byť určite spomalení a prerušení, ak majú dôsledky ich konania veľký vplyv, ale pre väčšinu scenárov sú nemodálne verzie oveľa jemnejšie a sú priateľskejšou možnosťou, ako na niečo upozorniť používateľa. Ak niečo, vždy navrhujem, aby to bolo predvolené. Modály → Pre samostatné, samostatné úlohy Ako dizajnéri často odmietame modály ako irelevantné a otravné – a často sú! — majú však tiež svoju hodnotu. Môžu byť veľmi užitočné pri varovaní používateľov pred možnými chybami alebo pri predchádzaní strate údajov. Môžu tiež pomôcť vykonať súvisiace akcie alebo prejsť do podrobností bez prerušenia aktuálneho stavu stránky. Najväčšou výhodou modálov je však to, že pomáhajú používateľom zachovať kontext aktuálnej obrazovky. Neznamená to len používateľské rozhranie, ale aj upravený vstup, pozíciu rolovania, stav akordeónov, výber filtrov, triedenie atď.
Niekedy musia používatelia rýchlo potvrdiť výber (napr. filtre, ako je uvedené vyššie) a potom okamžite pokračovať. Automatické ukladanie môže samozrejme dosiahnuť to isté, ale nie je to vždy potrebné alebo žiaduce. A blokovanie používateľského rozhrania často nie je dobrý nápad. Modály sa však nepoužívajú na žiadne úlohy. Zvyčajne ich používame na samostatné, samostatné úlohy, do ktorých by používatelia mali skočiť, dokončiť úlohu a potom sa vrátiť tam, kde boli. Nie je prekvapením, že fungujú dobre pre krátke interakcie s vysokou prioritou (napr. upozornenia, deštruktívne akcie, rýchle potvrdenia). Keď modály pomáhajú: 🚫 Modály sú často rušivé, invazívne a mätúce.🚫 Sťažujú ich porovnávanie a kopírovanie a vkladanie.✅ Modály však umožňujú používateľom zachovať si viacero kontextov.✅ Užitočné na predchádzanie nezvratným chybám a strate údajov.✅ Užitočné, ak by odosielanie používateľov na novú stránku rušilo. ✅ Zobrazte modál iba v prípade, že používatelia budú oceniť prerušenie.✅ V predvolenom nastavení uprednostňujte neblokujúce dialógové okná („nemodálne“).✅ Umožnite používateľom minimalizovať, skryť alebo obnoviť dialógové okno neskôr.✅ Použite modál na spomalenie používateľov, napr. overenie zložitého vstupu.✅ Uvoľnite sa pomocou tlačidla „Zavrieť“, klávesu ESC alebo kliknutím mimo rámčeka. Stránky → Pre zložité, viackrokové pracovné postupy Sprievodcovia alebo navigácia na kartách v rámci modálov nefungujú príliš dobre, dokonca ani v zložitých podnikových produktoch – tam zvyčajne lepšie fungujú bočné panely alebo zásuvky. Problémy začínajú, keď používatelia potrebujú porovnať alebo odkazovať na dátové body – modály však toto správanie blokujú, takže namiesto toho znova otvoria rovnakú stránku na viacerých kartách.
Pre zložitejšie toky a viackrokové procesy najlepšie fungujú samostatné stránky. Stránky tiež fungujú lepšie, keď vyžadujú plnú pozornosť používateľa a odkaz na predchádzajúcu obrazovku nie je príliš užitočný. A zásuvky fungujú pre čiastkové úlohy, ktoré sú príliš zložité pre jednoduchý spôsob, ale nepotrebujú úplnú navigáciu po stránke. Kedy sa vyhnúť modálom: 🚫 Vyhnite sa modálnym chybovým hláseniam.🚫 Vyhnite sa modálom pre upozornenia na funkcie.🚫 Vyhnite sa modám pre zážitok z registrácie.🚫 Vyhnite sa modám pre zložité a zdĺhavé úlohy s viacerými krokmi.🚫 Vyhnite sa viacerým vnoreným modálom a namiesto toho použite predchádzajúci/nasledujúci.🚫 Vyhnite sa automaticky spúšťaným modálom, pokiaľ to nie je absolútne nevyhnutné. Vyhnite sa obomPre opakované úlohy V mnohých zložitých produktoch náročných na úlohy používatelia zistia, že vykonávajú rovnaké úlohy opakovane, znova a znova. Modály aj nové navigácie po stránkach tam zvyšujú trenie, pretože prerušujú tok alebo nútia používateľov zhromažďovať chýbajúce údaje medzi všetkými rôznymi kartami alebo zobrazeniami. Používatelia príliš často končia s nefunkčným zážitkom, plným nekonečných potvrdení, prehnaných varovaní, podrobných pokynov alebo len chýbajúcich referenčných bodov. Ako spomenul Saulius Stebulis, v týchto scenároch často fungujú lepšie rozšíriteľné sekcie alebo úpravy na mieste – udržujú úlohu ukotvenú na aktuálnej obrazovke. V praxi v mnohých scenároch používatelia nedokončia svoje úlohy izolovane. Potrebujú vyhľadať údaje, skopírovať a prilepiť hodnoty, spresniť záznamy na rôznych miestach alebo len prezerať podobné záznamy, keď vykonávajú svoje úlohy. Prekrytia a zásuvky sú užitočnejšie pri udržiavaní prístupu k údajom na pozadí počas úlohy. Výsledkom je, že kontext vždy zostane na svojom mieste a je k dispozícii pre referenciu alebo kopírovanie a prilepenie. Uložte si modály a navigáciu po stránkach pre chvíle, kedy prerušenie skutočne pridáva hodnotu – najmä aby ste predišli kritickým chybám. Modály vs. Stránky: strom rozhodovania Pred chvíľou Ryan Neufeld zostavil veľmi užitočnú príručku, ktorá pomôže dizajnérom vybrať si medzi modálmi a stránkami. Dodáva sa s praktickým cheatsheetom PNG a šablónou dokumentu Google s otázkami rozdelenými do 7 sekcií. Je to zdĺhavé, veľmi dôkladné, ale veľmi jednoduché na dodržiavanie:
Môže to vyzerať skľučujúco, ale je to celkom jednoduchý 4-krokový proces:
Kontext obrazovky. Najprv skontrolujeme, či používatelia potrebujú zachovať kontext základnej obrazovky. Zložitosť a trvanie úlohy. Jednoduchšie, sústredené a nerozptyľujúce úlohy by mohli využívať modálne, ale dlhé a zložité toky potrebujú stránku. Odkaz na podkladovú stránku. Potom skontrolujeme, či používatelia často potrebujú odkazovať na údaje na pozadí alebo či je úlohou jednoduché potvrdenie alebo výber. Výber správneho prekrytia. Nakoniec, ak je prekrytie skutočne dobrou voľbou, vedie nás k výberu medzi modálnym alebo nemodálnym (sklonom k nemodálnemu).
Zabaliť sa Vždy, keď je to možné, vyhnite sa blokovaniu celého používateľského rozhrania. Majú plávajúce dialógové okno, ktoré čiastočne pokrýva používateľské rozhranie, ale umožňuje navigáciu, posúvanie a kopírovanie. Alebo ukážte obsah modalu ako bočnú zásuvku. Alebo namiesto toho použite vertikálnu harmoniku. Alebo priveďte používateľov na samostatnú stránku, ak potrebujete zobraziť veľa detailov. Ak však chcete zvýšiť efektivitu a rýchlosť používateľov, vyhnite sa modálom za každú cenu. Použite ich na spomalenie používateľov, na zviazanie ich pozornosti a na predchádzanie chybám. Ako poznamenala Therese Fessendenová, nikto nemá rád prerušenie, ale ak musíte, uistite sa, že to stojí za to. Zoznámte sa s „vzormi dizajnu inteligentného rozhrania“ Celú sekciu o modáloch a alternatívach nájdete v Smart Interface Design Patterns, našom 15-hodinovom video kurze so 100 stovkami praktických príkladov z projektov zo skutočného života — so živým UX školením koncom tohto roka. Všetko od mega rozbaľovacích zoznamov až po zložité podnikové tabuľky – s 5 novými segmentmi pridávanými každý rok. Prejdite na bezplatnú ukážku. Použite kód BIRDIE a ušetrite 15% zľavu. Zoznámte sa so vzormi dizajnu inteligentného rozhrania, naším video kurzom o dizajne rozhrania a UX.
Video + školenie UX IbavideoVideo + školenie UX 495,00 USD 699,00 USD
Získajte video + školenie UX 25 video lekcií (15 hodín) + školenie UX naživo. 100-dňová záruka vrátenia peňazí. Iba video 300,00 $ 395,00 $
Získajte video kurz 40 video lekcií (15 hodín). Aktualizované ročne. K dispozícii aj ako balík UX s 2 videokurzmi.
Užitočné zdroje
Rôzne typy vyskakovacích okien, Anna Kaley Best Practices for Designing UI Modals od Uxcel Používame príliš veľa prekliatych modálov: Pokyny pre UX od Adriana Eggera Modálne a nemodálne dialógy, Therese Fessenden Moderný dizajn podnikového používateľského rozhrania: Modálne dialógy od Jamesa Jacobsa Modály v konštrukčných systémoch
