Menü

Nyomógomb tervezés a magasabb konverzió érdekében

2018. május 11. | 1067 |

Egy weboldal különböző elemekből épül fel, melyek közül az összes jelentős szerepet játszik a felhasználói élmény (UX), valamint a felhasználók cselekvésre ösztönzésében (Call To Action). Még az olyan elsőre aprónak tűnő elemek, mint a gombok is nagy figyelmet igényelnek, mert jelentős hatással vannak a weboldalon elérhető konverziókra. Cikkünkben néhány praktikus tanácsot osztunk meg a nyomógombtervezésről, melyek segítségével magasabb konverziót érhetünk el weboldalunkon.

Mi az a cselekvésre ösztönző (CTA) gomb?

A cselekvésre ösztönző (CTA) gomb egy webes és mobil, interaktív felhasználói elem. Fő célja az, hogy a felhasználókat olyan műveletekre ösztönözze, amelyek egy adott oldalon - mobil készülék esetén - képernyőn konverzióhoz vezetnek. Konverzió lehet például:

  • vásárlás

  • regisztráció

  • kapcsolatfelvétel

  • hírlevél feliratkozás

1. A nyomógomb nézzen ki gombnak

Egy weboldalon böngészve a felhasználóknak azonnal tudniuk kell, hogy melyik elem kattintható és melyik nem. Általánosságban az a tapasztalat, hogy minél több időt vesz igénybe a felhasználók számára annak eldöntése, hogy pontosan mi is a gomb, annál kevésbé fogják azt használni.
Hogyan dönti el a felhasználó, hogy melyik elem interaktív, vagyis kattintható és melyik nem? 

Minden felhasználó az eddigi tapasztalataira alapoz, vagyis arra hogy eddigi böngészései során mit látott és mi volt kattintható. Ezért elengedhetetlen a könnyen beazonosítható és megszokott vizuális elemek használata, mint a

  • méret

  • árnyékolás

  • forma

  • szín használata.

Amennyiben nehezen azonosítható a felhasználók számára az elemek kattinthatósága, akkor nem számít, hogy mennyire jó a weboldal design-a végül nem fogják használni az adott gombot.
A nem egyértelmű felismerhetőség még nagyobb problémát jelent a mobil felhasználók számára. Az asztali gépet használók a kurzor mozgatásával ellenőrizni tudják, hogy az adott elem vajon kattintható-e. Azonban a mobil készüléket használóknak nincs meg ez a lehetőségük, rá kell kattintaniuk a weboldal elemére, hogy kiderüljön az ténylegesen kattintható. Más módjuk nincs az interaktivitás ellenőrzésére.

Sose feltételezzük azt, hogy a felhasználóknak nem ugyanaz a magától értetődő mint nekünk! A saját honlapunk esetében tudjuk, hogy melyik elem pontosan milyen funkcióval rendelkezik. Ezért használjunk minden felhasználó számára felismerhető és könnyen azonosítható gombokat. Valamint a gombok mindig egyértelműen különüljenek el az oldal többi részétől.

  • Színes gomb szögletes széllel

  • Színes gomb lekerekített széllel

  • Színes gomb árnyékkal

  • Úgynevezett „szellemgomb”

2. Oda helyezzük el a gombokat, ahol a felhasználók számíthatnak rájuk

A gombokat a weboldal azon részére helyezzük el, ahol a felhasználók könnyen megtalálhatják, vagy ahol előreláthatólag számíthatnak rá. Amennyiben a felhasználók nem találnak egy gombot, nem is tudják, hogy egyáltalán létezik. Így az konverziót sem fog eredményezni.

A legcélravezetőbb stratégia a gombok láthatóságának javítására, ha a felhasználók által már megszokott elrendezéseket használunk, így egyértelmű lesz hol találhatóak meg a gombok, és a konverzió is magasabb lesz, mintha keresniük kellene a gombokat.

3. Egyértelműen jelezzük mi történik a gombra való kattintással

A nem egyértelmű gombfeliratok nagymértékben csökkentik a felhasználói élményt (UX) és félrevezetik a felhasználókat. Egyértelműen írjuk rá a gombra, hogy mi fog történni, amikor a felhasználó rákattint! 

Egy példával szemléltetve, a gomb fölött a következő kérdést tesszük fel: „Törli az eddigieket?”
Két választási lehetőséget kínálunk fel:

  • „OK”

  • „Mégsem”

Elsőre egyértelműnek tűnhet, de sok felhasználó számára félreérthető lehet. Az „OK” használata helyett mindig használjuk a kérdésre adott egyértelmű választ, jelen példa szerint a „Törlés” – t. 

4. Megfelelően méretezzük a gombokat

A méretnek tükröznie kell a gomb fontosságát. Minél nagyobb egy gomb, annál fontosabb feladatot tölt be, annál értékesebb mind a felhasználók, mind a honlaptulajdonosok számára a vele való interakció. 

Gombok kiemelése

A legfontosabb, magyarán a legnagyobb konverziós értékű gombon egyértelműen látszódjon, hogy valóban az a legfontosabb. Minden esetben emeljük ki a cselekvésre ösztönző gombot (CTA). Növeljük meg a méretét, mivel a nagyobb gomb fontosabbnak is hat és használjunk az oldal többi részéhaz képest elütő, kontrasztos színt.

5. Használjunk kontrasztos színeket

A megfelelő színválasztás számos olyan tényezőtől függ, amelyek bonyolultabbá tehetik a felhasználók cselekvésre ösztönzését. A weboldal tervezése során figyelembe kell vennünk a magát az alapszínt, valamint a célközönségünk sajátosságait is. Egy fiataloknak szóló weboldal esetében nyugodtan használhatunk rikító színeket is, azonban egy híroldal eseténben már nem biztos hogy szerencsés a túlzottan rikító színek használata.

Azonban a kontrasztos színek használata növeli egy-egy gomb konverziós arányát és a felhasználói élményt (UX) is. A gyakorlatban ezt úgy érhetjük el, hogy a gombok és a weboldal háttérszínének ellentétesnek kell lenniük, hogy a cselekvésre ösztönző gomb (CTA) jól látható legyen.
Például ha a weboldal alapszíne világoskék, célszerű a gombok esetében piros vagy a sárga szín használata.

6. Fontos a sorrend

A gombok sorrendjének és elhelyezkedésének illeszkednie kell a felhasználó és a weboldal közötti kommunikációhoz. Például a gombbal amellyel tovább vagy előre léphetünk, logikailag az oldal jobb oldalán; amelyikkel pedig visszafélé lapozhatunk az oldal bal oldalán kell elhelyezkednie.

7. Ne használjunk túl sok gombot

A túl sok gomb használata gyakori probléma a weboldalak esetében. Amennyiben túl sok lehetőséget kínálunk fel a felhasználóknak, gyakran végül nem tudnak dönteni és nem fognak műveletet végrehajtani az oldalunkon. Szorítkozzunk a legfontosabb műveletekre, melyeket szeretnénk, hogy a felhasználók végrehajtsanak a weboldalunkon.

8. Használjuk az üres területeket eszközként

Az oldal üres területei (white space) az oldal elemei közötti tér. A legtöbben még mindig nem veszik figyelembe a weboldalak tervezése során a szerepét.

Az üres tér nem csupán egy weboldal háttere, hanem egy hatékony eszköz a kiemelésre. Minden website számos vizuális összetevőből épül fel, és az üres tér segít a felhasználóknak az ezek közötti eligazodásban az által, hogy elválasztja a különböző elemeket egymástól. A megfelelő mennyiségű üres tér segít a felhasználók figyelmében felhívásában, mivel általa észrevehetővé válik a cselekvésre ösztönző gomb.

9. Teszteljük

Amennyibe biztosan tudni akarjuk, hogy egy gomb megfelelően működik, teszteljük! Ez az aranyszabály nem csak a cselekvésre ösztönző (CTA) gombokra igaz, hanem a weboldal minden elemére is. 

A tesztelés lehetővé teszi a weboldal tulajdonosok számára, hogy folyamatosan javítsák a felhasználó élményt (UX) weboldalukon, miközben adatokat is gyűjtenek az eredményekről. Ez lehetővé teszi számukra hipotézisek kialakítását és jobban megismerjék, hogy bizonyos elemek miként befolyásolják a felhasználók viselkedését a honlapon belül. Ez természetesen azt is jelenti, hogy kiderülhet, hogy egy adott feltevésünk téves volt és változtatnunk kell rajta, hogy a weboldalunk minél hatékonyabban működjön.

Amikor egy változtatást tesztelünk, az A/B vizsgálat segít annak kiderítésében, hogy mely változtatások befolyásolják a felhasználói viselkedést a weboldalunkon, és melyek azok amik nincsenek semmi befolyással a felhasználóinkra.

Tetszett a cikk? Ne maradj le az újdonságokról!

Iratkozz fel és havonta egyszer küldünk egy összefoglaló e-mailt!