Keresés
Header Háttér

Webshark Blog

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

2018-08-080 komment

Hogyan kellene kinéznie egy kapcsolónak a weboldaladon vagy az appodban?

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?”

 

Egy egyértelmű és félreérthetetlen kapcsoló a Google Naptárban

Egy egyértelmű és félreérthetetlen kapcsoló a Google Naptárban

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ó.

Windows 10 kapcsoló

Nem a legjobb megoldás a Windows 10-nél, mert nem lehet egyértelműen eldönteni, hogy akkor kapcsoljuk ki az éjszakai fényt, ha a “Ki” jelzés felé kapcsolunk, vagy most van kikapcsolva

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.

(A szöveg az NNG bejegyzése 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.