+ All Categories
Home > Design > Lepší Call to Action

Lepší Call to Action

Date post: 13-May-2015
Category:
Upload: ondrej-machart
View: 167 times
Download: 2 times
Share this document with a friend
Description:
Call to Action neboli výzva k akci může být velmi silou zbraní designera při návrhu webových stránek, e-mailové kampaně, banneru či jakéhokoli jiného nástroje, kterým se snaží přimět ostatní lidi provést žádoucí činnost. V prezentaci projdeme celou řadu tipů, jak naše CTA vymazlit k dokonalosti.
72
Lepší Call to Action Optimalizace s příchutí psychologie Čtvrtkon #4 / 10.1.2013 v Horké Vaně Ondřej Machart / @sleepygraphic
Transcript
Page 1: Lepší Call to Action

Lepší Call to ActionOptimalizace s příchutí psychologie

Čtvrtkon #4 / 10.1.2013 v Horké Vaně

Ondřej Machart / @sleepygraphic

Page 2: Lepší Call to Action

1. Proč toto téma?

Page 3: Lepší Call to Action

Co se stalo?Uživatel internetu je bombardován prvky, které se snaží upoutat jeho pozornost a odradit jej od původního záměru, se kterým na web přišel.

Důsledek: Uživatelé se naučili podobné prvky ignorovat.

Co s tím?Je třeba nalézt způsoby, jak uživatelovu pozornost získat zpět.Protože se snažíme změnit chováníuživatelů, můžeme čerpat poznatkyz oboru psychologie.

Page 4: Lepší Call to Action

2. Co všechno je Call to Action?

Page 5: Lepší Call to Action

Call to action obecněCall to action (CTA) je jakákoli výzva, která využívá text (doprovázený často grafikou) a jejímž cílem je přimět uživatele k provedení žádané akce - například:- proklik- nákup- sdílení - stáhnutí souboru- přehrání videa- apod.

Call to action konkrétně- odkazy v textu- reklamní bannery- tlačítka- nadpisy článků- předmět infomailů- apod.

Page 6: Lepší Call to Action

3. Jak můžeme CTA vylepšit?

Page 7: Lepší Call to Action

Psychologie a Call to actionCílem CTA je přimět uživatele k akci, se kterou původně nepočítal. Psychologie jako věda zabývající se lidským chováním nabízí mnoho poznatků, které lze v návrhu účinného Call to action využít.

V následujících tipech se dozvíme:1. Jak optimalizovat text2. Jak formulovat nabídku3. Jak optimalizovat grafiku doplňující CTA

Cílem je využít tyto poznatkyke zvýšení konverze výsledného CTA.

Page 8: Lepší Call to Action

4. Text v CTAJak optimalizovat obsah sdělení

Page 9: Lepší Call to Action

4.1 Využití slovesAneb řekněte jim, co mají dělat...

Page 10: Lepší Call to Action

„Slovesa jsou část sdělení, která generuje nejvíce sdílení na Twitteru.“

- Dan Zarella, výzkumník sociálních médií

Proč využívat slovesa?- Vyjadřují skutečnou akci.- Ujasňují, jakou akci po uživateli chceme.

Na co si dát pozor?- Čím více sloves v jednom sdělení, tím menší účinek.- Fráze typu "Klikněte sem" nefungují.

Page 11: Lepší Call to Action

Zdroj: HubSpot

Page 12: Lepší Call to Action
Page 13: Lepší Call to Action

4.2 Ideální počet znakůAneb méně je více...

Page 14: Lepší Call to Action

„S ohledem na množství konkurenčních nabídek je rozumné předpokládat, že máte jen omezený prostor pro to, abyste uživatele zaujali a udrželi jeho pozornost.“

- Simms Jenkins, CEO @Brightwave marketing

Jaký je tedy optimální počet znaků ve sdělení?- 30 až 150 znaků

Na co si dát pozor?- Nezkracovat sdělení, pokud by utrpěl jeho význam a smysl.

Užitečná technika je napsat celé sdělení, které pakzkrátíme na polovinu, přičemž odstranímejen části, které jsou skutečně navíc.

Page 15: Lepší Call to Action

Zdroj: HubSpot

Page 16: Lepší Call to Action
Page 17: Lepší Call to Action

4.3 Využití číselAneb hrátky s počty

Page 18: Lepší Call to Action

„Čísla jsou skvělý způsob, jak se zbavit nejasnosti, být konkrétní o své nabídce a nastavit správná očekávání.“

- Magdalena Georgieva, Marketing manager @Hubspot

Proč využívat čísel?1. Čísla udávají konkrétní údaj o tom:- kolik toho uživatel dostane, - za kolik to dostane,- na jak dlouho apod.2. Člověk i při skenování obsahu vnímá čísla samostatně.3. Čísla pomáhají překonat vágnost obecných tvrzení.

Page 19: Lepší Call to Action

Zdroj: HubSpot

Page 20: Lepší Call to Action
Page 21: Lepší Call to Action
Page 22: Lepší Call to Action

4.4 Efekt urgentnostiAneb co neuděláte dnes, neuděláte

Page 23: Lepší Call to Action

„Abyste vytvořili účinnou naléhavost, budete muset odpovědět na otázku "proč bych to měl udělat dnes?“

- Magdalena Georgieva, Marketing manager @Hubspot

Proč využívat naléhavost?- Vytváří pocit urgentní nutnosti provést danou akci.- Pozor, je rozdíl mezi naléhavostí a nátlakem.

Page 24: Lepší Call to Action

Zdroj: HubSpot

Page 25: Lepší Call to Action
Page 26: Lepší Call to Action

4.5 Cliffhanger efektAneb položte otázku

Page 27: Lepší Call to Action

„Lidé nemohou vystát nejistotu. Máme tendenci co nejdříve najít odpovědi na zajímavé a nezodpovězené otázky.“

- Vitaly Friedman, Editor-in-Chief @SmashingMagazine

Proč klást v CTA otázky?- Otázky, zejména provokativní, zvyšují zájem uživatelů o obsah sdělení.- Bluma W. Zeigarnik (1927):

- Vytváří se emocionální spojení mezi čtenářem a sdělením.- Čtenáři si lépe pamatují obsah sdělení.

Page 28: Lepší Call to Action

Autor: Jaroslav Foglar

Page 29: Lepší Call to Action

4.6 Umístění odkazu v CTAAneb kam s ním

Page 30: Lepší Call to Action

„Uživatelé raději provedou akci okamžitě, než aby se vraceli a hledali odkaz někde uprostřed věty.“

- Anthony T, Founder @UX Movement

Proč umístit odkaz na konec CTA?- Odkaz je tak jednodušší a rychlejší najít.- Uživatel po dočtení naváže akcí, nemusí se vracet a hledat odkaz.

Page 31: Lepší Call to Action

Zdroj: Smashing Magazine

Page 32: Lepší Call to Action

5. Nabídka a CTAJak optimalizovat nabídku

Page 33: Lepší Call to Action

5.1 Efekt reciprocityAneb chci vrátit laskavost

Page 34: Lepší Call to Action

„Neměli byste se stydět požádat uživatele o vrácení laskavosti.“

- David Travis, Psycholog a kanzultant @UserFocus

Jak to funguje?1. Nabídneme uživateli drobný dárek.

- kapitola z knihy zdarma- užitečná informace (článek)- zkušební verze produktu zdarma

2. Vznikne podvědomý pocit zavázání k vrácení laskavosti3. Požádáme o vrácení laskavosti

- koupě celé knihy, pokud zaujala kapitola- doporučení či sdílení (článek apod.)- jakákoli jiná akce

Page 35: Lepší Call to Action
Page 36: Lepší Call to Action

5.2 Efekt stádaAneb chci být všude tam, kde jsou ostatní

Page 37: Lepší Call to Action

„Sledujeme, co dělají jiní, abychom dle toho posoudili, co je běžné a pak toto chování zkopírovali.“

- David Travis, Psycholog a kanzultant @UserFocus

Jak to funguje?1. Sbíráme data o aktivitě uživatelů

- počet lajků- počet sdílení- počet registrací- počet stažení apod.

2. Tato data prezentujeme v kontextu k nabídce- "Přidejte se k 1 milionu zaregistrovaných uživatelů."- Stáhněte si knihu, kterou již četlo 100.000 designerů."a apod.

Page 38: Lepší Call to Action
Page 39: Lepší Call to Action
Page 40: Lepší Call to Action

5.3 Goldilocks effectAneb beru zlatou střední cestu

Page 41: Lepší Call to Action

„Lidé nejsou velmi zdatní při odhadování skutečné hodnoty toho, co nakupují. Využívají tak srovnání s jinými alternativami a to i s těmi, které jim sami nabídnete.“

- David Travis, Psycholog a kanzultant @UserFocus

Jak to funguje?1. Vytvoříme základní verzi toho, co nabízíme.2. Přidáme levnější "Basic" verzi s významnými omezeními.3. Přidáme "Golden" verzi s drobnými výhodami.4. Prezentujeme srovnání všech 3 verzí s důrazem na ekonomicky výhodnou "střední" variantu.

Ve výsledku si lidé "racionálně" zvolí střední cestu, protože budou mít pocit, že ušetřili, ale přitom získaliplnohodnotný produkt.

Page 42: Lepší Call to Action
Page 43: Lepší Call to Action
Page 44: Lepší Call to Action

5.4 Salience effectAneb zajímá mě to, co právě řeším

Page 45: Lepší Call to Action

„Během nákupního procesu je několik míst, ve kterých je uživatel ochoten věnovat zvýšenou pozornost nabídkám souvisejících s jeho aktuálním nákupním chováním.“

- David Travis, Psycholog a kanzultant @UserFocus

Jak to funguje?1. Ke každé nabídce vytvoříme seznam komplementárních nabídek.2. Tyto komplementy nabízíme ve vhodných momentech.

- v detailu produktu- v průběžném přehledu nákupního košíku- před potvrzením nákupu (před platbou)

Page 46: Lepší Call to Action
Page 47: Lepší Call to Action
Page 48: Lepší Call to Action

5.5 Ambassador effectAneb chci se ujistit, že jsem udělal správné rozhodnutí

Page 49: Lepší Call to Action

„Chceme věřit tomu, že naše chování je konzistentní s tím, čemu věříme. Jakmile zaujmeme nějaký viditelný postoj, cítíme potřebu jej obhájit.“

- David Travis, Psycholog a kanzultant @UserFocus

Jak to funguje?1. Po provedení akce dáme uživateli možnost vyjádřit svůj postoj.

- "olajkování" produktu, který koupil- doporučení produktu ostatním- sdílení akce ("koupil jsem si XYZ") na soc. sítích

2. Tím, že uživatel tuto možnost využije, nastanou dva jevy:- uživatel je emocionálně svázán s akcí - uživatel doporučí ostatním provedení stejné akce

= Stane tzv. Ambassadorem (značky, produktu).

Page 50: Lepší Call to Action
Page 51: Lepší Call to Action

6. Grafika a CTAJak optimalizovat vzhled sdělení

Page 52: Lepší Call to Action

6.1 Teplé a studené barvyAneb teplá letí, studená se topí

Page 53: Lepší Call to Action

„Během amerických prezidentských voleb měli všichni kandidáti na svém webu tlačítko (pro zaslání finanční podpory) v červené barvě.“

- Dmitry Fadeyev, autor @UsabilityPost

Jak to funguje?1. Teplé barvy na pozadí studených barev vyhodnocuje mozek jako objekty, které se "vznášejí" nad pozadím.2. Naopak studené barvy na pozadí teplých barev se jeví jako kdyby se "topily" a nořily do pozadí.

Jak to využít?Jednoduše. Akční prvky (tlačítka, odkazy apod.)by měly být v teplých barvách a pozadí ve studených.

Page 54: Lepší Call to Action
Page 55: Lepší Call to Action
Page 56: Lepší Call to Action

6.2 Lidská tvářAneb to první, co rozpoznáme

Page 57: Lepší Call to Action

„Lidé instinktivně rozpoznají cizí obličej, jakmile vstoupí do jejich zorného pole. “

- Dmitry Fadeyev, autor @UsabilityPost

Jak to funguje?1. Tvář je první, co v jakémkoli designu či shluku prvků člověk rozpozná.2. Nejvíce pozornosti pak poutají oči.

Jak to využít?Jakoukoli nabídku můžeme doprovodit lidskou tváří.Strhneme tak prvotní pozornost na oblast s naší nabídkou.

Page 58: Lepší Call to Action
Page 59: Lepší Call to Action

6.3 Pohled očíAneb kam to kouká?

Page 60: Lepší Call to Action

„Ukázalo se, že máme tendenci podívat se směrem, kterým kouká osoba na fotografii.“

- Dmitry Fadeyev, autor @UsabilityPost

Jak to funguje?1. Uživatel nejprve rozpozná tvář a ta strhne jeho pozornost.2. Uživatele poutají nejvíce oči.3. Pokud se člověk na fotografii dívá jiným směrem, uživatel tento směr kopíruje.

Jak to využít?Tvář doprovázející nabídku můžeme komponovat tak, aby sledovala text nabídky a CTA.

Page 61: Lepší Call to Action

Zdroj: Smashing Magazine

Page 62: Lepší Call to Action

Zdroj: Smashing Magazine

Page 63: Lepší Call to Action

6.4 Viscerální designAneb automatický (dis)like

Page 64: Lepší Call to Action

„Design ovlivňuje, jaký prožitek mají uživatelé z produktu, na třech rovinách - viscerální, behaviorální a reflektivní.“

- Donald Norman, profesor kognitivních věd @Nielsen Norman Group

Jak to funguje?1. Viscerální rovina prožitku designu je podvědomá a biologicky naprogramovaná.2. Na této rovině automaticky posuzujeme, zda se nám určité věci líbí nebo nelíbí.(Např. Pavouci, hniloba - nelíbí. Symetrické objekty, hezcí lidé - líbí.)

Jak to využít?Pro grafiku doprovázející CTA můžeme využít symboly,které lidé automaticky považují za líbivé.

(A naopak se můžeme vyhnout chybám.)

Page 65: Lepší Call to Action
Page 66: Lepší Call to Action

6.5 Další tipy ke graficeAneb co už by se nevešlo...

Page 67: Lepší Call to Action

Negativní prostorVelká plocha, málo obsahu, dojem čistoty. CTA přitáhne pozornost.

KontrastUmožňuje oddělit CTA od všeho ostatního a poutat pozornost.

SměrŠipky dokáží nasměrovat pohled uživatele ke správnému místu.

a další...

Page 68: Lepší Call to Action
Page 69: Lepší Call to Action
Page 70: Lepší Call to Action
Page 71: Lepší Call to Action

InspiraceSmashingMagazine.com- ebook Psychology of web design- ebook User experience design- ebook Professional web designEmotional Design - kniha od Donalda NormanaBlog.hubspot.com- ebook Mastering the design & copy of call to action- ebook Effective call to action- ebook 102 examples of effective call to actionZbraně vlivu - kniha od Roberta B. CialdinihoMyšlení, rychlé a pomalé - kniha od Daniela Kahnemana

Page 72: Lepší Call to Action

Díky za pozornostČtvrtkon / Ondra Machart @sleepygraphic


Recommended