Keresés
Header Háttér

Webshark Blog

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

2019-04-250 komment

Milyen legyen egy gomb a weboldaladon? És mitől lesz hatékony?

Tartalomjegyzék
Bővített tartalomjegyzék

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, 2019. 05. 15. – Átrendeztük, és több ponton is kiegészítettük a bejegyzést.)

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.

A gomboknak 5 típusa van

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

  1. Kiemelkedő gomb – egy általában négyzet alakú (lekerekített sarkú) gomb, amelyik úgy néz ki, mint amit le lehet nyomni.
  2. Flat gomb – egy olyan négyzet alakú gomb, melynél nincsenek háromdimenziós hatások, azaz árnyékok, átmenetek, fények.
  3. Szellemgombok – olyan négyzet alakú gomb, melynek csak kerete van, de nincs kitöltve színnel.
  4. Szöveges gomb – amely pusztán szövegből áll.
  5. Lebegő akciógomb – kör alakú gomb, mellyel leggyakrabban az andoridos, material designt követő alkalmazásoknál találkozhatsz.
Egy kiemelkedő gomb, mely gombnak néz ki, és jelzi, hogy kattintható
Egy kiemelkedő gomb, mely gombnak néz ki, és jelzi, hogy kattintható

Teljesen mindegy, hogy az előbbiek közül melyik típust választod a weboldaladon, annak mindig azonnali visszajelzést kell adnia a felhasználónak, amikor az kapcsolatba lép vele. Ennek révén fogja tudni a felhasználó, hogy a weboldal vagy az alkalmazás a vártnak megfelelően működik.

Szellemgombok
Szellemgombok

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.

Gomb állapotok

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.

Elsődleges és másodlagos gomb
Elsődleges és másodlagos gomb

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.

A megfelelő kontrasztarány

A kontrasztarány a gomboknál azt fejezi ki, hogy mennyire tér el a gombon szereplő szöveg színe a gomb színétől. A World Wide Web Consortium (W3C) által ajánlott kontrasztarány a szövegeknél 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.
A megfelelő kontraszt gomboknál
A megfelelő kontraszt gomboknál

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:

Megfelelő távolságok szöveges gomboknál
Megfelelő távolságok szöveges gomboknál

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

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?

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

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.

lebego-akciogomb-mobilon
Erről lenne szó: a lebegő akciógomb

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.

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.

Comments are closed.