CTA lélektan- mitől klikkelsz egy kapcsolóra?
2021. július 22. Blog, Segédlet
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ö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ása szerint 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:
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.