Modální dialogy

Modální dialog je prvek uživatelského rozhraní, který přeruší aktuální práci uživatele a vyžaduje jeho okamžitou akci.

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.

Prvek	Jak psát	✅ Správně	❌ Špatně
Nadpis	Struč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ý text	Vysvě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 slovesy	Text 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á.

Jaký typ modálního dialogu zvolit