A következő tanfolyam indul

2017. október 19.
akciogomb_6

Hogyan készítsünk hatásos akciógombokat?

Egy weboldal hatékonyságát leginkább az oldalon végrehajtott konverziók (pl. regisztráció, vásárlás, letöltés, feliratkozás, árajánlat-kérés) számában mérhetjük. Mit ér a jól kialakított struktúra, a minőségi tartalom és a profi design, ha egyetlen interakció sem történik a honlapon? A weboldalak fontos kulcselemei éppen ezért az ún. call-to-action gombok, melyek az UI és az UX design részét is képezik. A CTA gombok amellett, hogy felkeltik a látogatók figyelmét, cselekvésre is ösztönzik őket, mi pedig elégedetten dőlhetünk hátra, hiszen megtörténik az áhított regisztráció, a hírlevélre történő feliratkozás vagy éppen az árajánlat-kérés. Ehhez azonban az kell, hogy hatásos akciógombokkal vértezzük fel az általunk tervezett honlapot. Lássuk, hogy hogyan!

A legtöbb weboldal sablon tartogat számunkra beépített akciógombokat, amelyeket akár át is dizájnolhatunk, azonban mi magunk is készíthetünk kreatív és hatásos CTA gombokat. A következőkben azt mutatjuk be Nektek, hogy mire kell figyelni, ha call-to-action gombokat helyezünk el a weboldalon, milyen trükkökkel tudjuk őket hatékonyabbá tenni.

  • A megfelelő elhelyezés már félsiker, ugyanis ha kieső területre helyezzük az akciógombot, a látogató még csak észre sem tudja venni, a számunkra  értékes konverzió pedig elmarad. A CTA gombokat tehát mindig a kezdőoldalra, illetve a releváns tartalom, a meggyőző érvek, az aktuális akció mellé/alá, valamint a landing/sales oldalra illesszük be, és az érdeklődőnek már csak kattintania kell!
  • A másik fontos sikertényező a figyelemfelkeltés. Ezt többek között nagyítással, kontrasztokkal, kiemelésekkel, nyilakkal, szövegezéssel, különböző effektekkel, kiegészítő elemekkel érhetjük el.

Nézzük is a példákat!

Egy nagy méretű, háttérből kiemelkedő akciógombbal biztos a figyelemfelkeltés. (A piros színt azonban lehetőleg kerüljük, ugyanis az a tiltás/veszély jele.) Ha az adott weboldal, annak designja, stílusa határt szab ebben a kérdésben, akkor nyugodtan válasszunk a háttérrel azonos színű, a háttérbe beleilleszkedő CTA gombot. Azonban ilyen esetben az akciógombot egyéb eszközökkel, például vastagabb kerettel, rámutató nyilakkal és szöveggel emeljük ki!

akciogomb_1

 

Az akciógomb minden esetben kattintható, és ezt érdemes is megerősíteni például nyilakkal, valamint lenyomható hatás alkalmazásával.

akciogomb_2

A CTA gombokra nyilakkal, körberajzolással, kedves figurákkal is ráirányíthatjuk a látogatók figyelmét.

akciogomb_3

 

akciogomb_4

A cselekvésre ösztönzést az adott cselekvésre utaló ikonokkal (pl. kosár = vásárlás, lefelé mutató nyíl = letöltés) is erősíthetjük, így az érdeklődőt is segítjük, hiszen egyértelmű lesz számára, hogy ha kattint, akkor pontosan mi fog történni.

akciogomb_5

Az akciógombokat plusz információkkal is elláthatjuk, amelyek szintén a konverziók számának növekedéséhez járulhatnak hozzá.

akciogomb_6

+ Ha több akciógombot is alkalmazunk ugyanazon a helyen, akkor a konverzió szempontjából fontosabbat emeljük ki az imént bemutatott trükkökkel.

 

Ti készítettetek már saját CTA gombot? :)

 

Hozzászólások