Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-03-160 komment

Hogyan tervezz rádió-gombokat a weboldaladra?

Apróságnak tűnhet a kérdés, de rádió-gombokkal mindenhol találkozol a weben és a mobilos alkalmazásokban. Ezek segítenek a felhasználóknak beállításoknál, az online űrlapoknál vagy akár egy pizzarendelésnél. Rádió-gombok révén a felület könnyebben használható, jobban hozzáférhető lehet, a felhasználói élmény pedig javul. Sok design tehát nincs meg nélkülük. De mire kell figyelni a tervezésüknél?

Érdemes azzal kezdeni, hogy nem minden esetben van szükség rádió-gombok alkalmazására, vagyis vannak olyan helyzetek, amikor célszerű elkerülni őket. Ezzel hamarosan foglalkozunk is, de induljunk el onnan, hogy

mi is az a rádió-gomb?

A rádió gomb egy döntést realizáló elem a webdesignban, melynek révén a felhasználó kiválaszthat a lehetőségek sorából egyetlen opciót. Általában egy kis körként jelenik meg az opció leírása előtt, melyben – ha kiválasztásra kerül az opció – egy fekete pont jelenik meg.

A rádió-gombnak két állapota van: bekapcsolt vagy kikapcsolt. A felhasználó választ a listában felsorolt lehetőségek közül annak érdekében, hogy tovább tudjon haladni a célja felé a webodlalon vagy mobil applikációban.

Mikor érdemes használni?

Rádió-gombokat általában akkor vetnek be a designerek, amikor a felhasználó számára egy űrlapot, kérdőívet kell kitölteni, esetleg valamiféle beállításokat eszközölni. Használni olyan esetekben kellene őket, amikor egy listában folyamatosan látható módon kettő vagy több lehetőség található, és ezek közül kell választania a felhasználónak. Például, amikor szeretnéd hangsúlyozni az emberek számára az összes elérhető opció meglétét – a teljes lista szem elé helyezésével -, vagy azt akarod, hogy gyorsan áttekintsék valamennyi lehetőséget.

A rádió-gombok használatának számtalan indoka lehet más beviteli módokkal szemben:

  • Elkerülheted általa a pontatlan vagy hiányos információk megadását. Amikor ugyanis egy űrlap kitöltésére kerül sor, akkor ott hibázhatnak az emberek. Ezeket a hibákat nehéz még azelőtt kiszűrni, hogy az űrlap elküldésre kerülne. Ugyanakkor egy rádió-gombbal történő adatbevitelnél előre meghatározott opciók közül kell választani, vagyis sokkal kisebb az esély a hibára.
  • A rádió-gombok gyors és azonnal hozzáférést engednek a listában szereplő opciókhoz.
  • Csökkentik a kognitív terhelést és az elvesztegetett időt, különösen azon felhasználók számára, akiknek problémát okoz akár egy lenyíló menüből történő választás is.

Mikor ne használd?

Nem a rádió-gomb az egyetlen lehetőség, amellyel opciók közül választani lehet egy weboldalon vagy applikációban. Lehetnek helyzetek, amikor a más módon megjelenített listák előnyösebbek.

Az egyik alternatívát a lenyíló menük jelentik. Például abban az esetben, ha nagyon nagy számú választási lehetőséget kell megmutatni a felhasználóknak. A UX Movement szerint 5 opció felett már érdemesebb lenyílót használni, elsősorban azért, mert így kevesebb helyet foglal el. Sőt, ha nagyon sok a választási lehetőség, akkor célszerű lehet egy keresőmezővel is kiegészíteni a lenyílót.

Checkboxokat akkor érdemes használni, amikor nem csak egyetlen opciót választhat a felhasználó egy listából, hanem többet. Hiszen minden egyes chechbox független a lista többi részétől. Abban az esetben is checkboxot lehet használni, amikor csak két lehetőség (igaz vagy hamis) közül lehet választani.

Hogyan tervezd meg a rádió-gombos listát?

1. Legyen egyszerű és jól illeszkedjen a designba

Mint a webdesignban mindenhol, az egyszerűség ebben az esetben is követendő elv. Hiszen a vizuális zűrzavar és a felesleges elemek csak fárasztják az embereket. Vagyis, amikor rádió-gomb tervezésére kerül a sor, akkor gondold át, hogy miként tudod csökkenteni a felhasználók kognitív terhelését.

A használhatóság érdekében vedd fontolóra azt is, hogy a listád elrendezése elég logikus-e. Jakob Nielsen azt tanácsolja (https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/), hogy egy rádiógombos lista mindig függőleges elrendezésű legyen, és minden opció egy új sorba kerüljön. Ez sokat javít az olvashatóságon.

2. Mindig legyen egy lehetőség alapértelmezetten kiválasztva!

Nick Babich szerint a felhasználónak mindig legyen lehetősége arra, hogy visszavonja egy lépését. Amikor rádió-gombokról van szó, akkor ez azt jelenti, hogy az alapértelmezett beállítás révén vissza tud lépni az eredeti oldalbeállításokhoz, és előlről kezdeni a folyamatot. Ezáltal egy űrlap kitöltése könnyebbé és gyorsabbá válik, és kevesebb lépés megtételére lesz szükség a felhasználók részéről. Értelemszerűen az alapértelmezett helyzet az legyen, melyet a leggyakrabban választanak ki a felhasználók.

3. Ne tekintsd őket akció-gomboknak!

A rádió gombok arra szolgálnak, hogy a beállításokon változtassanak általa a felhasználók. Ugyanakkor nem akció-gombok. Ha egy rádió-gombbal történő választás valamilyen azonnali változást eredményez, az megzavarja az embereket, ezáltal hosszabbá válik a számukra a feladat elvégzése.

Tehát, ha a felhasználó meghozott egy döntést, és kattintott a megfelelő opció rádió-gombjára, akkor még szükség van arra is, hogy kattintson egy parancs-gombra is, és csak ez által élesednek végül a kívánt változások. Ez azt jelenti, hogy pusztán a kiválasztással még nem szabad életbe lépnie a változásnak. Valahogy így:

Rádió-gomb a gyakorlatban

(A bejegyzés a Prototypr cikke alapján készült.)

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.