VigO Logo

Modální dialogy

Modální dialogy

Klíčové vlastnosti modálních dialogů

  • Přerušení toku: Modální dialog se zobrazí nad veškerým ostatním obsahem stránky nebo obrazovky a zablokuje interakci s pozadím. To znamená, že uživatel nemůže kliknout na nic jiného v aplikaci, dokud s dialogem nepracuje.
  • Vyžadují akci uživatele: Dialog se nezavře, dokud uživatel neprovede požadovanou akci. Tato akce může být buď zadání nějakého vstupu (např. vyplnění pole), nebo potvrzení či odmítnutí (např. kliknutí na "Potvrdit" nebo "Zrušit").

UX Writing

Text v modálním dialogu musí být maximálně jasný, stručný a jednoznačný. Uživatel by měl okamžitě pochopit, proč se dialog objevil a jaké má možnosti.

PrvekJak psát✅ Správně❌ Špatně
NadpisStručný a výstižný nadpis, který shrnuje účel dialogu."Potvrdit smazání smlouvy" , "Nový kontakt" , "Relace vypršela" , "Nahrát přílohy""Upozornění" , "Pop-up" , "Info" – tyto nadpisy nejsou konkrétní.
Kontextový textVysvětlení, co se děje a proč se dialog zobrazil. Buďte empatičtí a nápomocní."Opravdu chcete smazat smlouvu s číslem 12345? Tato akce je nevratná a data nebudou možné obnovit." , "Pro přidání klienta je nutné vyplnit povinné údaje. Jste si jisti, že chcete opustit formulář?""Chyba. Data se ztratí." – nulový kontext, obviňující tón.
Tlačítka s akčními slovesyText na tlačítkách by měl přesně popisovat, co se stane po kliknutí. Prioritní akce by měla být vizuálně zvýrazněna (např. primární barvou, tučným písmem)."Smazat smlouvu" , "Zrušit" , "Potvrdit" , "Zpět" , "Přihlásit se" , "Kontaktovat podporu". Prioritní akce by měla být vizuálně zvýrazněna (např. primární barvou, tučným písmem)."OK" , "Ano" , "Ne" , "Pokračovat" – tyto výrazy jsou nejednoznačné a v kontextu modálu mohou vést k chybám. Uživatel by neměl muset přemýšlet, co "OK" v dané situaci znamená.

Příklady úprav (Transformace textů)

Při psaní modálů se vyhýbejte internímu slangovému nebo příliš technickému vyjadřování. Uživatel v pojišťovnictví často řeší situace, které mohou být stresující. Text musí jít uživateli naproti – musí být lidský, jasný a srozumitelný.

Níže uvádíme 3 příklady transformace byrokratického jazyka do přátelské uživatelský přívětivé podoby .

1. Scénář: Uživateli neprošla online platba za prodloužení autopojištění kvůli chybě na straně banky nebo špatně zadaným údajům.

Prvek❌ Původní verze (Technická / Byrokratická)✅ Nová verze (Friendly / Srozumitelná)
NadpisSelhání validace transakcePlatba pojistného neprošla
ObsahSystém nedetekoval úhradu dlužné částky u smlouvy č. 987654321 v řádném termínu z důvodu zamítnutí autorizační brány. Akce stornována.Nepodařilo se nám zpracovat platbu pro smlouvu povinného ručení č. 987654321. Zkontrolujte prosím zůstatek na kartě nebo limity a zkuste to znovu.
TlačítkaZavřítZkusit zaplatit znovu / Zaplatit převodem

2. Scénář: Uživatel mění v klientském portálu trvalou adresu a systém ho upozorňuje na to, kam všude se změna propíše.

Prvek❌ Původní verze (Technická / Byrokratická)✅ Nová verze (Friendly / Srozumitelná)
NadpisModifikace identifikačních údajů subjektuZměnit trvalou adresu?
ObsahInicializován požadavek na změnu adresy trvalého pobytu. Potvrzením akce dojde k přepsání dat v databázi core systému u všech aktivních pojistných produktů.Novou adresu automaticky upravíme ve všech vašich stávajících smlouvách. Zelenou kartu i důležité dokumenty vám tak budeme posílat na správné místo.
TlačítkaAno / NeUložit novou adresu / Zpět k úpravám

3. Scénář: Uživatel chce k životnímu pojištění přidat rizikový sport, ale vybraný balíček se vylučuje s jeho stávajícím připojištěním.

Prvek❌ Původní verze (Technická / Byrokratická)✅ Nová verze (Friendly / Srozumitelná)
NadpisKonflikt konfigurace pojištěníNové připojištění nahradí to stávající
ObsahPozor: Došlo k dekonfiguraci stávajícího balíčku připojištění z důvodu nekompatibility s nově navoleným rizikem v rámci modelace. Pokračovat?Přidáním "Rizikových sportů" automaticky zrušíte své současné "Připojištění na poškrábání brýlí". Tyto dva balíčky nelze v jedné smlouvě kombinovat.
TlačítkaPokračovat / StornoZměnit a nahradit / Ponechat původní pojištění

Jaký typ modálního dialogu zvolit

Volba modálního dialogu
Modals | VIGo Design System