A gombok kulcsszerepet játszanak a felhasználói interakciókban, hiszen ezekkel kezdeményezi a látogató a fontos műveleteket (pl. vásárlás, kosárba tétel, fizetés). A gombok következetes elhelyezése és használata a weboldalon javítja a felhasználói élményt és megkönnyíti a navigációt. Színük, formájuk, méretük és elhelyezkedésük egyértelműen jelzi fontosságukat és céljukat, az egyértelmű feliratok pedig tájékoztatják a felhasználókat arról, hogy mi fog történni a kattintás után. Az alábbi szakértői cikket Boris Júlia készítette a Humanize csapatából.
A gombok végigkísérik a látogatót a vásárlói úton, egy jól elhelyezett és kialakított gomb segít az érdeklődőt vásárlóvá konvertálni.
A modern internetes oldalak és alkalmazások mögött gyakran rejtőzik egy láthatatlan, mégis annál fontosabb tervezési eszköz: a UI kit. Ez a webdesigner által egységes stílusban megtervezett grafikai elemekből álló gyűjtemény, használatával gyorsabban lehet következetes megjelenésű weboldalakat és alkalmazásokat létrehozni. Ha egy weboldal különböző részei eltérően néznek ki és viselkednek, a felhasználóknak meg kell tanulniuk, hogyan használják ezeket az elemeket. Egy UI kit egységesíti ezeket az interakciókat, ezáltal a weboldal sokkal intuitívabbá válik.
A következetesség csökkenti a kognitív terhelést, mivel a felhasználóknak nem kell minden alkalommal új interakciós mintákat megtanulni.
A weboldal használata élvezetesebbé válhat, és potenciálisan növelheti a konverziós arányokat is.
A UI kit készítésének lépései
1) Tervezés
- Milyen típusú weboldal lesz?
- Kik lesznek a felhasználók?
- Mik az ő igényeik és elvárásaik?
- Milyen az adott márka stílusa és hangvétele?
2) Alapvető stílusok definiálása
- Színpaletta
- Tipográfia (betűtípusok és szövegstílusok)
- Térközrendszer (weboldalon belüli elemek közötti eltartások).
3) UI komponensek tervezése
- Gombok
- Beviteli mezők
- Jelölőnégyzetek
- Navigációs menük
- Ikonok
Minden komponenst különböző állapotokkal tervezünk meg. Az újrahasználható komponensek biztosítják a következetességet és felgyorsítják a tervezési folyamatot. Ha egy stílust definiáltunk a UI kitben, akkor az a weboldal minden részén felhasználható. Ez nemcsak időt takarít meg, hanem biztosítja azt is, hogy az adott elem mindenhol ugyanúgy nézzen ki és viselkedjen, ami kiszámíthatóvá teszi a felületet a felhasználók számára.
A gombok
Ezek az elemek interaktív részei az oldalnak, amelyek arra ösztönzik a felhasználókat, hogy konkrét lépéseket tegyenek. Stílusuk (szín, forma, árnyék) összhangban van a weboldal általános designjával és a márka identitásával.
Első ránézésre egy gomb egyszerű elemnek tűnik, de több alkotóelemből áll. Általában téglalap alakú (szögletes vagy lekerekített sarkú) felület, amely tartalmaz egy feliratot és esetenként egy ikont is.
Több gombtípust használunk, melyek segítik a felhasználót megkülönböztetni a fontosat a kevésbé fontostól. A vizuális hierarchia alapján 4 féle gombot különböztetünk meg.
1. Elsődleges gomb, CTA (Call to Action)
Ezek a fő cselekvésre ösztönző gombok (pl. „Vásárlás most”). Színük, méretük és az oldalon való elhelyezkedésük kulcsfontosságú, mivel jelentősen befolyásolhatják a konverziós arányokat.
Elhelyezkedés
A látogatók figyelmét erősen befolyásolja, hogy mit látnak meg elsőre, ezért fontos, hogy a cselekvésre ösztönző gombok feltűnő helyen legyenek, érdemes a görgetés nélkül látható területre helyezni. Szintén érdemes figyelembe venni a felhasználók olvasási szokásait (természetes szemmozgás minták a weboldalakon: F- vagy Z-minta), és a CTA-kat a tekintetük által gyakran érintett területekre elhelyezni.
Hogyan válasszuk ki a CTA gomb színét?
Nincs “a” tökéletes szín, mivel a legjobb választás számos tényezőtől függ. Íme néhány szempont, amelyet érdemes figyelembe venni:
Kontraszt:
- A CTA gomb színének jelentősen el kell térnie a környezetétől. A cél, hogy a gomb azonnal megragadja a látogató figyelmét.
- Ha a weboldal designja főként világos színekből áll, akkor egy élénk, sötétebb színű gomb (például narancssárga, piros vagy sötétzöld) jól működhet. Fordítva, sötét háttér esetén világosabb gomb lehet a nyerő.
Márkaidentitás:
- A CTA gomb színének összhangban kell lennie a weboldal és a márka arculatával.
- Ne féljünk az alap színektől eltérő, kontrasztos színt alkalmazni a CTA gombhoz, ha az feltűnőbb.
Hozzáférhetőség:
- Győződjünk meg róla, hogy a színkombináció megfelel a hozzáférhetőségi irányelveknek (például WCAG). A megfelelő kontraszt elengedhetetlen a látássérült felhasználók számára.
Méret:
- A gomb méretének arányban kell lennie a környező elemekkel, és a fontosságát kell tükröznie. Az elsődleges CTA gombok általában nagyobbak, mint a másodlagosak.
Ha túl sok elsődleges stílusú gombot használunk ugyanazon az oldalon, az megnehezíti a felhasználók számára, hogy eldöntsék, melyik a legfontosabb művelet. Például egy oldal három egyformán hangsúlyos gombbal: „További információ”, „Regisztráció” és „Kapcsolat”.
2. Másodlagos gomb, szellemgomb
Az úgynevezett “szellem gombok” (átlátszó háttérrel és kerettel rendelkező gombok) másodlagos cselekvésekhez használhatók, mivel kevésbé vonják el a figyelmet. Ha egy elsődleges gomb mellett egy kevésbé hangsúlyos alternatívát szeretnénk kínálni, a szellemgomb tökéletes választás.
Egy termékoldalon a „Kosárba teszem” gomb lehet az elsődleges, míg a „Kívánságlistához adom” vagy a „Részletek megtekintése” lehet szellemgomb. Ez segít a felhasználó figyelmének irányításában anélkül, hogy a kevésbé fontos műveletek elvonnák a fókuszt. Például egy felugró ablakban a „Mégsem” gomb lehet szellemgomb az „OK” gomb mellett.
Fontos azonban megjegyezni, hogy a szellemgomboknak is jól láthatónak kell lenniük, ezért a körvonalának és a szövegnek megfelelő kontraszttal kell rendelkezniük a háttérrel. Ha a háttér túl zajos vagy a kontraszt alacsony, a szellemgombok nehezen észrevehetők lehetnek, ami ronthatja a felhasználói élményt.
3. Ikon gomb
Az ikon-gombok, amelyek csak egy ikont tartalmaznak szöveg helyett. Legfőbb előnyük, hogy helytakarékosak, így jó megoldást nyújtanak mobil applikációk menüjében, vagy különféle rendszersávokban, ahol sokféle funkciót kell megjeleníteni kis helyen. Fontos, hogy az ikon jelentése egyértelmű legyen, vagy szöveges magyarázattal legyen kiegészítve.
4. Lebegő akciógomb (FAB – Floating Action Button)
A lebegő akciógombok (FAB) a Google Material Designból váltak népszerűvé, és kiemelt funkciókhoz használhatók. Ezek az ikon gombok általában némi árnyékkal a képernyő jobb alsó sarkában foglalnak helyet.
A gombok állapotai
Minden gomb többféle állapotban jelenhet meg attól függően, hogy a felhasználó hogyan lép vele interakcióba. A gomboknak 5 állapota van:
- Alapállapot: a gomb normál megjelenése, amikor éppen semmi különös nem történik vele. Ilyenkor látszik, hogy a gomb kattintható és aktív.
- Hover állapot: amikor a felhasználó ráviszi a kurzort egy gombra, a gomb általában kiemelésre kerül valamilyen módon: például kicsit sötétebb vagy világosabb lesz a színe, esetleg enyhe árnyék vagy aláhúzás jelenik meg. Ez vizuális visszajelzést ad arról, hogy rá lehet kattintani.
- Lenyomott vagy aktív állapot: amikor a felhasználó lenyomja/klikkel, a gomb rövid ideig megváltozik – gyakran úgy, mintha benyomódna: például még sötétebb árnyalatot vesz fel, vagy éppen eltűnik az árnyéka – jelezve, hogy a kattintás megtörtént. Miután elengedi, visszaáll alapállapotba (vagy átmehet egy következő állapotba, ha pl. betöltés (loading) indul el a gomb helyén).
- Nem aktív állapot: ilyenkor a gomb nem interaktív (például egy „Küldés” gomb, amíg a kötelező mezők nincsenek kitöltve). Jó megoldás, ha egyszerűen a normál gombot ilyenkor áttetszővé alakítjuk, ezzel jelezve, hogy nem kattintható, mert habár a gomb
- Fókuszált állapot: ez főleg a billentyűzettel navigáló felhasználóknak fontos (illetve akadálymentességi szempontból). Fókuszállapotban a gomb általában kontúrt kap, jelezve, hogy éppen az van kiválasztva (pl. TAB-bal történő navigációnál).
Minden állapotnak konzisztensen illeszkednie kell a designba, de elég eltérőnek is kell lennie, hogy a felhasználó könnyen megkülönböztesse őket. A jól kialakított állapot-visszajelzés csökkenti a bizonytalanságot az oldalon – a felhasználó mindig tudni fogja, mit lehet csinálni egy gombbal és éppen történt-e valamilyen művelet.
A gombok mérete
A gombok méretének megtervezésekor egyszerre kell gondolni az esztétikára és a használhatóságra. A gomb legyen elég nagy ahhoz, hogy könnyen kattintható/tapintható legyen, akár egérrel, akár ujjal nyúlunk hozzá. Általános irányelv, hogy a fontos gombok minimum 40-48 pixel magasak és szélesek legyenek, ez nagyjából egy ujjbegy méretének felel meg, így mobilon is könnyen megnyomható. Kutatásokból az is kiderült, hogy a túl nagy, 72 px méret feletti gombok veszítenek hatékonyságukból.
Ez tehát azt jelenti, hogy a gombok minimális mérete 40px a maximális pedig 72 px. A gomb méretekkel nagyon egyszerűen fel tudjuk állítani a fontossági sorrendet is, a legkisebbtől a legnagyobbig, pl. a magas prioritású gomb mérete 72px, a közepes 56px és a legkevésbé fontos 40px. A vizuális hierarchiát a gombok kialakításánál is szem előtt kell tartanunk ugyanúgy mint a weboldal többi eleménél.
Gombokon lévő szöveg
Általános ajánlás, hogy ne legyen túl kicsi a betű: ~14-16px az ideális minimális betűméret webes gomboknál.
Gombok belső térközei és a külső távolságok
A gomb szélessége igazodjon a rajta lévő szöveghez: kerüljük, hogy a szöveg éppen csak kiférjen rajta. Hagyjunk oldalirányban is bőséges teret, sok design guideline ajánlja, hogy a gomb vízszintes paddingja legalább a gomb magasságának fele legyen. Például egy 48 px magas gomb esetén legalább ~24 px legyen a bal és jobb oldali belső margó, így a gombon lévő rövid szó is kényelmesen elfér és a gomb nem néz ki nyújtottnak vagy zsúfoltnak. A lényeg, hogy a gomb se túl lapos, se túl hosszú ne legyen kinézetre, a padding segítségével arányosítjuk.
A külső távolság pedig azt jelenti, hogy ha több gomb van egymás mellett vagy alatt, akkor azok között hagyjunk elegendő helyet, hogy ne érjenek össze és a felhasználó ne kattinthasson vagy tappolhassán véletlenül kettőre egyszerre. Webes szabványok javasolják, hogy legalább 8 pixel távolság legyen két kattintható elem között.
Zárásképpen:
Egy jól összeállított UI design kit, benne az aprólékosan megtervezett gombokkal, nagy segítséget nyújt egy webshop tulajdonosnak abban, hogy webáruházának felülete áttekinthető, egységes és felhasználóbarát legyen. Ennek megtervezésében érdemes szakemberhez fordulni, a Humanize csapata rengeteg tapasztalattal rendelkezik ezen a téren, és örömmel ad tanácsot. A gombok mint kiemelt interaktív elemek külön figyelmet érdemelnek: a megfelelő szín, méret, szöveg és elhelyezés alkalmazásával növelhető a konverzió, hiszen a vásárlók könnyebben végigmennek a kívánt úton.
