Zpět na seznam článků

Proč jednoduché stránky více vydělávají?

9 kroků, která vám zefektivní web. A k tomu užitečné desatero pro designéry.

Google-homepage

„Dělejte věci tak jednoduché, jak to jde. Ale ne jednodušší.“

Albert Einstein
– Albert Einstein

Po více než deseti letech pořád čekám na to, až mi na uživatelském testování někdo řekne: „Tyhle stránky jsou moc jednoduché.“ Zatím se setkávám s opačným problémem.

Není to ale problém jen webovek, aplikace jsou na tom stejně, ne-li hůř. Koukněte se ne Microsoft Word. Kolik z jeho funkcí využíváte? 10 %? Ono je totiž daleko méně bolestivé něco přidat, než něco ubrat.

Ale vyplatí se to.

3 důvody, proč jednoduchost vyhrává

  1. vyvolává větší pocit štěstí
    V roce 2010 dělali studii, kde dávali lidem držet nástroje. Polovina nástrojů se držela snadno (jednoduché), druhá polovina nešikovně (komplikované). Lidi byli napojení na přístroj, který měřil jejich obličej, respektive to, jak se tváří.
    A nástroje, které se držely snadno lidi nutily se víc usmívat :).
  2. podporuje intuitivní rozhodování
    V další studii zjišťovali, jakým způsobem ovlivňuje myšlení špatně čitelný text. Zjistili, že se lidi přepínají do analytického módu (systém 2 v Kahnemanově knize Rychlé a pomalé myšlení), že jim rozhodnutí trvá déle a ignorují detaily.
  3. zjednodušuje lidem rozhodování (a nutí je tím více utrácet)
    Na univerzitách v Yale, Stanfordu a Michiganu chtěli zjistit, zda lidi více utrácejí poté, co si přečtou jednoduchý nebo komplikovaný popis produktu. Pokud to zjednoduším, tak pokud měli lidi pocit, že je něco komplikované, tak rozhodnutí buďto odsunuli nebo dělali nějaký kompromis.

Prototypovost

V Googlu zjistili, že jednoduché weby – s čistou grafikou a předvídatelným uspořádáním – se lidem libely o hodně více, než komplikované weby. A tento dojem si stačili udělat za 0,05 sekundy. Ne náhodou je nejnavštěvovanější stránka na internetu jednoduchá, jak facka.

Google homepage

Snažte se tedy o 2 věci:

  1. vizuální jednoduchost,
  2. prototypovost (předvídatelné uspořádání).

Nenuťte uživatele přemýšlet (cognitive fluency)

Cognitive fluency znamená, jak obtížné je o něčem přemýšlet. Mozek je v zásadě líný orgán, takže pokud má možnost si ušetřit práci, tak to udělá.

Uvedu příklad cenných papírů na americké burze. Každá akcie má svou zkratku, tzv. ticker. A akcie, jejichž zkratky se snadno vyslovují a pamatují (TATA) mají lepší výnosy než, ty, které jsou komplikované (JXWS).

Steve Krug a Donald Norman na toto téma napsal několik výborných knih.

Komplikované = ošklivé

Ve studii univerzit na Harvardu, Marylandu a Coloradu zjišťovali, zda se různým lidem líbí různé druhy designu. Jediné, k čemu vědci dospěli je to, že čím je web komplikovanější, tím se méně líbí. (Jo a lidi s doktorátem nemají rádi příliš barev najednou :)

Vztah mezi jednoduchostí a líbivostí stránek

Pokud si vezmete složitost stránek na škále jednoduché (1 bod) až složité (10 bodů), tak většina lidí upřednostňuje jednoduchou grafiku webu v rozmezí 2-3 body.

Příklad z praxe – redesign webu

E-shop prodávající úzké kravaty. Tady je původní verze:

Skinny ties před redesignem

Verze po redesignu, která respektovala:

  • prototypovost
  • jednoduchost
  • dostatek prostoru (whitespace)
  • velké obrázky
  • dostatečný kontrast

Skinny ties po redesignu

A obchodní výsledky?

Zvýšení obratu o 42 % a konverzního poměru o 12 %. Zde je případová studie.

Další hezký příklad je americká banka Simple, která si to dokonce dala do názvu.

Tak a teď už jdeme na ty tipy (a desatero pro designéra)…

9 kroků, které vám zjednoduší a zefektivní web

  1. Udělejte si pořádnou analýzu zákazníků, vašeho webu a konkurence.
    Pobavte se se zákazníky, zeptejte se obchoďáků a infolinky, zanalyzujte statistiky, koukněte se, co dělá konkurence dobře a co špatně, zkuste uživatelské testování.
  2. Vytvořte si seznam prvků, které fungují.
    Napište si seznam prvků, bez kterých by web nedával smysl a u kterých víte, že fungují.
  3. Použijte vizuální hierarchii a přirozený tok v designu stránek pro správné uspořádání.
    Prvky seřaďte podle logiky, použijte AIDCAS, vyprávějte souvislý příběh.
  4. Použijte jednoduchou barevnost a dobře čitelné písmo.
  5. Zredukujte obsah na užitečné minimum.
    Lidi na webu si přečtou cca 20 % obsahu. Čím méně tam toho budete mít, tím více si toho přečtou.
  6. Udělejte to, jak nejjednodušeji to jde (Occamova břitva ve web designu).
  7. Respektujte úzus daný odvětvím a očekáváním lidí.
    Ano, košík má vypadat jako košík a má být vpravo nahoře.
  8. Zkuste porušit pravidla.
    Ignorujte, co jsem vám řekl, abyste překonali lokální maximum. A abyste byli odlišní od konkurence.
    Ale neodlišujte se tím, že dáte košík pod ohyb (ano, i to jsem viděl).
  9. Otestujte to.
    Cokoliv vám říkám jsou jen doporučení, která podle Paretova principu fungují na 80 %. Vy ale můžete být zrovna ta výjimka (ahoj Leo).

Desatero pro designéra

Reklam se zbavíš
Pokud to není primární zdroj tvých příjmů. Ubližuješ si tím z pohledu důvěryhodnosti.

Pravý sloupec vyhodíš
Stejně ho všichni ignorují.

Domovskou stránku zjednodušíš
Nadpis, podnadpis, seznam výhod, obrázek produktu, tlačítko. A šmytec.

Unikátnost nad ohyb dáš
Pokud se neodlišíš, budeš neviditelný.

Navigaci zjednodušíš
Nebudeš používat vícevrstvá rolovací meníčka a megameníčka.

Whitespace použiješ
Dáš prvkům dostatek místa, aby mohly dýchat.

Počet možností zredukuješ
Nedáš uživateli příliš na výběr, nabízej mu to, co víš, že chce.

Barevnost zjednodušíš
Použiješ decentní barevnost. Zkombinuješ brand a komplementární barvu na tlačítka a call to action prvky.

Balastu se zbavíš
Na co lidi neklikají nebo nenajíždí myší (84% korelace s tím, kam se dívají), to bez milosti vyhodíš

Jiného boha než uživatele nebudeš mít
10✕ před zrcadlem odcituješ: Co je nejlepší pro mého ideálního uživatele, budu ctít!
(Můj nadřízený není můj uživatel.)

Na závěr jedna zkratka: K.I.S.S. – keep it simple, stupid.

Související články

Popups-3

Nesnáším pop-upy, a používám je

Apple-action-words

8 tipů na zvýšení konverzí e-shopu

Lings-cars

10 nejčastějších chyb na webu a jak je opravit

Shining-river-of-blood

Přístupnost na webu (všichni mají někdy handicap)

Smysluplná debata

  • Karel Němec
    Karel Němec

    Vynikající desatero, musím pochválit článek a autora. Je přímo skvostné, když někdo tolik svých profesních zkušeností nabídne veřejnosti zdarma a nemusel by. Váš blog mi hodně pomáhá v rozhledu a v rozvaze o problematice při volbě různých konceptů.
    Hlavně texty mají hlavu a patu a nekradete know how. Vše s odkazy na zdroje i na další publikace. To vídám už jen málo.

    Hezký den Němec.