Keresés
Header Háttér

Webshark Blog

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

2017-09-070 komment

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.

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.