Modal és dialog UX
A modal vagy dialog a fő felület fölött megjelenő, fókuszált interakciós réteg. Akkor indokolt, ha a felhasználónak egy rövid, kontextushoz kötött döntést vagy feladatot kell elvégeznie, mielőtt visszatér.
Röviden
A modal vagy dialog a fő felület fölött megjelenő, fókuszált interakciós réteg. Akkor indokolt, ha a felhasználónak egy rövid, kontextushoz kötött döntést vagy feladatot kell elvégeznie, mielőtt visszatér.
Vizuálisan
A modalnak egyetlen fókuszált döntést kell kiszolgálnia
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
Teljes mini-oldal a modalban
Projekt beállítások
Név
Projekt neve
Tulajdonos
Bence
Mentés
Export
Törlés
Túl sok mező, link és másodlagos művelet mellett a modal elveszíti fókuszát, és nehézzé válik bezárni vagy értelmezni.
✓
HELYES IRÁNY
Rövid döntés, egyértelmű kilépéssel
Törlöd ezt a projektet?
A művelet nem vonható vissza.
Mégse
Törlés
A dialog egy feladatot kér, világos címmel, következménnyel, primary és cancel művelettel.
Mit jelent a modal és dialog ux?
A modal vagy dialog a fő felület fölött megjelenő, fókuszált interakciós réteg. Akkor indokolt, ha a felhasználónak egy rövid, kontextushoz kötött döntést vagy feladatot kell elvégeznie, mielőtt visszatér.
A modal megszakítja az aktuális munkafolyamatot, ezért erős eszköz. Túlhasználva frusztráló, accessibility szempontból pedig megfelelő fókuszkezelést igényel.
A legfontosabb alapelvek
- Világos cím és cél.
- Könnyű bezárhatóság, ha nem kötelező.
- Fókusz kerüljön a dialogba és térjen vissza bezáráskor.
- Háttér tartalom ne legyen véletlenül interaktív.
Gyakorlati példa
Törlés megerősítésénél a dialog megnevezheti a törlendő elemet és külön danger CTA-t adhat. Egyszerű információhoz azonban gyakran jobb inline megoldás.
Fókuszált döntés a háttér fölött
Törlöd ezt az elemet?
A művelet nem vonható vissza.
Mégse
Törlés
Gyakori hibák
- Minden értesítést modalban mutatni.
- Escape bezárás hiánya, amikor lenne értelme.
- Fókusz a háttérbe szökik.
- Modalból modalt nyitni.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A modal és dialog ux akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Mit figyelj használat közben?
Interaktív komponenseknél ne csak a nyugalmi állapotot ellenőrizd. Menj végig keyboarddal, kattints gyorsan kétszer, válts lassú hálózatra, idézz elő hibát, próbálj hiányos adatot beküldeni, és nézd meg, mit lát a felhasználó minden köztes állapotban.
Sok UX hiba nem a default képernyőn, hanem állapotváltáskor jelenik meg: eltűnik a bevitt adat, nincs loading visszajelzés, két submit indul, a hiba nem a megfelelő mezőnél látszik vagy a modal bezárása után elveszik a fókusz.
- minden akció kap-e azonnali visszajelzést
- hiba után megmarad-e a felhasználó munkája
- keyboard és touch használatnál is ugyanaz a funkció érhető-e el
Gyakori kérdések
Miért fontos a modal és dialog ux?
A modal megszakítja az aktuális munkafolyamatot, ezért erős eszköz. Túlhasználva frusztráló, accessibility szempontból pedig megfelelő fókuszkezelést igényel.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.
Források és további olvasnivaló
Az accessibility és usability állításoknál elsődleges szabványokra és bevett szakmai forrásokra támaszkodj; a konkrét interface-döntéseket pedig mindig a saját felhasználói kontextusodban teszteld.