Minulý týden mi volal Petr, majitel e-shopu se sportovní výživou. „Máme pěkný web, ale lidé přidávají produkty do košíku a pak zmizí. Co s tím?“ Nepotřeboval hezčí banner ani nové fotky. Potřeboval pochopit, jak jeho zákazníci myslí.
Web není jenom vizitka. Je to prodavač, který nikdy nespí. A pokud nerozumíte psychologii lidí, kteří ho používají, prodává vám mizerně. Pojďme se podívat na to, jak pomocí designu ovlivnit rozhodování návštěvníků a proč fungují principy, o kterých většina majitelů webů neslyšela.
Proč vůbec řešit psychologii na webu?
Zákazníci se nerozhodují racionálně. Studie ukazují, že až 95 % rozhodnutí děláme podvědomě. Když někdo přijde na váš web, jeho mozek během 50 milisekund vyhodnotí, jestli vám může věřit. Aby se to vůbec stalo, web se musí načíst dostatečně rychle.
V tuhle chvíli nehrají roli vaše certifikáty ani to, kolik let jste na trhu. Hrají roli barvy, velikost písma, rozmístění tlačítek a stovky dalších detailů, které dohromady říkají: „Tohle je důvěryhodné místo“ nebo „Rychle pryč“.
A tady vstupuje do hry psychologie designu.
Barvy nejsou jen o tom, co vypadá hezky
Červená vs. modrá. Jeden z nejdiskutovanějších soubojů v designu. Červená zvyšuje srdeční tep, vyvolává naléhavost a nutí k akci. Modrá uklidňuje, buduje důvěru a působí profesionálně.
Ale není to tak jednoduché jako „použij červenou a prodáš víc“. Záleží na kontextu.
Jak to funguje v praxi?
E-shop s elektronikou: když prodáváte televizory nebo počítače za desetitisíce, lidé chtějí vědět, že vám mohou věřit. Modrá a bílá vzbuzují důvěru. Příkladem je Alza, která používá modrou jako hlavní barvu.
Časově omezený výprodej oblečení: když prodáváte limitovanou kolekci dresů, červená a oranžová říkají „rychle, než to zmizí“. Zoot a Bonami tyto barvy ve výprodejích často používají.
Zdravá výživa: bioprodukty často používají zelenou a hnědou. Tyto barvy máme spojené s přírodou a zdravím. Zkuste prodat bio quinou na webu s křiklavě růžovým pozadím. Taková kombinace bude působit rozporuplně.
Konkrétní implementace na webu
- Tlačítka s výzvou k akci (CTA): použijte kontrastní barvu, která vystupuje z celkového schématu. Pokud máte web v modrých tónech, oranžové nebo zelené tlačítko „Koupit“ přitáhne pozornost.
- Označení slevy: červená na štítku „Sleva 30 %“ není klišé. Je to psychologický podnět, který říká „tady se šetří“.
- Sekce podporující důvěru: pokud máte sekci s certifikáty, referencemi nebo zárukami, použijte modré nebo zelené odstíny. Pomáhají zmírnit obavy.
Sociální důkaz: lidé dělají to, co dělají ostatní
Sociální důkaz je psychologický princip, podle kterého lidé přejímají chování ostatních jako vodítko pro vlastní rozhodování, zejména v situacích nejistoty.
Představte si, že hledáte restauraci v cizím městě. Vidíte dvě vedle sebe. První je prázdná, druhá plná lidí. Kam jdete? Do té plné. Proč? Protože mozek vám říká: „Pokud je tam tolik lidí, musí to být dobré.“
Na webu to funguje stejně. Jmenuje se to sociální důkaz a jde o jeden z nejsilnějších psychologických principů v e-commerce. Podle studií čte 93 % lidí recenze před nákupem a 85 % jim věří stejně jako doporučení od kamaráda.
Jak implementovat sociální důkaz na web
Recenze přímo u produktu: nestačí mít odkaz „Recenze“ schovaný v patičce. Dejte hvězdičky a několik komentářů přímo pod cenu. Když zákazník vidí „158 hodnocení, průměr 4,7“, vnímá nákup jako méně rizikový.
Oznámení o aktuálních nákupech: malé vyskakovací okénko dole hlásí například „Někdo právě koupil tenhle produkt v Praze.“ Nefalšujte ho, ale propojte s reálnými daty z objednávek. Oznámení pak dává najevo, že je o váš produkt zájem.
Počet prodaných kusů: „Tento měsíc si koupilo 234 zákazníků.“ Funguje hlavně u produktů denní spotřeby. Dává to signál popularity.
Loga klientů nebo médií: pokud jste se objevili v médiích nebo spolupracujete se známými značkami, ukažte jejich loga přímo na domovské stránce, ne až pod tlačítkem „Reference“ s odkazem na PDF.
Co nefunguje
Falešné recenze. Lidé nejsou hloupí. Pokud máte 500 recenzí a všechny jsou pětihvězdičkové, vypadá to podezřele. Autentické hodnocení s průměrem 4,3, ve kterém jsou i negativní komentáře, působí věrohodněji než umělá dokonalost.
Princip nedostatku: když je toho málo, chceme to víc
Princip nedostatku je kognitivní zkreslení, při kterém lidé přisuzují vyšší hodnotu věcem, které jsou vzácné nebo omezeně dostupné, a jsou motivováni jednat rychleji, aby o ně nepřišli.
Worchel, Lee a Adewole dali v roce 1975 lidem ochutnávat sušenky ze dvou sklenic. V jedné bylo 10 sušenek, ve druhé 2. Sušenky byly úplně stejné. Lidé přesto hodnotili ty z téměř prázdné sklenice jako chutnější.
Nedostatek zvyšuje vnímanou hodnotu. Proto se běžecké tenisky z „limitované edice“ mohou vyprodat během hodiny.
Jak použít nedostatek bez toho, abyste působili jako spamová reklama
Časové omezení: „Sleva platí do půlnoci“ funguje, pokud je to pravda. Odpočet na stránce omezení vizuálně zdůrazní. Jestli ale každý den nabízíte novou „poslední šanci“, lidé vám přestanou věřit.
Omezené množství: „Zbývají 3 kusy skladem.“ Funguje lépe než časové omezení, protože je nepředvídatelné. Někdo může zboží koupit před vámi, což vytváří pocit naléhavosti.
Výhradní přístup: „Dostupné jen pro členy klubu“ nebo „Zvýhodněná cena pro prvních 50 objednávek“. Nedostatek se nemusí týkat skladových zásob, ale přístupu.
Pozor na přehánění
Pokud má každý váš produkt po celý rok „pouze 2 kusy skladem“, lidé to prokouknou. Tento princip používejte jen tam, kde dává smysl. Důvěryhodnost je účinnější než laciné triky.
Paradox volby: proč 50 možností prodá méně než 5
Paradox volby je jev, kdy příliš mnoho možností vede k rozhodovací paralýze, nižší spokojenosti s výběrem a nižšímu počtu konverzí.
Sheena Iyengar v roce 2000 postavila dva stánky s džemy. První nabízel 24 příchutí, druhý 6. U širší nabídky se zastavilo 60 % lidí, ale nakoupila jen 3 %. U menší nabídky se zastavilo 40 % lidí, ale nakoupilo 30 %.
Výsledek: desetinásobná konverze u menší nabídky.
Příliš mnoho možností paralyzuje. Mozek se zasekne a místo rozhodnutí volí nejjednodušší variantu: nic nekoupit.
Jak to vyřešit na webu
Produktové filtry: Dejte lidem nástroje, jak si vybrat. Ne „Máme 847 triček“, ale „Jaká velikost? Jaká barva? Jaký střih?“ Snižte možnosti postupně.
Doporučené produkty: označení „Bestseller“, „Doporučujeme“ nebo „Nejprodávanější“ dává nerozhodnému zákazníkovi jednoduché vodítko k výběru.
Varianty ceníků: když nabízíte služby, dejte 3 varianty, ne 7. Klasické rozdělení je základní, střední a prémiová. Prostřední variantu mírně zvýrazněte. Funguje tu kompromisní efekt: většina lidí nechce nejlevnější variantu, protože může působit lacině, ani nejdražší, protože stojí příliš mnoho. Zvolí proto prostřední.
Zjednodušený košík: každé tlačítko navíc v košíku může snižovat konverze. „Pokračovat v nákupu“, „Uložit na později“, „Přidat poznámku“, „Přidat dárek“... To je příliš mnoho možností. Zvýrazněte tlačítko „Dokončit objednávku“ a ostatní volby vizuálně potlačte.
Typografie: vaše písmo mluví, i když neříká nic
Písmo není jen technická záležitost. Je to emoce. Dva úplně stejné weby s rozdílným písmem vyvolají odlišné pocity.
Patkové písmo (Georgia, Times) působí tradičně, důstojně, seriózně. Hodí se pro právní kanceláře, poradenství, luxusní zboží.
Bezpatkové písmo (Open Sans, Helvetica) působí moderně, čistě, přístupně. Hodí se pro technologické firmy, e-shopy a mladé značky.
Praktické tipy
- Velikost: pro běžný text na webu používejte minimálně 16 px. Menší písmo nutí lidi přimhouřit oči a může je odradit. Na mobilu to platí dvojnásob, přečtěte si o nejčastějších chybách v responzivním designu.
- Řádkování: vzdálenost mezi řádky by měla být o 30 až 50 % větší než velikost písma. Když je text „namačkaný“, čte se hůř.
- Kontrast: čistě černý text na bílém pozadí může působit tvrdě. Tmavošedá (#333333) na světle krémové (#FAFAFA) bývá pro oči příjemnější. Vyhněte se ale světle šedému textu na bílém, protože se špatně čte.
- Délka řádku: optimální je 60 až 80 znaků na řádek. Když je řádek příliš dlouhý, oko se ztrácí při přechodu na další řádek.
Rozmístění prvků: F-vzor a Z-vzor
Lidé nečtou weby. Procházejí je pohledem. Studie sledující pohyb očí ukázaly, jak přesně se oči pohybují po stránce.
F-vzor: na stránkách s velkým množstvím textu (blogy, články) se oči pohybují zleva doprava nahoře, pak znovu po kratším úseku níže a nakonec sjíždějí levou stranou dolů. Vytvoří tak písmeno F.
Z-vzor: na stránkách s menším množstvím textu (vstupní stránky) se oči pohybují zleva doprava nahoře, pak diagonálně dolů doleva a nakonec doprava. Vytvoří tak písmeno Z.
Co to znamená pro design
F-vzor (blog, dlouhý text): logo vlevo nahoře, menu vpravo nahoře, nadpisy zarovnané vlevo, klíčové informace v prvních dvou odstavcích (to potvrzuje i moderní SEO strategie) a tlačítko s výzvou k akci vlevo.
Z-vzor (vstupní stránka): logo vlevo nahoře, hlavní tlačítko s výzvou k akci vpravo nahoře, hlavní výhoda uprostřed a druhé tlačítko vpravo dole.
Co si z toho odnést
Design není umění pro umění. Je to nástroj, který buď pomáhá prodávat, nebo překáží.
Barvy vytvářejí první dojem a vyvolávají emoce. Použijte je strategicky podle toho, co prodáváte a jakou chcete vyvolat reakci.
Sociální důkaz snižuje riziko nákupu. Lidé potřebují vědět, že nejsou první, kdo vám důvěřuje. Dejte jim to najevo.
Nedostatek vytváří pocit naléhavosti, ale jen když je autentický. Falešná hra se vrátí.
Méně možností vede k vyššímu počtu konverzí. Nenuťte lidi zvažovat zbytečné volby, ale veďte je k rozhodnutí.
Typografie není detail. Je to jazyk, kterým mluvíte, ještě než někdo přečte jediné slovo.
U webu nejde jen o to, jak vypadá, ale také o to, jak působí na lidi, kteří ho používají. Právě v tom je rozdíl mezi pěkným webem a webem, který vydělává. Pokud chcete, aby se k vám lidé vůbec dostali, začněte u SEO základů.
