• UI A UX

Získajte kliknutie: 8 tipov pre efektívny dizajn CTA

  • Felix Rose-Collins
  • 5 min read
Získajte kliknutie: 8 tipov pre efektívny dizajn CTA

Úvod

Dostať sa na prvú stránku výsledkov vyhľadávania Google a upútať pozornosť publika je skutočná výzva, pretože ľudia len zriedkakedy kliknú na výsledok na druhej stránke. Optimalizácia vašej stránky pre SEO je nevyhnutnosťou na dosiahnutie tohto cieľa.

To však neznamená, že umiestnenie v prvej desiatke rebríčka vám nevyhnutne zabezpečí dobrý konverzný pomer. Je pravda, že môžete očakávať zvýšenie návštevnosti webovej stránky, ale pre konverzie je rozhodujúci ďalší prvok - účinná výzva na akciu.

Hlavnou úlohou CTA je nasmerovať návštevníkov k ďalšiemu kroku a povzbudiť ich k akcii - prihlásiť sa k odberu noviniek, stiahnuť si elektronickú knihu, kúpiť produkt alebo službu alebo sa zaregistrovať na skúšobnú verziu.

Avšak zle navrhnutý CTA je rovnako dobrý ako žiadny, pretože nebude generovať kliknutia a uľahčovať konverzie.

V tomto článku sa budeme venovať najlepším tipom na navrhovanie neodolateľných CTA, na ktoré vaši potenciálni zákazníci nebudú môcť nekliknúť. Čítajte ďalej a dozviete sa viac!

1. Použite lepivý bočný panel CTA

CTA majú za úlohu upútať pozornosť návštevníkov a prinútiť ich kliknúť.

Niektoré webové stránky, ako napríklad domovské stránky alebo príspevky na blogu, majú veľa obsahu a je ľahké, aby sa CTA zmiešali s ostatnými prvkami a stali sa prakticky neviditeľnými.

Zoznámte sa s nástrojom Ranktracker

Platforma "všetko v jednom" pre efektívne SEO

Za každým úspešným podnikaním stojí silná kampaň SEO. Pri nespočetnom množstve optimalizačných nástrojov a techník, z ktorých si môžete vybrať, však môže byť ťažké zistiť, kde začať. No už sa nemusíte báť, pretože mám pre vás presne to, čo vám pomôže. Predstavujem komplexnú platformu Ranktracker na efektívne SEO

Konečne sme otvorili registráciu do nástroja Ranktracker úplne zadarmo!

Vytvorenie bezplatného konta

Alebo sa pri hláste pomocou svojich poverení

Zadajte lepivý bočný panel CTA.

Toto plávajúce tlačidlo je pripevnené na boku webovej stránky a zostáva viditeľné, keď používateľ posúva stránku nahor a nadol, bez toho, aby bolo príliš rušivé alebo rozptyľujúce. Nemusíte sa obávať, či potenciálny zákazník zabudne na vašu úžasnú ponuku, zatiaľ čo číta článok alebo si prezerá recenzie zákazníkov.

Spoločnosť ATH Sport poskytuje 10 % zľavu na prvú objednávku a propaguje tento stimul na svojej domovskej stránke a na celom svojom webe zavedením lepivého bočného panela CTA s textom "Save 10%". Týmto spôsobom sa návštevníkom nenápadne pripomína, aby podnikli kroky a uplatnili si zľavu.

Use a sticky sidebar CTA (Zdroj: ATH Sport)

2. Využitie negatívneho priestoru

Jednou z najväčších chýb, ktorých sa môžete dopustiť, je umiestnenie CTA uprostred obrovského bloku textu. Je to spoľahlivý spôsob, ako ju návštevníci prehliadnu a odídu bez konverzie.

Nebojte sa čo najlepšie využiť negatívny priestor, teda oblasť návrhu, ktorá nie je obsadená textom alebo inými prvkami. Obklopením tlačidla CTA bielym priestorom môžete vytvoriť vizuálny zlom, ktorý pomôže upriamiť pozornosť diváka na tlačidlo.

Čím menej rozptyľujúcich prvkov sa nachádza okolo CTA, tým lepšie sa naň kliká.

Zoznámte sa s nástrojom Ranktracker

Platforma "všetko v jednom" pre efektívne SEO

Za každým úspešným podnikaním stojí silná kampaň SEO. Pri nespočetnom množstve optimalizačných nástrojov a techník, z ktorých si môžete vybrať, však môže byť ťažké zistiť, kde začať. No už sa nemusíte báť, pretože mám pre vás presne to, čo vám pomôže. Predstavujem komplexnú platformu Ranktracker na efektívne SEO

Konečne sme otvorili registráciu do nástroja Ranktracker úplne zadarmo!

Vytvorenie bezplatného konta

Alebo sa pri hláste pomocou svojich poverení

Spoločnosť Flamingo dáva CTA na svojej domovskej stránke dostatok priestoru a oddeľuje ju od ostatných prvkov, čím upriamuje pozornosť návštevníkov na hlavný cieľ - pridanie sledovača odchodov do služby Slack. Napriek veľkému množstvu bieleho priestoru dizajn nepôsobí prázdne ani nedokončené, takže kľúčové je dosiahnutie správnej rovnováhy.

Leverage negative space (Zdroj: Flamingo)

3. Vytvorenie pocitu naliehavosti

Naliehavosť a nedostatok sú silnými hnacími silami konverzie, a preto by ste mali tieto psychologické princípy zahrnúť do svojej kópie CTA.

Vezmite si príklad z Amazonu a ich šikovného upozornenia "Na sklade zostáva už len 1/2/3", ktoré aj nerozhodných zákazníkov nabáda, aby si produkt objednali hneď, než ho niekto iný zoberie.

Ľudia vnímajú produkty, ktorých je málo alebo ktoré sa čoskoro vypredajú, ako cennejšie, čo vyvoláva strach z ich zmeškania (FOMO).

Ak chcete zdôrazniť naliehavosť, použite slová na načasovanie, ako napríklad Teraz, Ihneď alebo Dnes.

CTA na domovskej stránke spoločnosti Bed Bath & Beyond je skvelým príkladom kombinácie naliehavosti a nedostatku. Zákazníci sú vyzvaní, aby "Nakupovali teraz", pretože ponuka platí do 8. januára, ale toto okno príležitosti je dodatočne minimalizované pridaním "Do vyčerpania zásob". Skutočnosť, že samotná CTA je v rámci veľkého červeného bannera umiestneného nad záhybom, ju robí ešte výraznejšou a presvedčivejšou.

Create a sense of urgency - Bed Bath & Beyond (Zdroj: Bed Bath & Beyond)

Januárová domovská stránka obsahuje CTA s trochu iným prístupom k naliehavosti. Starostlivo vytvorená formulácia "Pridajte sa na čakaciu listinu" vytvára okolo aplikácie rozruch a vytvára dopyt tým, že naznačuje, že na spustenie netrpezlivo čakajú ďalší potenciálni zákazníci. Táto jednoduchá, ale zaujímavá CTA funguje, pretože vyvoláva trochu exkluzívnu atmosféru - je to ako dostať sa na zoznam VIP klubu.

Create a sense of urgency - January (Zdroj: január)

4. Zahrňte silné slová

Ako naznačuje ich názov, silné slová majú schopnosť vyvolať vo vašich potenciálnych zákazníkoch emócie. 95 % nákupných rozhodnutí je podvedomých, čo znamená, že v tomto procese hrajú dôležitú úlohu pocity.

Takže vrátane slov ako napr.

  • Bezplatne
  • Úžasné
  • Nový
  • Účinné
  • Easy
  • Okamžite
  • Garantované
  • Žiadne riziko
  • Certifikované
  • Chránené
  • Testované
  • Overené
  • Extra

zabrnká na tú správnu strunu u vášho publika a prinúti ho konať.

Ako vidíte, niektoré z týchto slov majú za cieľ presvedčiť zákazníkov, že je bezpečné kliknúť na tlačidlo a uskutočniť nákup alebo sa prihlásiť k odberu noviniek. Iné sa zameriavajú na zdôraznenie hodnotovej ponuky vašej ponuky.

Domovská stránka Evernote používateľomsľubuje, že si pomocou aplikácie budú môcť zorganizovať svoj život, zatiaľ čo CTA ich láka na bezplatnú registráciu. A kto by mohol odmietnuť takúto lákavú ponuku?

Include power words - Evernote (Zdroj: Evernote)

Podobne aj CTA na domovskej stránke služby BaseLang vyzýva používateľov, aby začali s výučbou španielčiny "len za 1 dolár", čo je ďalšia najlepšia vec, ktorá ponúka bezplatné služby. Celkové posolstvo značky naberá na sile pomocou ďalších silných slov, ako sú "neobmedzené" alebo "all-you-can-eat", ktoré komunikujú hodnotu ponuky, ktorú si potenciálni zákazníci môžu vyskúšať na týždeň a zaplatiť symbolický poplatok 1 dolár.

Include power words - BaseLang (Zdroj: BaseLang)

5. Urobte svoj CTA pop

Pravdepodobne ste už počuli o pravidle 15 sekúnd, podľa ktorého máte len štvrť minúty na upútanie pozornosti návštevníkov. To vám nedáva príliš veľa priestoru na manévrovanie, čo znamená, že musíte konať rýchlo a uistiť sa, že CTA patrí medzi prvé veci, ktoré si ľudia všimnú, keď pristanú na vašej webovej stránke.

Jedným z najlepších spôsobov, ako dosiahnuť tento cieľ, je striekanie farieb. Existujú rôzne názory na to, ktorá farba zvyšuje konverzie, ale porota sa v tomto smere ešte stále nevyjadrila. Dá sa však bezpečne usúdiť, že nejde ani tak o to, či zvolíte červenú, zelenú, modrú alebo žltú, ale o vytvorenie kontrastu.

Môžete napríklad použiť takzvané doplnkové farby, ktoré sú na opačných stranách farebného kruhu. Ak je vaša webová stránka prevažne modrá, potom oranžová CTA vytvorí silný kontrast.

Domovská stránka spoločnosti Menlo Caoching je biela a sivá, takže výrazná červená farba, ktorú zvolili pre CTA, ju robí okamžite viditeľnou. Dizajn ťaží aj z negatívneho priestoru, ktorý dodatočne zvýrazňuje tlačidlo CTA a dáva mu vyniknúť na neutrálnom pozadí.

Make your CTA pop (Zdroj: Menlo Coaching)

6. Nebuďte neurčití

Neočakávajte, že si návštevníci sami urobia závery o tom, čo sa stane ďalej - povedzte im to.

Tlačidlá CTA s nápisom "Kliknite sem" alebo "Odoslať" ľudí len zmätú, a to je to najhoršie, čo môžete urobiť.

Trik spočíva v tom, aby ste návštevníkom jasne oznámili, aký úžitok im prinesie akcia, a informovali ich o ďalšom kroku.

Dropbox používa tento prístup "čo je pre mňa" na svojej domovskej stránke, keď potenciálnym zákazníkom hovorí, že kliknutím na tlačidlo CTA si budú môcť nájsť najlepší plán pre seba. Je zrejmé, že na ďalšej stránke nájdu podrobnosti o pláne, funkcie a porovnania, ktoré im pomôžu pri rozhodovaní.

Don’t be vague (Zdroj: Dropbox)

7. Pridajte sociálny dôkaz

Keď ide o konverziu potenciálnych zákazníkov, nič nefunguje lepšie ako sociálny dôkaz. 87 % nákupných rozhodnutí začína online prieskumom, pričom zákazníci si pred zadaním objednávky prečítajú v priemere desať recenzií.

Keďže však nechcete, aby vaši potenciálni zákazníci opustili vašu webovú lokalitu, kým hľadajú recenzie a posudky zákazníkov, je najlepšie ukázať im sociálne dôkazy priamo na mieste, skôr než im predložíte CTA.

Takto si vybudujete dôveru a rozptýlite prípadné pochybnosti o kúpe.

Presne to robí spoločnosť Buffer na svojej domovskej stránke. Ich CTA sú spojené s citátmi spokojných zákazníkov, ktorí zdôrazňujú, ako im používanie platformy uľahčuje život. Aby značka pridala ďalšiu vrstvu dôveryhodnosti, zahrnula mená a fotografie zákazníkov. Táto jednoduchá taktika je veľmi účinná, pretože dáva meno tvári a robí sociálny dôkaz autentickejším.

Add social proof (Zdroj: Buffer)

8. Udržujte veci jednoduché

Všetky tipy, o ktorých sme doteraz hovorili, vo vás môžu vyvolať dojem, že vaše CTA musia byť prehnané, aby fungovali.

Pravdou však je, že jednoduchosť sa často podceňuje.

Zoznámte sa s nástrojom Ranktracker

Platforma "všetko v jednom" pre efektívne SEO

Za každým úspešným podnikaním stojí silná kampaň SEO. Pri nespočetnom množstve optimalizačných nástrojov a techník, z ktorých si môžete vybrať, však môže byť ťažké zistiť, kde začať. No už sa nemusíte báť, pretože mám pre vás presne to, čo vám pomôže. Predstavujem komplexnú platformu Ranktracker na efektívne SEO

Konečne sme otvorili registráciu do nástroja Ranktracker úplne zadarmo!

Vytvorenie bezplatného konta

Alebo sa pri hláste pomocou svojich poverení

V mnohých prípadoch dosiahnete skvelé výsledky, ak zachováte jednoduchosť CTA z hľadiska dizajnu aj procesu konverzie.

CTA na domovskej stránke spoločnosti Jira spĺňa všetky požiadavky vďaka CTA "Pokračovať so službou Google". Diabol je v detailoch, a hoci sa tu zdanlivo nič moc nedeje, účinnosť tohto CTA spočíva v tom, že veľmi zjednodušuje situáciu pre tých, ktorí sa rozhodnú zaregistrovať.

Namiesto zložitého procesu registrácie šetrí Jira čas používateľov tým, že im umožňuje prístup k platforme prostredníctvom ich účtu Google. Zaberie to len pár kliknutí a odpadá otravné vypĺňanie formulárov, ktoré je zodpovedné za mnohé opustené registrácie a nákupné košíky. Navyše, kópia obsahuje to magické otvorene-samozrejmé silné slovo Free (zadarmo), ktoré dokáže presvedčiť zábudlivcov, aby klikli a pokračovali.

Keep things simple (Zdroj: Jira)

Zhrnutie

Výzva na akciu je síce najmenším dizajnovým prvkom na webovej stránke, ale jej význam je obrovský. Bez nej by potenciálni zákazníci nevedeli, čo od nich očakávate a aký by mal byť ich ďalší krok. Dôkladne preto zvážte dizajn svojich CTA a neznevažujte ich. Tieto taktiky vám pomôžu zabezpečiť, aby sa kliknutia len tak hrnuli.

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Začnite používať Ranktracker... zadarmo!

Zistite, čo brzdí vaše webové stránky v hodnotení.

Vytvorenie bezplatného konta

Alebo sa pri hláste pomocou svojich poverení

Different views of Ranktracker app