Menü

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

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.

Az A/B tesztelésről írtunk egy alapos cikket, érdemes újra elővenni. Elérhető ide kattintva!

Webfejlesztőt keresel? Segíthetünk?

Cikkünk megírásához sokévi webfejlesztői tapasztalatunkból merítettünk ihletet. Ha úgy érzed, hogy weboldalad, webshopod vagy online marketingedet hatékonyabbá tennéd, keress minket most, a téma szakértői vagyunk. Találkozzunk irodánkban, és egy kötetlen beszélgetés keretein belül beszéljük meg, mit szeretnél elérni, és mi hol, hogyan tudunk segíteni. Kattints ide, vedd fel velünk a kapcsolatot és vedd fel Velünk a kapcsolatot!