Gomb design
A gomb egy műveletet indító interaktív kontroll. Jó design esetén a felhasználó felismeri, hogy kattintható, érti az akció eredményét, és az állapotváltozásokból visszajelzést kap.
Röviden
A gomb egy műveletet indító interaktív kontroll. Jó design esetén a felhasználó felismeri, hogy kattintható, érti az akció eredményét, és az állapotváltozásokból visszajelzést kap.
Vizuálisan
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
Három primary gomb egymás mellett
Mentés
Mégse
Törlés
Ha minden művelet elsődleges stílust kap, egyik sem elsődleges. A felhasználó nem kap segítséget a döntéshez.
✓
HELYES IRÁNY
Egy domináns művelet, visszafogott alternatívák
Mentés
Mégse
Törlés
A fő CTA erős, a másodlagos művelet kevésbé hangsúlyos, a destruktív opció pedig elkülönül.
Mit jelent a gomb design?
A gomb egy műveletet indító interaktív kontroll. Jó design esetén a felhasználó felismeri, hogy kattintható, érti az akció eredményét, és az állapotváltozásokból visszajelzést kap.
A gombok gyakran a legfontosabb konverziós és feladatbefejező pontok. A rossz címke, gyenge hierarchia vagy hiányzó állapot közvetlenül növeli a bizonytalanságot.
A legfontosabb alapelvek
- Akciót leíró címke: „Mentés”, „Foglalás”, „Fizetés”.
- Primary gombból kevés legyen egy nézetben.
- Hover, focus, pressed, loading és disabled állapot.
- Megfelelő kattintható terület.
Gyakorlati példa
A „Tovább” gomb helyett a „Tovább a fizetéshez” pontosabban megmondja, mi következik. Fizetés közben loading állapot akadályozhatja a többszöri beküldést.
Default, hover, focus, loading és disabled
Default
Hover
Focus
Disabled
Gyakori hibák
- „OK” és „Küldés” túl általános címkék.
- Csak színnel különböző danger action.
- Disabled gomb magyarázat nélkül.
- Két egyformán erős primary CTA egymás mellett.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A gomb design 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 gomb design?
A gombok gyakran a legfontosabb konverziós és feladatbefejező pontok. A rossz címke, gyenge hierarchia vagy hiányzó állapot közvetlenül növeli a bizonytalanságot.
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.