Webshark Blog

Az interakciók tervezése során a gombok a leggyakrabban használt elemek. Ezért nagyon egyszerűnek tűnhet bárki számára egy gomb megjelenítése, megtervezése. Valójában azonban számtalan olyan részlet van, melyet fontolóra kell venni, ha valóban hatékony gombot akarsz elhelyezni a weboldaladon.  (Frissítés, 2022.12.06. – Bővítettük ezt a fejezetet: Hogyan tervezz rádió-gombokat a weboldaladra?)

A gondos tervezés azért is fontos, mert egy gomb sokszor kapcsolódik a CTA-hoz, vagyis magára a konverzióra ennek segítségével kerül sor. Ha nem sikerül a kialakítása, akkor közvetlenül rontja a weboldal eredményeit. Lássuk tehát az alapokat!

Mitől hatékony egy gomb?

Egy hatékony gombnak jeleznie kell magáról, hogy gombként funkcionál, a felhasználónak pedig tudnia kell, hogy mit várhat a gombtól. A hatékony gomb mindig tájékoztatja a felhasználót arról, hogy mi fog történni, amikor kapcsolatba lép vele. Emellett jeleznie kell a gombnak a saját fontosságát is.

Egy gomb tehát akkor tekinthető hatékonynak, ha

1. a felhasználó egyértelműen meg tudja állapítani róla, hogy gombról van szó
2. a felhasználó könnyen megérti a gomb célját
3. a felhasználó tudja, hogy mire számíthat a gombtól

Hogyan épül fel egy gomb?

Mielőtt belevágnál egy gomb megtervezésébe meg kell értened, hogy miként is épül fel. Amennyiben a gombon ikon is megjelenik, akkor az a balról jobbra történő olvasás miatt a bal oldalra kerül.

Frissítés, 2022.10.26.:

A gombok 4 típusa

Általában minden felület egynél több típusú gombot tartalmaz a jobb felhasználói élmény érdekében. A különböző típusú gombok például segítenek a felhasználóknak abban, hogy megkülönböztessék a fontosat a kevésbé fontostól azzal, hogy jobban vagy kevésbé hívják magukra a figyelmet.

Habár elsőre sokaknak úgy tűnhet, hogy rengeteg gombstílussal lehet találkozni a weboldalakon és az applikációkban, ezek alapvetően csak néhány típusba sorolhatók. És itt most nem arról van szó, hogy léteznek például váltógombok vagy rádiógombok, hanem az egyszerű kattintható vagy érinthető gombok esztétikájáról, illetve, hogy ezek jellemzően milyen kontextusban jelenhetnek meg.

A normál gomb

Ez az alapvető gombtípus, melynek keretét teljes kitölti a gomb színe, csak a szöveg jelenik meg rajta. Mivel kattintható elemről van szó, így ezek sokszor figyelemfelkeltő színt kapnak, így tökéletes választást jelentenek az elsődleges CTA megjelenítéséhez.

Ezt a típusú gombot akkor érdemes használni, ha szeretnénk rávenni a felhasználót egy konkrét cselekvés elvégzésére. Szövegként kerülhet bele „letöltöm”, „feliratkozom” és hasonló szavak.

Érdemes figyelni arra, hogy a gomb nincs mindig aktív állapotban. Amikor nem kattintható a gomb, akkor eltérő vizuális megjelenést kell neki adni, például szürke színt kaphat a gomb és a benne lévő szöveg is.

A formát tekintve két alapvető megoldásról beszélhetünk:

• lekerekített sarok
• szögletes sarok

Hogy melyiket választjuk, a weboldal vagy applikáció vizuális designja határozza meg. Tehát, ha az egyes elemek szögletesek, akkor a gombnak is olyannak kellene lennie.

Ami még fontos, hogy kattintás esetén a gomb visszajelzést adjon a felhasználónak arról, hogy kattintott.

Szellemgomb

A szellemgomb annyiban különbözik a színnel kitöltött gombtól, hogy nincs benne szín, csak a keret jelenik meg. A szellemgomb alapvetően egy másodlagos gomb, ami alternatívát kínál az elsődleges gombhoz képest. Emellett használható olyan esetben is, ha a gombbal nem akarjuk megzavarni a felhasználót. Ezzel azt használjuk ki, hogy kisebb a vizuális súlya, mint a normál gombnak, így a felületet kevésbé terheli.

Ikon-gomb

Az ikon-gomb egy olyan gomb, mely nem kap szöveget, csak egy ikon jelenik meg benne. Fő előnye, hogy kis helyet foglal, így jó lehetőség menükben vagy rendszersávokon a sok funkció kis területen való megjelenítésére.

Itt elsősorban az a fontos, hogy az ikonok jelentését értsék a felhasználók. Ha a felhasználók nem értik az ikonokat, akkor nem mernek majd kattintani. Ezért szokták a designerek olykor azt mondani, hogy a legjobb ikon a szöveg. Segít az is, ha tooltipként, hoverrel jelenik meg az ikon-gomb leírása, mert így tájékoztatást ad a felhasználónak a funkciójáról.

Lebegő akciógomb

A lebegő akciógombokat a Google tette népszerűvé a material designnal. Ezek ikon-gombok némi árnyékkal, és általában a kijelző jobb alsó sarkában jelennek meg. Elsődleges CTA-ként jelenik meg mobilalkalmazásokban (desktopon is használható, de mivel ott elég nagy a tér, nincs sok értelme), és általában egyetlen cselekvés elvégzésére alkalmas. Habár találkozhatunk olyan alkalmazásokkal, ahol a lebegő akciógomb több funkciót is kap, ezt jobb elkerülni, mert túl bonyolulttá válik a felület.

Itt megint csak arra kell figyelni, hogy az ikon jelentése egyértelmű legyen a felhasználók számára, különösen azért, mert az elsődleges cselekvést lehet általa megtenni. Ha a felhasználók nem értik az ikon jelentését, nem fognak kattintani.

A gomboknak 5 állapota van

A gomboknak tehát vizuális vagy hangjelzést kell adnia különböző állapotairól. A jól megtervezett gomb megváltoztatja állapotát a felhasználói interakciónak megfelelően. Egy rossz gomb félre tudja vezetni a felhasználó. Melyek ezek az állapotok?

• Normál,
• hover,
• lenyomott,
• fókuszált,
• nem aktív.

A vizuális jelzések által ezeknek az állapotoknak határozottan elkülöníthetőnek kell lenniük.

Milyen tipikus helyzetekben jelenhetnek meg a gombok?

Elsődleges és másodlagos gombok űrlapoknál

Gyakran előfordul egy weboldalon, hogy nem csak egy gombra van szükség, hanem kettőre. Ilyenkor van egy elsődleges fomb, mely a fő cselekvést teszi lehetővé az oldalon, például egy űrlap elküldését vagy egy megrendelést egy webáruházban. Ugyanakkor megjelenik mellette más funkciójú gomb is, melynek vizuálisan is el kell különülnie.

Ha elsődleges és másodlagos gombok is megjelenítésre kerülnek egy weboldalon vagy applikációban, akkor

• vizuálisan jól megkülönböztethetőnek kell lenniük
• az elsődleges gombnak határozottan el kell különülnie megjelenésében a weboldal más elemeitől.

Gombok a párbeszédablakokban

Egy párbeszédpanel kérdéseket fogalmaz meg a felhasználónak, majd hagyja őket valamilyen parancsot adni. Az alapvető megoldás az Ok és a Törlés gomb, melyeknek sorrendjét tekintve nincs egyetértés. A Windows például jobb oldalra teszi az Ok-t, míg az Apple vagy a Google balra.

Egy alkalmazásnál tehát az adott platform szabályait kell követni, ugyanakkor weboldalaknál ez nem járható út, ott azt kell figyelembe venni, hogy a legtöbb felhasználó milyen eszközt használ. Ezeknél a gomboknál is célszerű azonban az általános Oké/Nem szövegtől eltérő szöveget használni.

Mekkora az optimális kontrasztarány a gomboknál?

A kontrasztarány a gomboknál alapvetően azt fejezi ki, hogy mennyire tér el a gombon szereplő szöveg színe a gomb színétől. Emellett ugyanakkor azt is figyelembe kell venni, hogy milyen a kontraszt a háttérszín és a gombszín között, valamint ha különböző gombok (aktív-inaktív, elsődleges-másodlagos gomb) kerülnek egymás mellé, akkor ezek színe között.

A World Wide Web Consortium (W3C) által ajánlott kontrasztarány a gomb és a szöveg színének viszonyában legalább 4,5:1, kivéve a következő eseteket:

1. Amikor a szövegméret 18 pt vagy nagyobb, illetve ha 14 pt vagy nagyobb, de vastagon van szedve. Ilyenkor a kontrasztarány 3:1 lehet.
2. Inaktív gomboknál nincs követelmény a kontrasztarányra.

Ezen túl azonban, ha különböző gombok kerülnek egymás mellé, akkor fontos, hogy a kontraszt által is megjelenítsük azok hierarchiáját. Enélkül ugyanis a felhasználók nehezebben fogják kitalálni, hogy melyik az elsődleges gomb, ez pedig zavart, megtorpanást eredményez, ami a felhasználói élmény szempontjából káros.

Milyen esetekben kell figyelembe venni a gombok hierarchiájánál a kontrasztarányt? Például, amikor van egy elsődleges és egy másodlagos gombod is. Ezek stílusa is eltér persze: míg az elsődleges gomb egy teli gomb, addig a másodlagos körvonalas. Ez azonban még nem elegendő a közöttük lévő hierarchia kifejezésére, be kell vetni a megfelelő kontrasztarányt is. Ha azonos színű, de körvonalas a gomb, az még nem elég egyértelmű, ahogy az látszik a bal oldali gomboknál:

Ahhoz, hogy az elsődleges gombod elegendő figyelmet kapjon, a másodlagos gombodnál csökkenteni kell a kontrasztarányt. Ezt megteheted az árnyalat megváltoztatásával, a lényeg, hogy a csökkentett kontrasztarány is legyen elegendő a megfelelő olvashatósághoz.

Egyesek úgy próbálják kifejezni egy másodlagos gomb helyét a hierarchiában, hogy fekete színt adnak neki. Valószínűleg abból a megfontolásból, hogy a fekete egy semleges szín, így nem verseng az elsődleges gomb színével. A fekete színnek azonban jóval nagyobb lesz a kontrasztaránya, ami által mégis előtérbe tolakodik:

Ezért a fekete helyett inkább egy halványabb árnyalatot vagy világos szürkét érdemes használni másodlagos gombként. Utóbbi esetében azonban figyelni kell arra, hogy annak kontrasztaránya ne legyen nagyobb, mint az elsődleges gombé:

Mivel a szürkét nem lehet akármeddig halványítani – az olvashatóság megtartása miatt -, ezért a fő színt kell sötétebbre venni. Persze, lehet, hogy pont jól mutatna egy világos fő szín a weboldaladon, azonban ha nincs meg a megfelelő kontrasztja a háttérrel, a szöveggel és a másik gombbal, akkor használhatatlan.

Mekkora legyen egy gomb?

Ha egy gombnak nincs meg a megfelelő mérete és elhelyezése, akkor mobilos használatnál nagyon könnyen előfordul, hogy vagy nem találják el a felhasználók, vagy pedig másik gombot nyomnak meg helyette. De mekkora is legyen egy mobilos felületen megjelenő gomb? A Uxmovement most egy bejegyzésében nagyon jól érthetően lefektette az alapokat. Úgyhogy, ha még nem vagy tisztában az optimális mérettel (CSS pixelben, 96 DPI-nél) , akkor fuss neki ennek a pár bekezdésnek.

A gombméreteket tekintve kialakításra kerültek már szabványok, így nem kell a sötétben tapogatózni. Kutatások révén kiderült, hogy melyek azok a méretek és távolságok, melyek jól működnek, mivel a legtöbb felhasználó számára – beleértve az időseket is – könnyű a használatuk.

A tanulmányból kiderül, hogy egy 42 pixeles méret alatt például drámaian romlik az érintési hatékonyság. De az is kiderül, hogy 72 pixel felett ugyanígy romlik a hatékonyság. Ez tehát azt jelenti, hogy a minimális méret 42 pixel, míg a maximális 72 pixel. A legkedveltebb gombméret egyébként a 60 pixeles, de a 72 pixeles hozza a legnagyobb érintési pontosságot, és az idősebb felhasználók ezt kedvelik a legjobban.

A gomboknál ugyanakkor a fontossági sorrendet is figyelembe kell venni. Ennek megjelenítésével fogják tudni a felhasználók azt, hogy melyik gomb viszi közelebb őket a tervezett céljukhoz, és melyik zsákutca. A sorrend nagyon egyszerűen a gombméretekkel határozható meg. Nincs szükség arra, hogy önkényesen kitalálj egy méretet, majd reménykedj abban, hogy az összhangban van a felhasználói igényekkel.

A fenti ábrán látható, hogy a magas prioritású gomb mérete 72 pixeles, a közepesé 60 pixeles, míg az alacsony prioritásúé 42 pixel. Nyilván azt a gombot, melyet a a felhasználók a leggyakrabban használnak, könnyen láthatóvá és megérinthetővé kell tenni. Ezáltal gyorsabban és nagyobb hatékonysággal képesek használni. Ez különösen akkor fontos, ha a felhasználók figyelme különböző feladatok között oszlik meg.

Mekkora legyen a gombok közötti távolság?

Amikor a vizsgálat szerint a gombok túl távol estek egymástól, akkor a felhasználók sokkal lassabban értek oda a célhoz. Ugyanakkor, ha túl közel helyezkedtek egymáshoz, akkor pontatlanná vált az érintés.

A vizsgálat szerint 12-48 pixel közötti távolság az optimális a gombok között. Ezeket a távolságokat az eltérő gombméretek esetében is alkalmazhatod. A különböző távolságok különböző gombméretek esetében optimálisak:

• 12-24 pixel a nagy gomboknál
• 24-36 pixel a közepes gomboknál
• 36-48 pixel a kis gomboknál

Ez azért alakul így, mert a nagyobb gombokat akkor is könnyebben érintik meg a felhasználók, ha azok közelebb vannak egymáshoz. Ugyanakkor egy kisméretű gombnál kis távolság esetén nagy a hibázás lehetősége.

Mekkora legyen a gombon lévő szöveg?

Az előbb felsorolt szabványok vajon alkalmazhatók a szöveges gomboknál is? Igen, de alapvetően csak a gombok magasságánál vehetők figyelembe, hiszen a szélességek a szövegtől függően változhatnak.

A fenti példán látszik, hogy egy szöveges gomb, melynek a magassága 60 pixel, jóval szélesebb is lehet, mint a 60 pixeles ikonos gomb. Tulajdonképpen a szélesebb szöveges gombot jóval nagyobb hatékonysággal lehet eltalálni, mivel kisebb pontosságot igényel a művelet a nagyobb méret miatt. Ilyenkor tehát a gombok magassága az, amely meghatározza a pontosságot.

Távolságok a szöveges gomboknál

A gombtávolságra vonatkozó szabályok nem alkalmazhatók egy az egyben a szöveges gomboknál a nagyobb szélesség miatt. Ami viszont már elfogadhatónak tűnik, az az, hogy egy legalább 8 pixeles távolság már megteremti a vizuális elválasztottságot. Ugyanakkor ebben az esetben nincsenek optimális számok, inkább csak javaslatok:

Összességében tehát elmondható, hogy ha pusztán az érzéseidre hagyatkozol a gombok méreteinek és távolságainak meghatározásánál, akkor az nagy bizonytalanságot jelent. Sokkal hatékonyabb, ha a fent felsorolt méreteket alkalmazod. Gondold tehát át, hogy milyen szabványméreteket használsz általában, és a fenti szabályok alapján állítsd be ezeket a méreteket, ezáltal minden felületen jobb felhasználói élményt leszel képes elérni.

Milyen legyen a gombon szereplő szöveg?

Ha rossz szavakat használsz a gombjaidnál, akkor az megzavarja a felhasználókat, nehezebbé teszi a feladatuk végrehajtását, így az tovább fog tartani. De hogyan válasszuk ki a megfelelő kifejezéseket egy gombhoz? 5 szabályt érdemes figyelembe venni.

Használj cselekvő igéket!

A gombod szövegének cselekvésre kell ösztönöznie a felhasználókat. Amikor egy cselekvő igével találkoznak, akkor azt feltételezik, hogy a gomb azt azonnal végrehajtja. A cselekvő igék használata lehetővé teszi számukra, hogy ne kelljen elolvasniuk a gombhoz kapcsolódó többi szöveget.

Amennyiben a felhasználóknak el kell olvasniuk a gomb feletti tájékoztató szöveget, miközben csak egy igen és egy nem szerepel a gombokon, azzal nőni fog a hibás kattintások kockázata, valamint nagyobb terhelést jelent a felhasználók számára az értelmezés. A gombokon lévő ige viszont egyértelművé teszi, hogy melyik gombtól mi várható.

Fogalmazz pontosan!

A cselekvő igéknek lehet egy másodlagos értelmük is. Ha a megfogalmazás nem elég pontos, akkor a felhasználó félreértheti a gombon szereplő szöveget, így annak funkcióját is.

A fenti példán az látható, hogy nem mindegy, a törlés/eltávolítás szónak melyik változatát használjuk. A delete azt fejezheti ki, hogy teljes mértékben törlésre kerül egy fájl a rendszerből, ami megzavarhatja a felhasználót.

Mindennapi kifejezéseket használj!

Minél több felhasználó hall és használ egy kifejezést, az annál ismertebbé és elfogadottabbá válik. A gomboknál olyan szavakat kell választani, melyek a mindennapi beszédben is előfordulnak. Kerülni kell viszont a technikai kifejezéseket, mert ezeket nem mindenki érti. Lehet, hogy Te igen, de a felhasználóid nem feltétlenül. Ugyanígy kerüld a szlengben használt kifejezéseket, mert ezek sem mindenki számára egyértelműek!

Fogalmazz röviden!

Minél több szó szerepel egy gombon, annál többet kell olvasniuk a felhasználóknak. Próbáld tehát minimalizálni a számukat, használd a legegyszerűbb felszólítást, mert azt akár egy pillantással megértik a látogatók. Fontos az is, hogy az emberek megbíznak a gombokon található felszólításokban, vagyis azt várják a gombtól, hogy azt teszi, ami rá van írva. Ez megkönnyíti számukra a döntéshozatalt.

Kerüld el azokat a felesleges igéket, melyek azt magyarázzák a felhasználóknak, hogyan használják az eszközüket. Itt arra gondolunk, hogy a „kattints ide” szöveg a gombokon felesleges, hiszen az emberek már tudják, hogy mit kell tenniük egy gombbal. Ehelyett annak az igének kell szerepelnie a gombon, mely a felhasználó a kattintást követően fog tenni.

Csak az első betű legyen nagybetű

A gombod szövegének olyannak kellene lennie, mint egy mondatnak, a mondatvégi írásjelet kivéve. Ez azt jelenti, hogy nagy kezdőbetűvel kezdődjön (tehát ne kicsi legyen, vagy ne legyen minden betű nagy). Amikor normális mondatokkal találkoznak a gomboknál a felhasználók, az olyan számukra, mint ha valaki beszélne hozzájuk.

Nagyon gyakran jelenik meg gomboknál az a megoldás is, hogy csupa nagybetűvel vannak írva. Ez azért nem a legjobb, mert egyes felhasználók „túl hangosnak” ítélhetik, azon oknál fogva, hogy a nagybetűs írásmód kiabálást fejez ki. Ráadásul a csupa nagybetűs szövegeknek rosszabb az olvashatósága, ugyanakkor viszont az is megállapítást nyert, hogy minél rövidebb egy szöveg, annál nagyobb méretű betűt érdemes használni.

Mikor és hogyan jelezheted a töltődési állapotot egy gombnál?

Korábban említettük, hogy a gomboknak 5 állapota lehetséges. Ugyanakkor ehhez az 5 állapothoz csatlakozhat egy hatodik is: a töltődési állapot. Mivel egy gomb lenyomása és az eredmény között általában rendkívül rövid idő telik el, így felesleges a töltődési állapotot jelezni az emberek számára. Ugyanakkor előfordulhatnak olyan műveletek, melyek a szokottnál hosszabb időt vesznek igénybe. Ilyenkor, ha nem jelezzük a töltődési állapotot, az hibákat okozhat.

Ha egy cselekvés hatására hosszú ideig kell várnia a felhasználónak, akkor tudnia kell, hogy a rendszer foglalkozik-e a kívánságával. Ha azt látja, hogy nem történik semmi, akkor arra gondolhat, hogy nem nyomta le megfelelően a gombot. Emiatt ismét kattintani fog.

Amivel viszont nem csak duplázza a műveletet, hanem lassítja is annak végrehajtását. Helyzettől függően ez akár hibát is okozhat, ami nem csak a felhasználónak, hanem a rendszernek is gond. Ilyen lehet, ha a felhasználó többször küld el egy üzenetet, többször küld el egy űrlapot, vagy többször rendeli meg ugyanazt a terméket. A többszöri lenyomás által plusz adatok keletkeznek hibásan, melyeket kezelni kell. Ez pedig nem egyszerű.

Az ilyen hibák megelőzésére szolgálnak a töltési állapotjelzők. Gomb esetében, ha egy művelet két másodpercnél hosszabb időt vesz igénybe, akkor már indokolt használni. Ez persze nem egy egzakt szám, de egy kutatás szerint az emberek idegesek lesznek, ha egy oldal betöltésére két másodpercnél hosszabb ideig kell várni.

A töltődést jelző gomb viszont megmutatja a felhasználó számára, hogy a művelet folyamatban van. Ebben az esetben a felhasználó kisebb eséllyel kattint ismételten a gombra.

Az állapotot persze lehet jelezni a gombon kívül is, amivel korábban a weboldalsebességről szóló anyagunkban már foglalkoztunk. Ugyanakkor sok esetben talán praktikusabb a gombon magán mutatni, hogy elindult a folyamat. Hiszen a felhasználók szeme a gombon van, ha pedig fölé helyezzük az állapotjelzést, nem feltétlenül veszik észre.

Az állapotjelző elhelyezése nem eredményezheti a gomb növekedését, és nincs szükség eltérő háttérszínre sem. Ahogy a nem-aktív gombok megjelenésénél mindjárt kifejtjük, nem-aktív gombként kell megjeleníteni: a gomb áttetszőségét növelve. Az állapotjelző ugyanakkor legyen jól látható a gombon.

Ha nem fér el a kör alakú állapotjelző, akkor használható más megoldás is. Különösen akkor, ha a gomb címkéjének átírására is sor kerül, amivel szintén jól jelezhető a felhasználónak, hogy valami történik.

Milyenek legyenek a nem-aktív gombok?

Gyakran előfordul, hogy egy bizonyos kontextusban nem aktív egy gomb, azaz nem lehet rá kattintani, mert adott helyzetben nincs funkciója, nem működik (például, mert egy termék adott méretben elfogyott). Mint láttuk korábban a gomboknak van egy úgynevezett nem-aktív állapota, ezt kell valahogy kifejezni a vizuális designban.

Ami nem jó megoldás, ha egyszerűen eltávolítjuk a gombot, hiszen ez megzavarja a felhasználót, durván megváltoztatja a felület megjelenését. ehelyett általában jelezni kell vizuálisan, hogy nem aktív gombról van szó.

Nagyon sokszor alkalmazzák ennek érdekében a gomb szürkévé tételét. Ez azonban gyakran nem ideális megoldás, mivel az aktív és a nem aktív gomb, illetve az egész design nincs vizuális összhangban, így a felhasználó számára nem feltétlenül két állapotot jelez. Amikor egy szürke gomb színesbe vált, az képes meglepni a felhasználót, ezért el kell kerülni, ha lehetséges.

Jobb megoldás az áttetszőség megváltoztatása, vagyis a gombot egyszerűen áttetszőbbé kell tenni, amikor nem aktív. Ilyenkor a felhasználó jól látja a kapcsolatot az aktív és nem-aktív állapotú gomb között. Habár a gomb elhalványult, a színek megmaradnak, ami biztosítja a kapcsolódást a két állapot között.

Azért is előnyösebb egy elhalványított gomb a szürkénél, mivel a szürke továbbra is az előtérben marad (hacsak a háttér nem szürke), így pedig képes felhívni magára a figyelmet, és sokkal nagyobb eséllyel vélik aktív gombnak a felhasználók. Annál is inkább, mert egy szürke gomb nem eredendően a nem-aktivitást jelzi, hiszen például az alacsony prioritást is jelölhetjük így, azaz egy másodlagos call to actiont.

A lényeg tehát, hogy a nem-aktív gomboknál az áttetszőséget kell növelni, nem pedig a színt megváltoztatni. Az áttetszőség mértéke alapvetően a háttér színétől függ, de ökölszabályként 40 százalékos vagy az alatti áttetszőség általában jól használható. Fontos, hogy elég alacsony legyen a mértéke, mert enélkül sokan aktív gombnak fogják látni.

Miért ne használj inverz színeket az aktív és nem-aktív állapot kifejezésére?

Egy másik, az aktív és nem aktív állapot jelzéséhez kapcsolódó hiba, amikor inverz színeket használnak a gomboknál. Ilyenkor az a probléma, hogy a felhasználó ilyen vizuális megjelenésnél a nem aktívként jelzett állapotot is aktívnak láthatja. Ennek oka a korábban már említett kontraszt-probléma.

A kontraszt ugyanis vizuálisan kiemel egy elemet. Amennyiben inverz színeket használunk (tehát a szöveg és a gomb színe felcserélődik), akkor ugyanolyan kontrasztarányról beszélhetünk. Ez pedig azt jelenti, hogy mindkét gomb egyaránt versenyez a felhasználói figyelméért, holott az egyik nem-aktív. Hogy érthetőbb legyen:

A fenti kapcsolónál nem igazán lehet tudni, hogy melyik rész van aktív és melyik nem-aktív állapotban. Ez csak akkor lesz egyértelmű, ha az aktív gomb sokkal nagyobb kontrasztarányt kap, mint a nem aktív.

A jobb oldali kapcsolónál lehet látni, hogy mennyivel egyértelműbbé válik a nem-aktív gomb jelzése, ha lecsökkentjük a szöveg és a gombszín kontrasztját.

Hogyan jelezd a hover állapotot egy gombnál mobilon?

A gomboknál a hover effekt arról tájékoztatja a felhasználót, hogy interakcióba léphet az elemmel. A gond az, hogy csak desktopon használható hover, mobilon ezt a visszajelzést nélkülözni kell. Annak ugyanis nincs értelme, hogy amikor a felhasználó megérinti a gombot, akkor az úgy jelezze vissza azt, hogy interakcióra kész, mint ha megnyomtuk volna a gombot, majd újra meg kellene nyomni.

De létezik-e olyan megoldás, mely mobilon a hover helyett használható? Igen, az az úgynevezett ripple vagy fodrozódási effekt. Habár nem pont ugyanazt csinálja, mint a hover effekt desktopon, de mégis valamiféle visszajelzést ad a felhasználónak. A fodrozódási effekt annyit tesz, hogy amikor a felhasználó megérinti a gombot, akkor egy eltérő színű kör elkezd növekedni a gombon, jelezve, hogy hatékony volt az érintés. Így a felhasználónak nem kell bizonytalankodnia, hogy vajon tényleg megérintette a gombot. Vizuálisan úgy néz ki, mint amikor egy kavicsot bedobunk a vízbe.

A fodrozódási effektet nem kell magyarázni a felhasználónak, mert intuitív módon érteni fogja, hiszen amikor megérinti a vizet, akkor is hasonló dolgot lát.

Érdemes tehát a gomboknál mobilos megjelenésnél fodrozódási effektet használni, amikor desktopon hover effekt jelenne meg. Ez ugyanis növeli a bizonyosságát abban, hogy megfelelően eltalálta a gombot. Persze nem pont azt tudja, amit egy hover, de legalább valamiféle vizuális visszajelzést ad a felhasználóknak az interakcióról.

Mi a gond a szöveg-gombokkal?

A tisztán szöveges gombok igazából nem gombok, hanem szöveges linkek, melyek nem egy hosszabb szövegben kapnak helyett, hanem önálló egységként jelennek meg. Ezek általában alacsonyabb prioritásúak a fő CTA-gombhoz képest. Gyakorlatilag a gombforma hiányával azt fejezik ki a designerek, hogy kevésbé fontos CTA-ról van szó.

A pirossal keretezett részben látható, hogy pontosan mire gondolunk. Az ilyen gombok elsősorban mobilos megjelenésnél okozhatnak problémát, melyekre általában sokkal szigorúbb szabályok vonatkoznak, mint az asztali gépes megjelenésre.

Ennek oka, hogy az emberi ujj nagyobb, mint az egérmutató. Ha egy kis célpont fölé helyezed, akkor eltűnhet maga a célpont a szemed elől. Keret és gombforma híján az sem látszik, hogy a cselekvés végrehajtódott, azaz nem látszik a gomb reakciója az érintésre.

A bal oldali képen az látszik, hogy eltakarja az ujj a „Küldés” szót. A jobb oldalon pedig egy normál gomb látható. Ahhoz, hogy egy ilyen kis, szöveges gombot eltaláljon a felhasználó, rendkívül nagy erőfeszítésre és figyelemre van szüksége. Egy normál gomb esetén ez nem jelentkezik, hiszen a gomb-forma miatt már nagyobb a méret, és a keret is tökéletesen észlelhető.

Sokan megoldásként a csupa nagybetűvel írt változatot használják, sőt a Google Material Design rendszere is ezt ajánlja. Ezáltal ugyanis határozottabb kontúrt kap az egyébként is nagyobbá váló szöveg. Ugyanakkor ez még nem az igazi, hiszen csak kismértékben nőtt meg a „cél”, ugyanakkor a nagybetűs írásmód miatt romlik az olvashatóság (mint arról korábban már beszéltünk).

További probléma, hogy a szöveges gombok és a nem kattintható, normál szövegek alapvetően csak színükben különböznek. Tehát teljes mértékben az emberek színérzékelésére hagyatkozunk, ha ilyen gombokat használunk. Pedig nagyon küzdenek színtévesztéssel, színvaksággal.

Mi lehet a megoldás?

Láttuk tehát a problémát ezeknél a gomboknál, ugyanakkor velük szemben áll a designer törekvése, hogy alacsonyabb prioritásukat jelezze valahogy. Milyen lehetőségek állnak a rendelkezésre?

Keretes gomb

Ha a szöveg köré teszel egy keretet, akkor létrejön egy keretes vagy más néven szellemgomb. Ezáltal már fizikailag is gomb megjelenésűvé válik a link, melyet könnyebben tudnak kezelni a felhasználók, hiszen jól látják a célpontot, még akkor is, ha épp rajta van az ujjuk.

Ugyanakkor a szín (kitöltés) hiánya azt jelzi a felhasználóknak, hogy másodlagos fontosságú gombról van szó, mely nem versenyez a fő call to actionnel.

Halványabb színű gomb

A másik lehetőség arra, hogy a gomb másodlagos jellegét kifejezd, ha halványabb színt adsz neki, mint a fő gombé. Ezáltal még láthatóak a határai és a háttere, azonban nem versenyez a fő CTA-val.

Mikor lehet értelme szöveg-gombot használni?

Az előbbiek ellenére vannak olyan helyzetek, amikor van értelme a tisztán szöveg-gombok használatának. Például akkor, ha nem másodlagos cselekvésnél használod őket, hanem harmadlagosnál. Ilyenkor van egy fő CTA-d, egy másodlagos gombod, és ha még oda kell zsúfolnod egy harmadik cselekvést megvalósító gombot is, akkor az lehet a sima szöveg-gomb. Ezekre egyébként sem érkezik túl sok kattintás, és csekély jelentőségüket ki tudod fejezni a mérsékelt vizuális súllyal.

Tipikusan ilyen gombként jelenik meg, ha segítséget, tájékoztatást akarsz adni a felhasználóknak a CTA-ddal kapcsolatban. A tájékoztatás linkjét felesleges CTA-ként tálalni a felhasználóknak, elég egy szöveg-gomb is, mely így egyáltalán nem versenyez a többi gombbal.

Frissítés, 2021.11.18.:

Miért ne tedd egymás mellé az ellentétes funkciójú gombokat?

Gyakran látjuk weboldalakon vagy appokban, hogy egymás mellé kerülnek olyan gombok, melyek egymással ellentétes opciót kínálnak a felhasználók számára. Ez sok esetben nem olyan nagy gond, mert nincs akkora jelentősége, ha véletlenül félrekattintanak. Néha viszont komoly problémákat okozhat. De mi a megoldás?

A hibák megelőzése mindig sokkal jobb megoldás, mint a javításuk. Hiszen, amikor egy felhasználónak korrigálnia kell egy hibát, akkor az már megzavarja a feladatvégzésében és jelentős energiákat kell a hiba megoldására fordítania, még akkor is, ha néhány másodperc alatt helyrehozható – hívta fel a figyelmet egy bejegyzésében a Nielsen Norman Group, mely alaposan körüljárta a problémát.

Az, hogy két, ellentétes lehetőséget kínáló gomb egymás mellé kerül, általában azért következik be, mert a designerek nem veszik figyelembe, hogy a felhasználók nem teljes figyelmükkel fordulnak egy weboldal vagy alkalmazás felé. A felhasználóknak nagyon sokszor automatikusak a reakcióik, nem gondolkodnak, különösen, ha rutinból végzik a feladatot.

Ha megnézed ezt a menüt, ami egy rosszul írt szó miatt jelenik meg a Firefoxban, akkor láthatod, hogy a szó javítását lehetővé tevő link egészen közel van a szótárhoz adáshoz. Nagyon könnyű véletlenül rákattintani az utóbbira, és így nem, hogy nem kerül javításra a szó, hanem mindjárt gazdagabb lesz a szótárunk egy hibás szóval.

Ez a probléma nagyon gyakran felmerül az úgynevezett menük, megerősítő panelek, hibaüzenetek, stb. esetében. Gondolj például a szinte mindenhol elérhető jobbgombos menüre, mely a „Másolás” és a „Beillesztés” lehetőséget tartalmazza, pont egymás alatt. Ugye előfordult már veled is, hogy nem arra kattintottál, amelyikre szerettél volna, így másolás helyett mondjuk egy szöveg szerkesztése közben kitörlődött a kijelölt szöveg, és belekerült egy, a vágólapon meglévő korábbi szöveg.

Ez sok esetben korrigálható egy egyszerű „Undo” paranccsal, de nem minden esetben ez a helyzet. Különösen, ha például párbeszédpanelekről vagy űrlapokról van szó. Ahol szintén jellemzően egymás mellett jelennek meg az ellentétes funkciójú gombok. Annyira gyakran, hogy az ellentétes opciók egymás mellé helyezése az egyike a 10 leggyakrabban előforduló designhibának. De mit lehet tenni az elkerülésük érdekében?

Arra, hogy jobban megkülönböztess két ellentétes funkciójú gombot több lehetőség is kínálkozik a való életben:

• eltérő textúrák alkalmazása,
• egy fizikailag eltérő irányítás (tehát nem nyomás, hanem elforgatás vagy húzás),
• és persze ott van a közelség, illetve annak hiánya.

A lényeg, hogy jelezni tudjuk nem csak azt, hogy miként léphet kapcsolatba a felhasználó a gombbal, hanem annak hatását is egy olyan módon, mely nem igényli a felhasználó tudatos figyelmét.

Tehát, amikor a való életben például egy kart jóval nehezebb meghúzni, mint egy másikat, akkor az erőfeszítés eltérő mértéke már vissza is jelez a felhasználónak, hogy hibázni készül, és nem csak utólag derül ki a hiba.

Természetesen van logika a mögött, hogy egymás mellé kerül két ellentétes funkciójú gomb, hiszen pont emiatt van közöttük kapcsolat. Ugyanakkor a két kapcsolódó gomb hatása egészen eltérő (például egy Mentés és egy Törlés esetében). Emiatt pedig a designereknek mégis csak arra kell törekedniük, hogy amennyire csak lehetséges, megkülönböztessék a kettőt, így minimálisra csökkentsék a felhasználók hibázási lehetőségét.

Mondhatod, hogy erre szolgál a címke a gombon, ez azonban még messze nem elég. Más vizuális jelzésekre és eltérő elhelyezésre is szükség van, ha biztosra akarunk menni. Itt van például egy másik helyesírási megoldás, ahol eltérő színnel, ikonnal, betűmérettel jelzik a két eltérő opciót, azaz a szó javítását, illetve szótárba való felvételét.

Egy másik megoldás, ha jól elkülönítjük egymástól a lehetőségeket, és egy kicsit megnehezítjük a két lehetőség összecserélését. A felhasználónak akkora utat kelljen bejárnia az egérmutatóval vagy az ujjával a két ellentétes opció között, hogy ezáltal csökkenjen a hiba lehetősége. Persze mondhatjuk, hogy ez további fáradtságot jelent a használatnál, ugyanakkor még mindig kevesebb erőfeszítést igényel, mint ha utána javítani kell a félrekattintás miatt bekövetkező hibát.

A nagyobb távolságra lehet példa az alábbi app, ahol a két rendkívül lényeges és nagy hatású funkció távol került a menü többi elemétől.

Látható tehát, hogy a súlyos következményekkel járó funkciók elérését miként lehet megnehezíteni, hogy ezáltal elkerüljük egy komolyabb hiba bekövetkeztét. Használhatunk jelentősen eltérő vizuális megjelenést vagy megnövelt teret, esetleg egyszerre mind a kettőt, hogy jelezzük a két vagy több funkció különbségét.

Frissítés, 2022.02.03.:

Milyen legyen az ellentétes funkciójú gombok sorrendje?

Az előbbiekben érintettük az ellentétes funkciójú gombok tervezésével kapcsolatos problémákat, de egy dologról még nem beszéltünk: a gombok sorrendjéről.

Ez elsősorban akkor okoz dilemmát, amikor egymás mellett helyezkedik el a két gomb: OK / Mégse vagy Mégse / OK a megfelelő sorrend? Természetesen a gombok szövege bármi más is lehet, (Igen / Nem, Előző / Következő, stb.) a lényeg, hogy két, ellentétes funkciójú gomb kerül egymás mellé.

A Windows és az Apple is megosztott a kérdésben. A Windows User Experience Guidelines egész más álláspontot képvisel, mint az Apple Human Interfaces Guidelines. Előbbi az OK gombot előre helyezi, míg utóbbi hátra, de a Google is a „Mégse / OK” sorrendet használja. Ha megkérdezzük a designereket, akkor mindkettő mellett elhangzanak érvek.

Az OK gomb előre helyezése azért lehet indokolt, mivel balról jobbra olvasunk, és a felhasználók alapvetően az OK-ra kattintanak gyakrabban.

Az OK gomb jobbra helyezése viszont azért lehet indokolt, mivel balról jobbra tart a folyamat. Tehát, ha az „előző / következő” páros nézzük, akkor logikusnak tűnik, hogy a következő szó hátulra kerül, hiszen erre lépünk tovább. Ugyanez igaz lehet a „Mégse / OK” párosra is, mivel a Mégse tulajdonképpen visszalépteti a felhasználót, míg az OK előre viszi.

Látható tehát, hogy mindkét megoldás mellett vannak érvek. A döntést ugyanakkor megkönnyíti, hogy egyik elrendezés sem okoz UX-problémát, így nem érdemes tesztelgetni, hogy hány századmásodperccel vesz kevesebb időt igénybe a felhasználók részéről egyik vagy másik verzió.

Az viszont sok időt megtakaríthat a felhasználók számára, hogyha valamely sorrend mellett döntesz, akkor azt következetesen betartod az egész designban. De az is hasznos, ha igazodsz ahhoz az operációs rendszerhez, melyben megjelenik a felületed (mint azt korábban említettük, az Apple és a Windows ellentétes sorrendet használ).

Ugyanakkor, ha nem desktop szoftvert tervezel, hanem weben jelenítesz meg két gombot, akkor már nehezebb helyzetben vagy, hiszen bármilyen rendszer alatt megjelenhet az oldalad. Ilyenkor azt érdemes figyelembe venni, hogy milyen rendszert használ a felhasználóid többsége.

De leginkább arra érdemes figyelni, hogy

• egyrészt úgy címkézd a gombot, hogy pontosan beazonosítható legyen a funkciója,
• másrészt a gyakrabban választott gombot tedd alapértelmezetté (enterrel aktiválhatóvá), illetve ezt jelezd is azzal, hogy vizuálisan hangsúlyossá téve megkülönbözteted a másik gombtól. (Kivéve akkor, ha az alapértelmezett gomb lenyomásának súlyos lehet a következménye – például egy felhasználói fiók törlése -, mert ilyenkor jobb, ha az enter lenyomásával nem történik meg ez a lépés).

Frissítve, 2022.12.06.:

Hogyan tervezz rádió-gombokat a weboldaladra?

Rádió-gombokkal mindenhol találkozol a weben és a mobilos alkalmazásokban. Ezek segítenek a felhasználóknak a 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 persze 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ör látható az opció leírása előtt, melyben – ha kiválasztásra kerül az adott lehetőség – 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 weboldalon vagy mobil applikációban.

Mikor érdemes használni?

Rádió-gombokat többnyire 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.

Korábban volt egy olyan általánosan elterjedt vélemény, hogy ha kevesebb mint 5 opciót kell elhelyezni, akkor rádió-gombokat kell használni, ha ötnél többet, akkor már lenyíló listát. Ez az ökölszabály, de nem minden esetben érvényes, ha rendelkezésedre áll hely, és egyéb indok is lenne rá, akkor akár több (egészen 15-ig) opció esetén is használni lehet.

A rádió-gombok használatának indokai:

• Ha fontos, hogy lássa a felhasználó valamennyi lehetőséget egyszerre, mielőtt kiválasztja az egyiket. A rádió-gombok gyors és azonnali hozzáférést engednek a listában szereplő opciókhoz, jól át lehet futni a listát, így könnyebben tudnak választani közülük.
• De akkor is indokolt lehet, ha az alapértelmezett opció nem ad megfelelő tájékoztatást a többi választási lehetőséggel kapcsolatban.
• Abból a szempontból is előnyös, hogy elkerülheted 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.
• Egyetlen kattintással elérhető a cél, vagyis csökkenti 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. 5 opció felett általában már érdemesebb lenyílót használni, elsősorban azért, mert így kevesebb helyet foglal el, de mint mondtuk, ez nem minden esetben érvényes. Indok és elegendő hely esetén akár 15 opciót is felsorolhatsz rádiógombos megoldással.

Ugyanakkor a lenyíló menü használatának is vannak jó indokai:

• Ha az alapértelmezetten beállított lehetőség lenne szerinted az optimális választás a felhasználónak.
• Ha ez az alapértelmezett lehetőség szerinted a felhasználók nagy része számára kielégítő.
• Ha a többi lehetőség csak összezavarná a felhasználókat, esetleg hibázhatnak a kiválasztásukkal.
• Amikor az alapértelmezett opció a legfontosabb.
• Ha az alapértelmezett opció a legjobb választás, már csak egy megerősítésre van szükséged a felhasználótól.
• Ha 5-nél több lehetőséget sorolnál fel, és nincs elegendő helyed erre.
• 15 lehetőség felett mindenképpen.

Ugyanakkor azt tudni kell a lenyílókról, hogy lassítják a felhasználót, hiszen először le kell nyitnia az opciókat, aztán választani, ami néha nem könnyű egy hosszú listánál. Annál is inkább, mivel sokszor lecsúsznak a listáról az egérmutatóval vagy az ujjukkal, félrekattintanak, így elölről kell kezdeni a kiválasztás folyamatát.

De akkor sem biztos, hogy jó választás, ha fontos számodra, hogy átgondoltan válasszanak, mivel nem biztos, hogy feltűnik az emberek számára a lenyíló által kínált választási lehetőség, így az alapértelmezett opció marad beállítva.

Egy további lehetőség a checkbox, de 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 checkbox 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, 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!

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:

Miért nem férnek össze a rádió-gombok és a jelölőnégyzetek egy űrlapon? És mi lehet a megoldás?

A rádió-gombok és a jelölőnégyzetek régóta jelen vannak a weboldalakon, eltérően néznek ki és más a funkciójuk, ugyanakkor a felhasználok számára ez nem feltétlenül világos, különösen akkor képesek zavart okozni, ha egyszerre vannak jelen a weboldalon.

Az eltérő funkciójukról egyedül a megjelenésük árulkodik, ez azonban nem feltétlenül képes átadni az üzenetet: a pipa és a pont mindössze annyit mond a felhasználónak, hogy választási lehetőségről van szó. Emiatt, amennyiben mindkettő egyszerre jelenik meg a weboldalon, akkor a következetesség, mint UX elv, sérülhet. Ezért érdemes átgondolni, hogy miként is használjuk őket együtt.

A következetesség elve kimondja, hogy az olyan elemeknek, melyek hasonló funkcióval bírnak egy weboldalon, azonos megjelenésűeknek kell lenniük. A rádió-gombok és a jelölőnégyzetek pedig hasonló funkciójúak és azonos kontextusban jelennek meg, miközben a megjelenésük eltérő:

Az eltérő megjelenés azért lehet indokolt, mert míg a rádiógombok kizáró választást jelentenek, addig a jelölőnégyzetek esetén több opció is kiválasztható. Néhányan emiatt indokoltnak tartják az eltérő megjelenést, ugyanakkor ettől még a funkciójuk nem igazán különbözik: választási lehetőségeket sorolnak. Legalábbis a felhasználók nem különböztetik meg, egyszerűen kiválasztanak egy lehetőséget az olvasott címke alapján.

A címke egyébként talán jobban megmutatja a felhasználónak, hogy miként használható az űrlap, mint a pipa vagy a pont jelzés, hiszen a többes számú megfogalmazás utal arra, hogy több választási lehetőséget lehet kipipálni, vagy éppen csak egyet kiválasztani.

Mindenesetre a UX Movement felvetése szerint talán jobb megoldás lehet a lenti kép jobb oldalán látható design, amennyiben rádió-gomb és jelölőnégyzet egyszerre jelen van az űrlapon:

Itt a jobb oldali oszlop lenne a megjelenésben összhangba hozott verzió, ahol a címke többesszáma („Kategóriák” és „Távolság”) utal arra, hogy egy vagy több lehetőség választható, miközben a vizuális megjelenés következetes, illetve nem különbözteti meg a némiképp eltérő működést.

Ez persze nem azt jelenti, hogy ez a vizuálisan jobb megoldás hatékonyabb lenne használhatósági szempontból, mindenesetre ötletnek jó, és elméletben egy megfontolandó lehetőség, amikor a rádió-gombokat és a jelölőnégyzeteket összhangba kell hozni egy űrlapon belül.

Frissítés, 2022.10.21.:

Milyen egy jó „vissza” gomb?

A vissza gomb használata sokszor okoz kellemetlen meglepetéseket a felhasználóknak. Akár a böngészőben, akár a weboldalon belül találkoznak vele. Nem is igen bíznak benne, mert már tapasztalták, hogy kiszámíthatatlan, mi következik a lenyomása után: sokszor inkább távolabb kerülnek a céljuktól, mintsem közelednének hozzá.

Ilyen fordul például elő akkor, ha egy többlépéses rendelés esetében a vissza gomb lenyomásával nem egy lapot lépnek vissza, hanem az egész folyamat elejére kerülnek, miközben törlődik minden adat, amit eddig megadtak. A felhasználói frusztráció kiküszöbölése érdekében egy olyan vissza-megoldást kell készítened, mely segít az embereknek és nem hátráltatja őket.

Zárja be az overlayt

Minél nagyobb az overlay mérete a felhasználók annál inkább önálló lapként fogják fel. Ezért a vissza gomb funkciója nagyméretű overlay esetében annak bezárása kell, hogy legyen, nem pedig a felhasználó előző oldalra mozgatása. Arra azonban figyelj, hogy ez csak kellően nagy méretű overlay esetében történjen így, mert egyébként zavaróvá válik. Ha pedig arról van szó, hogy akár a megadott adatai is elvesznek a vissza gomb lenyomása révén, akkor figyelmeztessük arra, hogy milyen következményekkel jár a kattintás.

Az egyedi vissza gomb pozíciója

Mivel a felhasználók rossz tapasztalataikból következően sokszor félnek használni a böngésző vissza gombját, ezért érdemes egyedi vissza gombot tenni minden olyan helyre, ahol szükség lehet rá. Egy weboldalon belüli egyedi vissza gombtól ugyanis sokkal kiszámíthatóbb, racionálisabb működést várnak.

Na, de hová kerüljön az egyedi vissza gomb? Ökölszabály alapján a legjobb, ha a legkevésbé fontos gombként tekintünk rá, így a legkevésbé hangsúlyos (kontrasztos) megjelenést kapja, és mivel az elsődleges gomb általában a külső szélek közelébe kerül, így a vissza gomb legbelülre kerül a gombok sorában.

Ez persze elsősorban űrlapoknál érvényes, más esetekben elhelyezheted a lap tetején, vagy akár egy „ragadós” sávban – alapvetően a bal szélen -, mégpedig úgy, hogy könnyen észrevehető legyen.

Ugyanezt egyébként űrlapokon is megteheted, vagyis a vissza gomb nem az űrlap aljára kerül a másik vagy többi gomb mellé, hanem felülre a bal sarokba, ahogy egyébként a böngészőkben is általában megtalálható. Ennek az elhelyezésnek az az előnye is megvan, hogy kisebb az esélye a félrekattintásnak a felhasználó részéről. Ez akkor is fontos, amikor következő-előző gomb párost használsz, hiszen ellentétes funkciókról van szó. Ezeket a gombokat minél messzebb kell elhelyezni egymástól, hogy ne legyen félrekattintás.

Az egyedi vissza gombod interaktívnak nézzen ki!

Egy gomb attól tűnik interaktívnak, hogy úgy néz ki, mint az oldal többi gombja, vagy legalább kap egy aláhúzást, hogy linkként legyen értelmezhető. Természetesen jelezheted vizuálisan a gombok eltérő fontosságát, ennek ellenére a vissza gombnak is interaktívnak kell látszania, valamint olyan helyen és olyan módon kell megjelennie, hogy a felhasználó észrevegye.

---

Hogyan alakítsd ki a “vissza a tetejére” gombot

A hosszú weboldalakon történő navigációt segítheti az, ha elhelyezel rajtuk egy “vissza a tetejére” gombot. A kialakításának azonban megvannak a maga szabályai. De előbb azt érdemes átgondolni, hogy lenne-e számodra jobb megoldás helyette.

Elsősorban a reszponzív design megjelenése és elterjedése vezetett oda, hogy egyre több lett az egyhasábos, hosszú weboldal-kialakítás a weben. Ezeknél különösen hasznossá vált a “Vissza a tetejére” gomb, melynek használatával az emberek egyetlen kattintással a weboldal tetejére tudtak navigálni. Erre a gyors helyváltoztatásra azért lehet szükség, mert gyakran előfordul, hogy az oldal közepén járva látni akarják a navigációs menüt. Például azért, mert mondjuk új célt keresnek, vagy valami szűrést alkalmaznának, esetleg a keresőmezőt használnák.

Természetesen az operációs rendszerek és a böngészők kínálnak különféle megoldásokat erre, például a home gomb lenyomása, vagy Safariban, iOS-nél az állapotsor megérintése is a lap tetejére repíti a felhasználót. Ezeket a trükköket azonban a legtöbben nem ismerik, és csak görgetni kezdenek nagy lendülettel, ha oda akarnak jutni. Ami persze egy igazán hosszú, vagy akár végtelen oldalnál nem biztos, hogy hatékony. Így szükség van a weboldalak részéről valami nyilvánvalóbb megoldásra. Ez lenne a “Vissza a tetejére” gomb. Na de hogyan érdemes kialakítani ezt? Erre adott jó pár tanácsot a Nielsen Norman Group, illetve felsorolt néhány alternatív lehetőséget.

Mikor van szükség ilyen gombra?

Amikor egy weboldal 4 kijelzőnyi méretnél hosszabb, akkor már érdemes használni a “vissza a tetejére” gombot. Ennél rövidebb oldalaknál azért felesleges, mert az embereknek nem okoz fáradtságot visszagörgetni, miközben a gomb megjelenése csak egy zavaró elem a felületen, mely feleslegesen növeli a zsúfoltságot.

Hova érdemes helyezned?

A jobb alsó sarokban kellene megjelennie a gombnak, mert ez az a hely, ahol az emberek számítanak rá és keresni fogják. Ez a pozíció nem zavaró számukra, ugyanakkor jól észrevehető. Ha a gombot a kijelző más részére helyezed, akkor azt kockázatod, hogy nem észre sem veszik.

Kell-e szöveg a gombhoz?

Egy ikon önmagában – például egy felfelé mutató nyíl – nem feltétlenül egyértelmű jelzés az emberek számára. Ráadásul a grafikai megvalósítástól is függ, hogy mennyire tudják értelmezni azt. Szöveg-kiegészítésként a “vissza a tetejére” megteszi, hiszen ez nagyjából leírja a gomb funkcióját, és egyértelművé teszi azt.
Hogyan helyezd el?

A megfelelő kialakítás az egyetlen ragadós gomb. Például ahelyett, hogy az oldal több szakaszának végére elhelyezel egyet-egyet. Utóbbi megoldás a horgonylinkeket (http://blog.webshark.hu/2017/05/18/weblapon-beluli-hivatkozasok/) használó oldalaknál gyakori. Az NNG azonban használhatósági vizsgálatai eredményeként arra jutott, hogy az emberek nem figyelnek fel ezekre az ismétlődő linkekre.

Mekkora legyen?

A gombot érdemes viszonylag kis méretűre venni, hogy ne takarjon ki fontos elemeket a weboldalon. Természetesen mobilon legyen akkora, hogy az embereknek könnyű legyen az érintéssel történő használata. Fontos viszont, hogy vizuálisan kiemelkedjen az oldalból. Ha nagyon elveszik a tartalomban, akkor az emberek nem fogják észrevenni és használni.

Miként jelenjen meg?

Érdemes megfontolni egy késleltetett megjelenést. Tehát csak akkor bukkanjon fel az emberek számára a gomb, ha már jelentős mértékben legörgettek az oldalon, és elképzelhető, hogy vissza akarnak térni a tetejére. A gomb tehát akkor legyen látható, amikor feltételezhetően szükség lehet rá, miközben feleslegesen nem takar ki részeket a tartalomból. Ha viszont megjelent, akkor legyen mozdulatlan az adott pozícióban, mert a mozgásra automatikusan felfigyelnek az emberek, és odavándorol a tekintetük.

Mivel cserélheted le a “vissza a tetejére” gombot?

Navigáció az oldal alján

Azok számára remek megoldás, akik az oldal tetején elhelyezkedő navigációs menühöz térnének vissza, esetleg elindítanának egy keresést a keresőben, amikor elérnek az oldal aljára. Természetesen a megoldás csak akkor működik, ha általában legörgetnek a weboldalad aljára az emberek.

Ragadós menü

Ha nem görgetnek le az aljára, akkor egy ragadós menüt vethetsz be. Ha a görgetéssel az az elsődleges céljuk az embereknek, hogy egy másik aloldalra vagy az oldal egy más részére navigáljanak, akkor egy állandóan jelen lévő menü feleslegessé teszi a “vissza a tetejére” gombot. Ugyanígy megjeleníthetők a ragadós menüben azok a fő funkciók is, melyeket egyébként az oldal tetején érnének el, mint például egy keresés vagy szűrés.

A “Home” gomb

A közösségi oldalakon a Home gomb funkciója általában az, hogy a lap tetejére vigye a felhasználókat. Ezeken az oldalakon az emberek megszokták a használatát, ugyanakkor más weboldalaknál más a funkciója a home vagy kezdőlap gombnak. Általában a weboldalakon az emberek arra számítanak, hogy a kezdőlap gomb a főoldalra viszi őket, nem pedig a lap tetejére. Így ezeknél nem igazán használható.

Lebegő akciógomb: hogyan használd? Hol hibázhatsz vele?

Aki Google-termékeket használ, az 2014 óta egyre több felületen kapja a material design kötelező kellékeként a lebegő akciógombot. De bármilyen weboldalon vagy applikációban lehet használni, amire egyre több példát is látni. A kérdés, hogy érdemes-e? És ha igen, hogyan?

A material design, és annak Google által megfogalmazott elvei meglehetősen népszerűek. Ez a flat desginból kinőtt stílus remekül alkalmazható az okostelefonok felületein. A jellegzetes színsémán, a semleges tipográfián és az animációkon kívül az egyik fő sajátossága az, hogy a felületek jobb alsó sarkában felbukkan a lebegő akciógomb (floating action button). Egyre több olyan appba, sőt weboldalba futhatsz bele, melyek alkalmazzák egyes elemeit, például a lebegő akciógombokat.

A  lebegő akciógomb az alsó sarokba kerülve követi mindenhová a felhasználót. Azért ott, hogy az emberek könnyen elérhessék okostelefon használata közben a hüvelykujjukkal. Habár apró a mérete, és elsőre talán a felület egy lényegtelen elemének tűnhet, azonban a hatása jelentős. Ha jól alkalmazzák, akkor könnyen azonosítható és használható. Úgy tűnik ugyanakkor, hogy bár vannak előnyei, el lehet rontani a használatát. Lássuk, hogyan.

Mi a legnagyobb gond a lebegő akciógombbal?

A fő probléma az, hogy elsősorban a designerek problémáját oldja meg, és nem annyira a felhasználókét – vélekedett korábban a Webdesigner Depoton megjelent poszt szerzője, Benjie Moss. A gombnak ugyanis az lenne a feladata, hogy az úgynevezett “következő lépést”, amit a felhasználó megtehet, vagyis az elsődleges akciót hozza előtérbe. “A floating action button represents the primary action in an application” – fogalmaz a Google material designról készült útmutatója.

Ugyanakkor nagyon sok esetben nem ez a funkciója a gyakorlatban, tehát nem az elsődleges akciót indíthatjuk vele, hanem valamely más funkciót, ami a designernek vagy a weboldal tulajdonosának oly kedves. Ez viszont zavart okoz a felhasználóknál. Az akciógomb rossz alkalmazásával pedig leronthatjuk egy egész weboldal vagy app felhasználói élményét – jelezte a Mediumon közzétett bejegyzésében Teo Yu Siang designer.

A lebegő akciógomb használatával a webdesignerek, illetve weboldaltulajdonosok rákényszerítik akaratukat a felhasználókra: tehát például azt erőltetik, hogy e-mailt írjunk, miközben a felhasználó lehet, hogy csak olvasni jött a levelező alkalmazásva. A lebegő akciógomb ugyanis mindig felhívja magára a figyelmet, minden gomb között legelsőnek tűnik szembe. Hiszen ráül a felhasználói felületre, kiemelkedik színével és alakjával (hiszen míg a flat, a semi-flat vagy a material designban a legtöbb elem négyzet alakú, a lebegő akciógomb kör alakú).

A rossz használat ronthatja a felhasználói élményt

Ezért lehet azt mondani, hogy a lebegő akciógomb elsősorban a designerek problémáit oldja meg és nem a felhasználókét. Hiszen a designernek egy ilyen eszköz tudatában nem nagyon kell azon gondolkodni, hogy az általa fontosnak vélt akcióra miként bírja rá a felhasználót, csak hozzárendeli az akciógombhoz az általa legfontosabbnak vélt funkciót – amit szeretne ha használna a felhasználó -, és ezzel meg is van oldva minden problémája. Viszont ha a gomb nem a legfontosabb funkciót, az elsődleges akciót tolja előtérbe, hanem azt, amit a designer nem tudott máshogy kiemelni, az le fogja rontani a felhasználói élményt.

Teo Yu Siang szerint még a Gmail appban is kérdéses az, hogy a lebegő akciógomb lenyomásával e-mailt tudunk írni. A kutatások ugyanis azt mutatják, hogy miközben az e-mailek 50 százalékát már mobilon olvassák a felhasználók, addig nagyon ritkán írnak levelet az okostelefonjukon. Ennek oka az, hogy nem kifejezetten kellemes használni a virtuális billentyűzeteket a mobilokon. Ez pedig egész egyszerűen azt jelenti, hogy a felhasználók a telefonon elsődlegesen olvasásra használják a Gmail-appot. Ami még szóba jöhet, az az a lehetőség, hogy gyorsan válaszoljanak egy e-mailre, de ahhoz előbb meg kell nyitni a levelet és el kell olvasni, ezzel pedig máris kikerülték a lebegő akciógombot.

Ugyanez lehet a helyzet a Google+ felületén is, ahol az akciógomb arra való, hogy ha új bejegyzést akarunk írni, akkor ennek segítségével megtegyük ezt. Ez nem is baj – bár lehet, hogy nem ez az elsődleges akció a felületen, hanem a tartalomfogyasztás -, azonban az már igen, hogy bizonyos képernyőfelbontásoknál egész egyszerűen kitakarja a tartalom egy részét.

További gondok

Ezek mellett persze az is problémát jelent, hogy a lebegő akciógomb alapvetően

• nincs összhangban a navigáció többi részével. De az is baj, hogy a mobileszközökön jól használható megoldás
• automatikusan átkerül desktop kijelzőkre is, ahol nem biztos, hogy szükséges vagy éppen jól használható ez a megoldás.
• A lebegő akciógomb által az azt használó weboldalak vagy alkalmazások egyetlen funkcióssá válnak.

A lebegő akciógomb használatának szabályai

De nem önmagában a lebegő akciógombbal van gond, hanem annak használatával. Eddig mindig csak a rossz példákat soroltuk, pedig van néhány jó példa és követni való gyakorlat. Hogy csak a legkézenfekvőbbet említsük megint a Google-től: a Mapsben például teljesen helyénvaló a használata, hiszen az elsődleges felhasználó akció mobilon a térkép használatánál az, hogy lekérjen a felhasználó egy útirányt. Nyilván persze nézelődhet is a térképen, de ez mobilon nem igazán praktikus, és nagy eséllyel el akar jutni arra a helyre, amit megtalált. Itt ráadásul a lényegi tartalmat sem zavarja a lebegő akciógomb, hiszen a legfontosabb dolog – a saját pozíciónk – általában a kijelző közepére kerül. De lássuk, hogy mire és hogyan érdemes használni!

1. Az elsődleges akciót jelenítsd meg vele!

Mint azt már jeleztük, a lebegő akciógombnak a legfontosabb vagy leggyakrabban használt akciót kellene megjelenítenie. Végig kell tehát gondolnod, hogy az alkalmazásodban vagy a weboldaladon, mi az a legfontosabb funkció, mely az appod vagy weboldalad lényegét is jelenti egyben. Például egy zenei appban ilyen lehet a play/stop funkció, egy fotós appban a felvétel készítése.

Steve Jones szerint a lebegő akciógombnak először nem tűnhet igazán hatékonynak használhatósági szempontból, azonban amikor az emberek elkezdik használni, akkor kiderül, hogy hatékonyabb, mint más, hagyományos megoldás.

2. Mutasd meg vele az útvonalat!

A lebegő akciógomb egy alapvető megoldás arra, hogy megmutasd a felhasználónak, hogy mi legyen a következő lépése. A Google kutatásai azt mutatják, hogy amikor az emberek egy számukra ismeretlen felületre tévednek, akkor hajlamosak az elsődleges akciógombra hagyatkozni a navigációnál. A lebegő akciógomb tehát egy hatékony útjelző lehet, ami megmutatja a következő lépést.

3. Rendelj hozzá több akciót, ha szükséges!

Előfordulhat olyan eset is, amikor a lebegő akciógombhoz nem egyetlen funkciót, hanem funkciók sorát rendeljük. Erre jó példa az Evernote alkalmazása. Itt a lebegő akciógomb megnyomásával több cselekvést is elindíthatsz. Ilyenkor legalább 3 lehetőséget meg kell jelenítened, de a 6-ot ne haladja meg a számuk, melybe az eredeti lebegő akciógomb is beleszámít.

Ami fontos, hogy az elérhető funkciók legyenek kapcsolatban azzal az elsődleges akcióval, amit a lebegő akciógomb kifejez, illetve egymással is. Ne úgy kezeld őket, mint egymástól független funkciókat, ahogy azt például egy eszköztárnál tennéd!

4. Ha nincs rá szükség, ne zavarja a felhasználót!

A felhasználói interakcióknál fontos szerepe van a kontextusnak. Néha az emberek tartalmat szeretnének fogyasztani, néha viszont egy cselekvést hajtanának végre. Hogy éppen melyiket, az a kontextustól függ.

A Google+ esetében a Google ezt úgy oldotta meg, hogy lefelé görgetés során nem látszik a lebegő akciógomb – amivel új bejegyzés írását lehet elindítani -, ugyanakkor, ha visszafelé kezd görgetni a felhasználó, akkor  a Google+ úgy veszi, hogy immár kilépett a tartalomfogyasztási módból, és megjelenik számára a lebegő akciógomb.

5. Használj átalakulást a logika bemutatására!

A lebegő akciógomb nem egy statikus kör alakú gomb, aminek egyetlen helye van. Amikor a felhasználó egy másik felületre lép egy appon belül, akkor a lebegő akciógomb átalakulhat. Ezzel megteremti az átmenetet két állapot között.

A fenti példán látható, ahogy megtartja a felhasználó figyelmét, és segíti abban, hogy megértse az éppen zajló változást a kijelzőn, mi okozta a változást, és hogyan indíthatja el újra ezt a változást később, ha megint szüksége lenne rá.

Mindezek alapján talán már látható, hogy a felhasználói élmény szempontjából a lebegő akciógomb nem egy eredendően rossz dolog. Ha megfelelően használod – nem rákényszeríteni akarod vele az akaratod az emberekre, hanem kielégíteni az igényeiket – akkor rendkívül nagy segítséget tud nyújtani a felhasználóknak.

Milyen legyen egy kapcsológomb a weboldaladon?

A digitális felületeken megjelenő kapcsolók hasonlóan működnek, mint a fizikai világban létező kapcsológombok: segítségükkel a felhasználó két lehetőség közül választhat, és mindig van egy alapértelmezett értéke. 

A világban körülvesznek bennünket a kapcsológombok. Ennek oka, hogy nagyon sok tárgyunknak két állapota van: vagy be, vagy ki van kapcsolva. A kapcsolókat már régóta, nap mint nap használjuk. Tökéletes megoldást kínálnak arra, hogy egy rendszer állapotát megváltoztassuk akár a funkcióról, akár a beállításokról van szó.

Egy kapcsoló két rádiógombot vagy egy checkboxot helyettesíthet azáltal, hogy egy kattintással választhat a felhasználó két ellentétes állapot között. Ugyanakkor sok design esetében nehéz eldönteni, hogy melyiket válasszuk: rádiógombot, checkboxot vagy kapcsolót. Amikor azon gondolkodsz, hogy melyik is passzolna jobban, akkor alapvetően a lehetőségek számát és típusát kell mérlegelned, valamint azt, hogy van-e valamilyen tisztán meghatározható alapérték. A megfelelő választás a felhasználóknak segít abban, hogy megjósolják, mire számíthatnak egy elemtől a felületen, és miként kezelhetik azt. De milyennek kell lennie egy jó kapcsolónak a digitális felületeken?

Azonnali eredmény

Az egyik legfontosabb jellemzője a kapcsolóknak, hogy használatuknak azonnal eredménnyel kell járnia. Egy kapcsoló mellé nem kerülhet mentés vagy ok gomb, ahhoz, hogy egy változás élesedjen. Mint általában mindig, a kapcsolóknál is arra kell törekedni, hogy a megjelenés és a működés megfeleljen a való világban tapasztaltaknak. Tehát, ha kapcsolót használsz, akkor az úgy működjön, mint mondjuk egy villanykapcsoló.

Ezért, ha az azonnali eredmény nem érhető el, akkor nem szabad kapcsolót használni a designban. Helyette egy rádiógomb vagy egy checkbox lehet a megfelelő választás. Ugyanígy nem jó megoldás, ha egy hosszú űrlapon helyezel el kapcsolókat, ahol még más mezők is szerepelnek, és a végén a felhasználóknak még egy küldés gombot is le kell nyomni a végén. Ilyenkor összezavarod az embereket, mert elbizonytalanodnak, hogy a kapcsolónak azonnali-e a hatása.

Az azonnali eredményt abból kell érzékelniük a felhasználóknak, hogy valami látható változással jár. Ha a kapcsoló használatakor nem történik semmi, akkor az emberek nem lehetnek biztosak abban, hogy történt-e bármi is.

Rövid és egyértelmű címkéket használj!

A kapcsolókhoz tartozó címkéknek tömörnek és hatékonynak kell lenniük. Célszerű, ha a címke a kulcsszóval kezdődik. Tehát, ha egy beállítási oldalt készítesz, ahol a felhasználó az értesítési beállításait kezelheti, akkor nyilván azt jelzed a kapcsolónál, hogy „e-mail értesítés” vagy „szöveges üzenet”, nem pedig azt írod mellé, hogy „Akarsz tőlünk e-mail értesítéseket kapni?”

Tudjuk, hogy az emberek mindig csak annyit olvasnak egy digitális felületen, amennyit feltétlenül szükségesnek tartanak. Ezért fontos, hogy a lehető legrövidebbek legyenek a kapcsolók címkéi, és lehetőleg a kulcsszóval kezdődjenek. Ne tegyél fel kérdéseket, és úgy írj, hogy átfutható legyen!

A címkének azt kell megfogalmaznia, hogy a kapcsoló mit tesz, amikor átváltja a felhasználó az egyik állapotból a másikba. A megfogalmazás nem lehet kétértelmű vagy bizonytalan. Ha ezzel kapcsolatban kétely merül fel, akkor mondd ki hangosan a címke nevét, és tedd hozzá a végén a „ki/be” szavakat. Ha úgy érzed, hogy ilyenkor nincs értelme a címkének, akkor újra kellene írnod.

Használd a megszokott vizuális designt!

A kapcsolók nézzenek ki kapcsolónak, és használj vizuális jeleket (mozgás, színek), hogy elkerülj minden félreértést. Először is, amikor a felhasználó megváltoztatja a kapcsoló állapotát, akkor változnia kell a pozíciójának (akárcsak a való világban).

Másrészt a szín is egy fontos jelzés a kapcsolóknál. Alkalmazásuknál két dolgot kell figyelembe venni: a kontrasztot és a kulturális eltéréseket. Ha a designer alacsony kontrasztú színeket használ, akkor a felhasználónak nehézséget okozhat annak megállapítása, hogy kapcsoló ki vagy be állásban van-e. Ezért mindig nagykontrasztú színeket használj az állapot jelzésére.

Emellett persze az állapot leírása (ki, be vagy on, off szavak a kapcsoló mellett) is sokat segít a felhasználó számára a rendszer állapotának meghatározásában. Ha használod a szavakat az állapot jelzésére, akkor mind a kettő jelenjen meg a kapcsoló bal, illetve jobb oldalán, különben címkének tekintheti a felhasználó.

Következetes használat

A teljes weboldalon vagy applikációban ugyanolyan kapcsolókat használj. Ha különböző kapcsolókialakításokkal találkozik a felhasználó, az lelassítja, mert gondolkodnia kell azon, hogy miként lépjen kapcsolatba a különböző megoldásokkal. Ne keverd a rádiógombokat és a kapcsolókat sem! Tehát, ha egy helyen rádiógombokat használtál ki és bekapcsolás választására, akkor máshol ne válts át kapcsolóra.

Habár a kapcsolók egészen apró elemei a felhasználói felületnek, mégis jelentős hatással van a használatuk a felhasználói élményre. Ezért mindig győződj meg arról, hogy kellően egyértelmű címkéket használsz, nem térsz el a megszokott designtól, és azonnali eredménnyel jár a kapcsoló állapotának megváltoztatása. Azt se feledd, hogy kapcsolókat csak abban az esetben használj, amikor a felhasználónak két ellentétes állapot közül kell választania. Emellett figyelj még a következetes használatra, annak érdekében, hogy ne hozd zavarba az embereket a weboldaladon vagy az alkalmazásodban.

Mit ellenőrizz egy gomb designjánál?

• A gomb jelzi-e, hogy gombról van szó?
• A gomb megfelelően visszajelez különböző állapotairól?
• Az elsődleges akciógomb erősebb vizuális súlyú, mint a többi gomb?
• A gomb elhelyezése követi a platformon megszokott elrendezést?
• A gomb és szövegének kontrasztaránya megfelel a W3C követelményeinek?
• A gomb szövege egyedi, és reagál a felhasználói igényekre?