Pravděpodobně jste tam již byli. Jak si vybereme mezi zobrazením modálu uživatelům a kdy je přejdeme na samostatnou novou stránku? A záleží na tom vůbec? Vlastně ano. Rozhodnutí ovlivňuje tok uživatelů, jejich kontext, jejich schopnost vyhledávat podrobnosti a tím i četnost chyb a dokončení úkolů. Obě možnosti mohou být rušivé a frustrující – ve špatný čas a na špatném místě. Tak to raději uvedeme na pravou míru. No, podívejme se, jak to udělat. Modály vs. Dialogy vs. překryvné vrstvy vs. Lightboxy I když často mluvíme o jediné modální komponentě uživatelského rozhraní, často ignorujeme jemné, složité nuance mezi všemi různými typy modalů. Ve skutečnosti není každý modal stejný. Modály, dialogy, překryvy a lightboxy – všechny znějí podobně, ale ve skutečnosti jsou zcela odlišné:
Dialog Obecný termín pro „konverzaci“ (uživatel ↔ systém). Překrytí Malý panel obsahu zobrazený v horní části stránky. ModalUser musí interagovat s překrytím + pozadím deaktivovaným. NonmodalUser musí interagovat s překrytím + povoleným pozadím. LightboxDimmed pozadí pro soustředění pozornosti na modal.
Jak zdůrazňuje Anna Kaley, většina překryvných vrstev se objevuje ve špatnou dobu, ruší uživatele při kritických úlohách, používají špatný jazyk a narušují tok uživatelů. Jsou od přírody rušivé a obvykle s vysokou úrovní závažnosti, aniž by to bylo nutné.
Uživatelé musí být jistě zpomaleni a přerušeni, pokud mají důsledky jejich akce velký dopad, ale pro většinu scénářů jsou nemodální verze mnohem jemnější a přátelštější možností, jak uživatele na něco upozornit. Pokud něco, vždy navrhuji, aby to bylo výchozí. Modály → Pro samostatné, samostatné úlohy Jako designéři často modality odmítáme jako irelevantní a otravné – a často jsou! — přesto mají také svou hodnotu. Mohou být velmi užitečné, když upozorní uživatele na možné chyby nebo jim pomohou vyhnout se ztrátě dat. Mohou také pomoci provádět související akce nebo procházet detaily, aniž by došlo k přerušení aktuálního stavu stránky. Ale největší výhodou modálů je, že pomáhají uživatelům udržet kontext aktuální obrazovky. Neznamená to jen uživatelské rozhraní, ale také upravený vstup, pozici rolování, stav akordeonů, výběr filtrů, řazení a tak dále.
Někdy uživatelé potřebují rychle potvrdit výběr (např. filtry, jak je uvedeno výše) a poté okamžitě pokračovat odtamtud. Automatické ukládání může samozřejmě dosáhnout stejného, ale není to vždy potřeba nebo žádoucí. A blokování uživatelského rozhraní často není dobrý nápad. Modály se však nepoužívají pro žádné úkoly. Obvykle je používáme pro jednotlivé samostatné úkoly, do kterých by uživatelé měli skočit, dokončit úkol a pak se vrátit tam, kde byli. Není překvapením, že fungují dobře pro krátké interakce s vysokou prioritou (např. upozornění, destruktivní akce, rychlá potvrzení). Když modály pomáhají: 🚫 Modály jsou často rušivé, invazivní a matoucí.🚫 Ztěžují porovnávání a kopírování a vkládání.✅ Modály však uživatelům umožňují udržovat více kontextů.✅ Užitečné k prevenci nevratných chyb a ztrátě dat.✅ Užitečné, pokud by odesílání uživatelů na novou stránku bylo rušivé. ✅ Zobrazit modal pouze v případě, že uživatelé ocení narušení.✅ Ve výchozím nastavení preferujte neblokující dialogy („nemodální“).✅ Umožněte uživatelům minimalizovat, skrýt nebo obnovit dialog později.✅ Použijte modal ke zpomalení uživatelů, např. ověření složitého vstupu.✅ Uvolněte cestu pomocí „Zavřít“, klávesy ESC nebo kliknutím mimo rámeček. Stránky → Pro komplexní, vícekrokové pracovní postupy Průvodci nebo navigace na kartách v rámci modalů nefungují příliš dobře, a to ani ve složitých podnikových produktech – tam boční panely nebo zásuvky obvykle fungují lépe. Problémy začnou, když uživatelé potřebují porovnat nebo odkazovat na datové body – modály však toto chování blokují, takže místo toho znovu otevřou stejnou stránku na více kartách.
Pro složitější toky a vícekrokové procesy nejlépe fungují samostatné stránky. Stránky také fungují lépe, když vyžadují plnou pozornost uživatele, a odkaz na předchozí obrazovku není příliš užitečný. A šuplíky fungují pro dílčí úkoly, které jsou příliš složité pro jednoduchý modal, ale nepotřebují úplnou navigaci po stránce. Kdy se vyhnout modálům: 🚫 Vyhněte se modálním chybovým zprávám.🚫 Vyhněte se modálním upozorněním o funkcích.🚫 Vyhněte se modálním funkcím pro zážitek z registrace.🚫 Vyhněte se modálům pro složité a zdlouhavé úkoly s více kroky.🚫 Vyhněte se více vnořeným modálům a místo nich použijte předchozí/následující.🚫 Vyhněte se automaticky spouštěným modám, pokud to není nezbytně nutné. Vyhněte se obojímuPro opakované úkoly V mnoha složitých produktech náročných na úkoly uživatelé zjistí, že provádějí stejné úkoly opakovaně, znovu a znovu. Zde modály i nové navigace po stránkách zvyšují tření, protože přerušují tok nebo nutí uživatele shromažďovat chybějící data mezi všemi různými kartami nebo zobrazeními. Příliš často uživatelé končí s nefunkčními zkušenostmi, plnými nekonečných potvrzení, přehnaných varování, podrobných pokynů nebo jen chybějících referenčních bodů. Jak zmínil Saulius Stebulis, v těchto scénářích často lépe fungují rozšiřitelné sekce nebo úpravy na místě – udržují úlohu ukotvenou na aktuální obrazovce. V praxi v mnoha scénářích uživatelé nedokončí své úkoly izolovaně. Potřebují vyhledávat data, kopírovat a vkládat hodnoty, upřesňovat záznamy na různých místech nebo jen prohlížet podobné záznamy, když pracují na svých úkolech. Překryvy a zásuvky jsou užitečnější při zachování přístupu k datům na pozadí během úlohy. Výsledkem je, že kontext vždy zůstane na svém místě a je k dispozici pro referenci nebo kopírování a vkládání. Ušetřete modály a navigaci po stránkách pro chvíle, kdy přerušení skutečně přidává hodnotu – zejména abyste předešli kritickým chybám. Modály vs. Stránky: Rozhodovací strom Před chvílí sestavil Ryan Neufeld velmi užitečnou příručku, která návrhářům pomůže vybrat mezi modály a stránkami. Dodává se s praktickým cheatsheetem PNG a šablonou dokumentu Google s otázkami rozdělenými do 7 sekcí. Je zdlouhavý, velmi podrobný, ale velmi snadno sledovatelný:
Může to vypadat skličující, ale je to docela jednoduchý proces ve 4 krocích:
Kontext obrazovky. Nejprve zkontrolujeme, zda uživatelé potřebují zachovat kontext základní obrazovky. Složitost a trvání úkolu. Jednodušší, soustředěné a nerozptylující úkoly by mohly používat modální, ale dlouhé a složité toky potřebují stránku. Odkaz na podkladovou stránku. Poté zkontrolujeme, zda uživatelé často potřebují odkazovat na data na pozadí nebo zda je úkolem jednoduché potvrzení nebo výběr. Výběr správného překrytí. Pokud je překryv skutečně dobrou volbou, vede nás k výběru mezi modálním nebo nemodálním (sklon k nemodálnímu).
Zabalit se Kdykoli je to možné, vyhněte se blokování celého uživatelského rozhraní. Mějte plovoucí dialogové okno, které částečně zakrývá uživatelské rozhraní, ale umožňuje navigaci, posouvání a vkládání kopírování. Nebo ukázat obsah modalu jako boční zásuvku. Nebo místo toho použijte vertikální akordeon. Nebo přiveďte uživatele na samostatnou stránku, pokud potřebujete ukázat hodně detailů. Pokud však chcete zvýšit efektivitu a rychlost uživatelů, vyhněte se modalům za každou cenu. Použijte je ke zpomalení uživatelů, k soustředění jejich pozornosti, k prevenci chyb. Jak poznamenala Therese Fessenden, nikdo nemá rád, když je někdo vyrušován, ale pokud musíte, ujistěte se, že to za to stojí. Seznamte se s „návrhovými vzory chytrého rozhraní“ Celou sekci o modálech a alternativách najdete v Smart Interface Design Patterns, našem 15hodinovém videokurzu se stovkami praktických příkladů ze skutečných projektů — s živým školením UX koncem tohoto roku. Vše od velkých rozbalovacích nabídek až po složité podnikové tabulky – každý rok přibývá 5 nových segmentů. Přejít na bezplatný náhled. Použijte kód BIRDIE a ušetřete 15% slevu. Seznamte se s našimi vzory návrhů rozhraní Smart Interface Design Patterns, naším video kurzem o designu rozhraní a UX.
Video + školení UX PouzevideoVideo + školení UX $ 495,00 $ 699,00
Získejte video + školení UX 25 videolekcí (15 hodin) + živé školení UX. 100denní záruka vrácení peněz. Pouze video 300,00 $ 395,00 $
Získejte videokurz40 videolekcí (15h). Aktualizováno ročně. K dispozici také jako balíček UX se 2 video kurzy.
Užitečné zdroje
Různé typy vyskakovacích oken, Anna Kaley Best Practices for Designing UI Modals od Uxcel Používáme příliš mnoho zatracených modalů: Pokyny pro UX, Adrian Egger Modální a nemodální dialogy, Therese Fessenden Moderní podnikový design uživatelského rozhraní: Modální dialogy, James Jacobs Modály v konstrukčních systémech
