Nejdříve jsem chtěl psát ohlédnutí za rokem 2016, ale poslední dobou mi – kromě Tomáše Čupra – začínají lézt krkem.
Takže budu psát o tom, že mít použitelný a uživatelsky přívětivý web už nestačí. A ukážu vám to na příkladu, jak z dobré stránky udělat skvělou.
Hezky to ilustruje příklad designu webu Litevské národní knihovny. Jednalo se o inovativní projekt, který umožňoval si půjčit jakoukoliv knihu ze kterékoliv knihovny v Litvě online. Designový tým udělal velmi detailní analýzu uživatelů, vytvořil sérii wireframů, udělal uživatelské testování, vytvořil téměř 200 grafických návrhů. Nová služba fungovala dobře a byla použitelná a užitečná. Přesto projekt nevzbudil příliš zájmu. Tohle je doplněný článek od Igora Gubaidulina.
To, že uživatelé webu můžou něco udělat, ještě neznamená, že to udělají. Musíte je motivovat a přesvědčit, že mají nakoupit, přihlásit se k odběru newsletteru atp.
Nicméně to není nic nového. Tohle je například volební lístek o připojení Rakouska a volbě Adolfa Hitlera.
![Hlasovací lístek o připojení rakouska a volbě adolfa hitlera](https://res.cloudinary.com/ilincev/w_900,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/hlasovaci-listek-hitler-1.jpg)
- spojení volby Hitlera s připojením Rakouska
- největší text jméno Hitlera
- zarovnání na střed
- menší kroužek a netučné písmo u slova Nein.
Pokud tohle není dark pattern, tak už nevím.
P.E.T. design
Tohle je zajímavý systém propagovaný firmou Human Factors International.
Má tři části:
- přesvědčivost (persuasion),
- emoce,
- důvěru (trust).
Jako u všeho, podobných systémů je fůra: LIFT model Gowarda, konverzní pyramida bráchů Eisenbergů, 6 + 1 principů Cialdiniho, CXL systém Peepa Laji. A neodpustím si rýpnutí, teď jsou všichni vydření z See-Think-Do-Care, ale je to zase jen recyklát předchozích systémů. Já mám pár svých oblíbených, Joanna Weibe má seznam všech :).
![Pet systém](https://res.cloudinary.com/ilincev/w_680,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/pet-design-tools-large.jpg)
Je zde přes 70 technik, jak jemně pošťouchnout uživatele k akci. Berte to jako takovou polevu na dortu. A stejně, jako u polevy, je potřeba s tím šetřit.
Příklad použití PET systému na kategorii e-shopu
Tak a teď příklad – stránka s designovými tričky. Není to reálný e-shop, ale doplněná veřejně dostupná šablona.
![Šablona - designová trička](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/lashoopa1.jpg)
Co se mi líbí:
- velké fotky produktů
- minimalistický layout
- ikona košíku
- jednoduchá navigace
Co se mi nelíbí:
- nepochopitelná fotka
- nesmyslný text – koukněte se na všechny nové trendy
- ghost button
- chybí mi tam možnost řazení produktů (cena, nejnovější)
- v dlaždici mi chybí dostupnost a hodnocení
- neviditelné tlačítko find more – ukažte další
Důvěryhodnost
PET systém správně říká, že nejprve musíme vyřešit Důvěryhodnost (Trust).
Zde je 16 elementů důvěryhodnosti:
- důvěryhodná firma
- doménové jméno
- kvalitní design
- shoda s dosavadními vědomostmi
- FAQ
- citace
- současný obsah
- další obsah
- archivy
- odkazy
- fyzická adresa
- podmínky zvyšující důvěru
- certifikace a ocenění
- ohlasy zákazníků
- slavní a běžní lidé
- rady lidí, jako vy
![Přidání důvěryhodnosti](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/duvera.jpg)
Popis změn
- Nejčastější barva odkazů je modrá (pravidlo 4).
- Přidání sekce podpora včetně FAQ, platební možnosti, reklamace, sledování zásilky, blog, o nás, kontakt (pravidla 1, 5, 12).
- Blog zvyšující autoritu – ukazujete, že rozumíte vlastnímu oboru (pravidlo 8).
- Pochlubte se, když o vás někde psali (pravidlo 14).
- Loga platebních systémů (pravidlo 13).
Co se mi líbí:
- modré odkazy
- patička s dalším obsahem
Co se mi nelíbí:
- malý kontrast písma
- nečitelná loga platebních systémů
- chybí mi tam fyzická adresa (byť je schovaná v odkaze kontakt)
Nelogický důvod ke koupi
Náš mozek si vymýšlí důvody, proč něco (ne)koupit. A mnohdy je to holý nesmysl.
V roce 1978 dělali Lnager, Blank a Chanowitz experiment. Chtěli zjistit, jaký důvod povede k tomu, že někoho pustíte před sebe ve frontě na kopírku.
Byly 3 varianty prosby:
- Samotná prosba: „Promiňte, mám 5 stránek. Mohl bych použít kopírku?“
- Placebo prosba: „Promiňte, mám 5 stránek. Mohl bych použít kopírku, protože si chci udělat kopie?“
- Reálná prosba: „Promiňte, mám 5 stránek. Mohl bych použít kopírku, protože spěchám?“
Varianta jedna měla úspěšnost 60 %. Varianta dvě 93 % a varianta tři 94 %.
Někdy totiž posluchač sleduje jen strukturu informace, nikoliv obsah.
A jak jsem již zmiňoval, Oli Gardner na základě analýzy 1 000 000 vstupních stránek zjistil, že nejkonverznější slovo je „protože“.
Dalším principem je uvádění původní ceny. Ideálně vlevo od současné nižší ceny. Fíglů s cenou je fůra, já jich popsal 36.
![Důvod ke koupi a cenový kontrast](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/duvod-cena.jpg)
Co se mi líbí:
- zvýraznění ceny pod 30 dolarů červeně
- stejná červená použitá u cen produktů
- přeškrtnutá cena vlevo
Co se mi nelíbí:
- podnadpis: Každý potřebuje inspiraci – je to blábol. Já bych tam radši viděl něco o originálním triku a vystoupení z davu.
Pomoc s výběrem
Lidi jsou líní. A neradi přemýšlí. Aktivně používáte racionální mozek jen asi v 5 % situací. A tohle je emocionální koupě, protože další triko – přiznejme si – nepotřebujete. Na začátku století měl průměrný teenager 3 trička, teď je to 30.
Proč já si pamatuju takové voloviny?
No nic… ulehčete lidem výběr. Aby nemuseli přemýšlet.
![Ulehceni-vyberu](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/ulehceni-vyberu.jpg)
Co se mi líbí:
- zvětšení top produktu
- zvýraznění top 1
Co se mi nelíbí:
- barva vlaječky top 1, červené už tam začíná být moc.
- Název a cena v jedné řádce – nechal bych tam původní variantu pod sebou, ulehčím tak přemýšlení.
Externí motivace
Bonus za nákup – takto funguje většina loajality programů. Umělý nedostatek (počet kusů, časově omezená nabídka) – funguje, ale nepřehánějte to. Doprava zdarma – nejčastější doprovodný důvod ke koupi.
![Přesvědčivost](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/persuasion.jpg)
Co se mi líbí:
- aplikování principů přesvědčivosti
Co se mi nelíbí:
- cirkusová grafika s různými barvami (a la Mall.cz)
- překrytí fotky produktu – viděl bych to v pravém horním rohu a možná jako ikonu s vysvětlujícím textem na hover.
Dobrý pocit + Nezištnost + Populární značka
Pokud spojíte koupi s nezištnou pomocí a dobrým pocitem, tak dramaticky zvýšíte motivaci ke koupi. Lidi si budou vlastní (zbytečný) nákup omlouvat tím, že pomohli dobré věci.
![Nezištná pomoc dobré věci](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/nezistnost.jpg)
Co se mi líbí:
- zvýšení dobrého jména firmy
- příspěvek cca 10 % ceny trička
- použití National Geographic
Co se mi nelíbí:
- že jsem to ještě nikde nepoužil – tipuju, že tohle bude jedna z nejúspěšnějších změn
Social proof a Unity princip
Je náš přirozený instinkt chovat se jako ostatní. Je to bezpečné.
Což znamená, že když vidíme, že lidi jako my kupují stejné věci, tak to budeme dělat taky.
![Komentář](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/komentar.jpg)
Co se mi líbí:
- použití principu social proof a unity (jsem jedním z vás)
- fotka
Co se mi nelíbí:
- použitelnost jen na velkou fotku
- samotný cukrkandlový komentář
- jméno na druhé straně od fotky
- radši bych tam viděl hvězdičkové hodnocení včetně počtu hodnotitelů
Doporučení od kamarádů a známých
Doporučení od někoho, komu důvěřujeme, je nejdůležitější impuls k nákupu. Díky tomuto principu vyrost Dropbox – doporučte užitečný produkt a získejte další místo na disku.
Pozor ale, kdy to od lidí budete chtít. Musí to být ve chvíli, kdy jsou nejvíce nadšení z nákupu. Což je ve chvíli, kdy klikají na tlačítko koupit. Takže to dejte na děkovnou stránku a do e-mailu, který přijde týden po koupi.
Nedávno dělali studii, kdy jste nejvíce nadšení z jogurtu a zjistili, že když odlepujete vrchní staniol. Už jsem říkal, že si pamatuju voloviny?
![Doporučení](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/doporuceni.jpg)
Co se mi líbí:
- eee – že je křížek pro zavření vpravo nahoře
Co se mi nelíbí:
- ukázání pop-upu příliš brzy
- malý kontrast textu
- nečitelný text ve formulářovém poli
- nejisté podmínky, jakou slevu dostanu
- barva tlačítka
- text na tlačítku, který mi neříká nic o výhodě
Dodržení slibu + pomoc s výběrem
Máme tendence se chovat konsistentně (princip přesvědčivosti – závazek). Zvlášť, když se k něčemu upíšeme.
![Gift finder](https://res.cloudinary.com/ilincev/w_890,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/gift.jpg)
Co se mi líbí:
- kombinace pomocníka s výběrem dárku a přímé řeči ve smyslu: „Chci utratit X“
- kontrastní tlačítko
- celek ve vánočních barvách (červená, zelená)
Co se mi nelíbí:
- není z toho poznat, že jde o výběr trička
Závěr
Doufám, že jsem vám trochu nasadil brouka do hlavy. Neříkám, že se vším souhlasím. A osobně se mi víc líbí ta čistá varianta vlevo.
Ale nejsme tu od toho, abychom řešili pocity. Ale od toho, abychom klientovi vydělali peníze. A proto si myslím, že verze vpravo bude fungovat lépe. Nicméně jako vždycky – otestujte to!
![Verze před a po](https://res.cloudinary.com/ilincev/w_970,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/summary.png)
Sviňárničky
Apeluji na vás, abyste tyto principy používali ku prospěchu uživatelů i klienta. Zde je pár příkladů, jak to nedělat.
Ryanair a Linkedin
Vyberte si mezi seznamem zemí, že nechcete pojištění.
![](https://res.cloudinary.com/ilincev/w_970,f_auto,c_fill,q_auto:eco/ilincev.com/2022/11/no-contrast-ryanair.png)
A Ryanair rozhodně není sám. Linkedin dostal přes prsty, když podobné techniky používal a musel zaplatit 13 milionů dolarů. V současnosti jsou dokonce některé techniky (dark patterns) ilegální ve Velké Británii.
Tak se prosím nenechte strhnout na temnou stranu, samozřejmě pokud si neobjednáváte Penne alla arrabiata v kantýně hvězdy smrti.
Smysluplná debata