Barion Pixel
Segédlet

CTA lélektan- mitől klikkelsz egy kapcsolóra?

2021. július 22. | Bognár Péter

# # # # # # # #

Minden kereskedelmi célú weboldal, legyen az webshop, Landing Page, portfólió vagy egyéb, legfontosabb funkciója, hogy rábírja a látogatót, hogy kattintson. No nem csak úgy akárhova, hanem éppen, hogy arra a gombra, ami közelebb viszi a felhasználót ahhoz, hogy ügyféllé, vásárlóvá váljon. Ennek a csodálatos gombnak a megnyomására próbál rávenni a webdesignban Call To Action-nek (CTA, felhívás cselekvésre) nevezett motívum. Ez az az üzenet vagy bármilyen hatással bíró designelem, amin a legtöbbször a vágyott klikk múlik: egyes felmérések szerint az A/B tesztek (amikor tesztelési céllal egy honlapnak két, egymástól csak nagyon kevés elemben eltérő változatát párhuzamosan futtatják az interneten, hogy kiderüljön, melyik hoz jobb eredményeket) jó egyharmada a CTA-k tesztelgetésével telik. Szakemberek arra az eredményre jutottak, hogy egy átlagos és egy jó CTA közötti különbség akár a konverziók megkétszerezését is jelentheti.

A webdesigner számára nem újdonság, hogy kicsit mindenhez is kell értenie: a CTA sikerének jelentős része marketing, de még több tiszta pszichológia. Több olyan, a tudósok és pszichológusok eszköztárából kölcsönvett trükk is van, amivel kattintásra bírhatjuk a mit sem sejtő látogatót: vegyünk most sorra néhányat közülük!

Milyen a gombod?

A CTA két alapvető részből áll, az egyik ezek közül a gomb maga, amit meg kell nyomni. Az persze nyilvánvaló, hogy valami kiemelt gombra lesz szükség, bár technikailag egy sima link is alkalmas lenne a feladat betöltésére, egyrészt szeretnénk, ha egyértelmű lenne, hová is kell bökni az egérrel vagy ujjal a felhasználónak, másrészt a hagyományok is erre köteleznek, a megszokott reflexek ugyanis segítenek intuitívvá, gördülékenyebbé tenni a weboldal felhasználói élményét.  

A nyomógomb viszont olyan, mint Gombóc Artúr kedvenc csokoládéi: lehet kerek, szögletes, töltött, töltetlen, mindenféle… De hogy melyik a legjobb választás, azt több tényező is befolyásolhatja

Színek

Kép: Pexels

Közismert tény, hogy a színek nem lebecsülhető pszichológiai hatással vannak a szemlélő tudatára, ezt a hatást pedig a Call to Action gombokban is maradéktalanul ki kell aknázni. Vegyük gyorsan végig, hogy a fő színek milyen lélektani asszociációkhoz kapcsolódnak, milyen hangulatot vagy képzetet kelt a látványuk! Ne felejtsd el, hogy minden színhez kapcsolódhat pozitív és negatív asszociáció is, így ezt észben tartva kell őket alkalmazni a designban. A színek kiválasztásánál természetesen nem csak a szín hatását magában kell alapul venni, mindig a célközönség fejével kell gondolkoznod – gondold át, jellemzően milyen ember a prospektív ügyfél: férfi vagy nő, mi motiválja, mi érdekli, stb.  

Kék

  • pozitív: nyugalom, szeretet, hűség
  • negatív: hideg, félelem, férfiasság

Piros:

  • pozitív: szerelem, energia, erő, szenvedély
  • negatív: harag, veszély, figyelmeztetés

Zöld

  • pozitív: pénz, növekedés, termékenység, frissesség, gyógyulás
  • negatív: irigység, féltékenység, bűntudat

Citromsárga:

  • pozitív: fény, energia, kreativitás, intellektus, boldogság
  • negatív: felelőtlenség, instabilitás

Fekete

  • pozitív: védelem, drámaiság, elegancia, hivatalosság
  • negatív: halál, gonoszság, kiismerhetetlenség

Fehér 😉: 

  • pozitív: jóság, ártatlanság, frissesség, egyszerűség
  • negatív: ridegség, sterilitás, ízetlenség

Barna

  • pozitív: barátságosság, természet, természetesség, hagyományosság
  • negatív: konzervativitás, merevség

Narancs:

  • pozitív: bátorság, magabiztosság, siker, trendiség
  • negatív: tudatlanság, tohonyaság

Türkizkék:

  • pozitív: kifinomultság, spiritualitás, gyógyulás, védelem, high-tech
  • negatív: irigység, ridegség

Lila:

  • pozitív: nemesség, exkluzivitás, luxus, ambíció
  • negatív: rejtélyesség, érzelmi labilitás

Pink:

  • pozitív: együttérzés, nőiesség, vidámság, játékosság
  • negatív: gyengeség, komolytalanság

Persze ez nem minden, szín akad még bőven a skálán, de szerencsére az olyan oldalak, mint a Color Psychology segítenek alapos útmutatást nyújtani a választásban (bár az elemzéseik annyira részletesek, hogy a legtöbb színbe kb. mindent és annak az ellenkezőjét is bele tudják magyarázni).

Formák

A gombok formájának variálására is rengeteg lehetőségünk nyílik, akár kódból, akár grafikából oldjuk meg a klikkelhető objektumot. Itt is érdemes néhány alapvető szempontot észben tartani: 

A gomb mérete a fontosságát jelképezi, pontosabban fogalmazva az oldalon található gombok egymáshoz mért nagysága meghatározza, melyiket tartod a legfontosabbnak, melyikre várod a legtöbb, vagy legfontosabb klikket.

Az ívelt, kerek formák a kutatók szerint a gomb belseje felé terelik a figyelmet, míg a szögletes formák ellenkezőleg, a külső részek felé. A pszichológia mai állás aszerint az gömbölyded, ívelt alakzatok vonzóbbak a felhasználók számára. Ez persze nem jelenti azt, hogy ne lehetne szögletes gombokat használni, számos más eszközzel lehet a felhasználó figyelmét a megfelelő helyre fókuszálni, de az általános emberi természet, úgy tűnik, ebbe az irányba tendál.

Pozíció

Értelemszerű, hogy a gombnak és a hozzá tartozó üzenetnek olyan helyre kell kerülni az oldalon, ahol egyértelműen a felhasználó szemébe ötlik, lényegében kikerülhetetlen. A Landing Page tervezés egyik aranyszabálya, hogy már a nyitólapon, azaz az elsőre látható részletben szerepeljen a Call to Action gomb, ne kelljen semennyit görgetni ahhoz, hogy ránk köszönjön. Fontos, hogy ne simuljon túlságosan bele a környezetébe, a CTA egy nagyon határozott, sürgető üzenet. 

Persze a gombokat nem lehet önmagukban vizsgálni, rettentő fontos szempont, hogy hogyan illeszkedik egy gomb a honlap általános designjába. Hiába érzed úgy, hogy a fenti listából megtaláltad a leghatásosabb kombinációt, ha az gyökeresen elüt minden mástól, amit az oldalra elhelyeztél. Ha a brand vagy weboldal, amin dolgozol már egy kész formanyelvvel rendelkezik, kénytelen leszel ahhoz igazítani a CTA gombok külsejét is – természetesen így is ki kell, hogy tűnjenek, de valamilyen szinten be kell, hogy épüljenek az általános képbe. Ha nulláról van módod megtervezni a honlapot (mondjuk egy Landing Page esetében, ahol valóban a CTA köré épül fel minden és oda kell, hogy vezessen minden design-elem), érdemes fontolóra venni, hogy visszafelé, a CTA felől gondolkozva alakítsd ki a designt (gombhoz a kabátot, ahogy mondani szokták).

A felirat

A CTA gomb felirata nem lehet túlságosan hosszú, hiszen akkor már nem beszélhetünk gombról. Rövid, velős, lényegre törő üzenet, ami egyértelműen megfogalmazza, mit fog elérni a felhasználó, amikor az illető gombra klikkel. A szakmában a legjobban bevált frázisokat szerényen csak Power Wordnek nevezik. A hatalom e szavai természetesen már már mindenki számára szinte a közhelyesség határáig jól ismertek, de az a helyzet, hogy jobbat még senkinek nem sikerült találni. 

Az angol szakirodalomnak itt könnyű a dolga, hiszen az angol felszólító mód éppen hogy kidobja a személyes névmást a mondatból, így aztán az efféle cselekvésre felhívó szólamok rettentő tömörek, gombbarát hosszúságúak lesznek, ráadásul azzal sem kell bajlódniuk, hogyan legyen megszólítva a kedves ügyfél. A magyar szövegírónak jóval nehezebb a helyzete, itt mindenképpen az oldal szövegének alapvető stílusából kell kiindulni. Tegezed vagy magázod a látogatót? Illik-e az oldal stílusába, hogy egyes szám első személyben a felhasználó szájába adjad a felirat szövegét, vagy bizalmasan kézenfogva többes számban fogalmazol? Esetleg biztosabb a hűvösebb, személytelen stílus?

Lássunk néhányat a bevett angol kulcsfrázisok közül, lehetséges magyar változataikkal:

Get started – Indulás! Kezdjük el!

Sign Up Free – Ingyen feliratkozom/regisztrálok; Ingyenes feliratkozás

Join Free – Ingyen belépek; Ingyenes belépés

Try for Free – Ingyen kipróbálom; Próbálja ki ingyen! Ingyenes próba

Contact Us – Keressen fel! Lépjünk kapcsolatba! Kapcsolatfelvétel

Explore – Fedezze fel…

Add to Cart – Kosárba

Buy Now – Vásárlás; Megvásárolom

Schedule / Book a ... – Foglalj/Foglaljon helyet/időpontot; Időpont-foglalás

Enter Now – Belépek; Belépés; Lépjünk be!

Get 20% Off – 20% kedvezmény; 20% árengedmény

A felhívás szövege

A CTA fizikai megjelenésén túl persze alapvető fontosságú az a konkrét üzenet, amivel a gomb megnyomására biztatod az oldaladra tévedt felhasználót. Ezen a területen is sokat segíthet a pszichológia eszköztára. Lássunk egy csokornyit azokból a lélaktani tényezőkből, amiket az ügyes marketingesek már emberemlékezet óta próbálnak kihasználni:

Kép: Pixabay

A veszteség elkerülése: Mindenki utálja, ha elveszít olyat, ami az övé volt, legyen az pénz, idő, egyéb. Ez a trükk úgy fogalmazza meg a CTA-t, hogy az ne azt hangsúlyozza, mit nyerhet, hanem hogy pl. mit takaríthat meg a kedves vevő. A másik klasszikus technika hogy sürgőssé tesszük a döntést: a kupon határideje mindjárt lejár, az akciós pulóverből már csak 3 van raktáron. 

Dicsfény-effektus: Ez az az effektus, ami iszonyú fontossá teszi a minőségi brandinget és a kiváló UX-et a Landing Page-eken. Dióhéjban annyit jelent, hogy az első benyomás tartós és a design, a branding által kialakított alaphangulat, lelkiállapot a termékre és a klikkelési kedvre is kivetül.

Vissza nem térülő költségek érzése: Az a jól ismert érzés, amikor már órák óta keresed a megfelelő cipőt, és ha most feladod, akkor tényleg fölöslegesen vesztegettél el három órát az életedből. Ezek után ha az ember nem egy cipősdobozzal a kezében távozik a boltból, tényleg rosszabbul fog aludni… Ugyanezt az érzést a weben is reprodukálhatjuk, például egy kérdőíves Landing Page-dzsel, itt a befektetett idő fogja továbbhaladásra ösztökélni a leendő ügyfelet.

Sorozat effektus: A pszichológusok kifigyelték, hogy felsorolásokban a legelső és a legutolsó pozíció sokkal nagyobb figyelmet kap, mint a közbülsők, így a legfontosabb ajánlatokat így érdemes elhelyezni, például három kártyán , ahol a középső igazából csak egy alig álcázott placeholder. 

Verbatim effektus: a verbatim “szó szerint”-et jelent, ez a pszichológiai jelenség arról szól, hogy az emberek az elhangzottak lényegét fogják megjegyezni, nem a konkrét részleteket, és emiatt hajlamosabbak az adatok helyett szlogenekre, tömör reklám mondatokra szó szerint emlékezni (ugyanez az effektus persze működik pl. a politikában is, ezért próbálnak a propaganda-hírekben mindig ugyanazokkal a frázisokkal és kulcsszavakkal bombázni). A lényeg az, hogy nem lehet köntörfalazni, a CTA szövege legyen velős és lényegre törő, juttassa át a lényegi üzenetet a látogató tudatalattijába. 

Lehorgonyzás: írtam fent, hogy listákból az első tétel a legemlékezetesebb – ez vonatkozik más, csoportosított információkra is. Ezt az effektust kihasználva érdemes nagyon sok mindent elrendezni az oldalon, pl. a referenciák közül a leghízelgőbbet vagy legszemélyesebbet helyezzük az első pozícióba, de klasszikus trükk az is, amikor a különböző szolgáltatás-csomagok közül az első helyre egy nagyon drágát teszünk, és ehhez képest a normális ajánlat már sokkal megfizethetőbbnek tűnik. Ugyanez történik a leárazott árucikkeknél is: érdemes a magasabb, áthúzott árat előre helyezni, hogy annak fényében láthassa a felhasználó a szuper akciós árat.

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet SEO a Google-ön kívül?

SEO a Google-ön kívül?

2021. július 29.

A SEO (keresőoptimalizálás, Search Engine Optimization) kikerülhetetlen része a webdesignnak, egyszerűen muszáj gondolni rá, hogy az oldalunk kódja megfelelően kedvében járjon a keresőalgoritmusnak meg az ő pici robotjainak. Ha viszont SEO-ról beszélünk, nem is kérdés, hogy melyik is az a keresőmotor, amire mindenki gondol – hát persze, hogy a Google az, akitől kizárólag várhatjuk sorsunk […]

Tovább a cikkre