Průvodce pro lepší UX a vyšší konverze
Blog / Dála Musil – 31. března 2018, aktualizace 29. dubna 2020
Chcete mít web či e-shop lepší po designové i marketingové stránce? Aby byli návštěvníci či uživatelé spokojenější a zároveň jste získávali více konverzí? V dnešním rozsáhlém článku, resp. průvodci, se dozvíte, jak na to.
Inspirován zahraničními průvodci a motivován chybějícím podobným českým zdrojem jsem připravil tohoto průvodce. Dozvíte se v něm jak zlepšit konverznost (a tím obchodní účinnost webu) a uživatelskou zkušenost/spokojenost. V průvodci jsem shrnul již téměř 80 těch nejzákladnějších, nejdůležitějších či nejúčinnějších tipů a další budu postupně doplňovat.
Jednosloupcový layout
Pokud můžete, použijte rozložení stránky s pouze jedním sloupcem. Více sloupců zbytečně trhá pozornost (obzvlášt u blogu).
Zvýraznění odkazů
Zvýrazňujte odkazy dostatečně barvou i podtržením, ať je na první pohled patrné, na co lze a na co nelze kliknout.
Formátování textu
Tučnost, kurzíva, odrážky, barva nebo mezera - je spousta možností, jak zpřehlednit textový obsah. Použít můžete i obrázky.
Velikost písma
Velikost je trochu subjektivní záležitost, ale berte v potaz, že by se měl text dát přečíst i bez lupy. Běžný text ať má min. 16 px = 12 pt.
Délka řádků
Kratší řádky textu se čtou a skenují daleko snadněji, než řádky dlouhé. Ideální délka je cca 80-100 znaků pro desktop, 40-50 znaků pro mobil.
Méně okrajů
Čím méně okrajů rámečků/bloků použijete, tím více se bude člověk soustředit právě na ten, který je opravdu důležitý.
Dostatek prostoru
Volný prostor, tzv. whitespace, výrazně napomáhá přehlednosti stránky. Používejte ho v rozložení stránky i v jednotlivých prvcích.
Kontrast důležitých prvků
Důležité prvky (např. tlačítka) musí být barevně dostatečně oddělené od okolí, aby si jich člověk všiml. Dejte jim dostatečný kontrast.
Velikost důležitých prvků
Tlačítka dělejte radši větší než menší, aby bylo návštěvníkům stránky na první pohled jasné, co přesně po nich chcete.
Dodržení zvyklostí
Zavedené webové zvyklosti se vyplatí dodržovat - typicky logo umístěné vlevo nahoře, košík či kontakty pak vpravo nahoře.
Logické konvence
Zvyk je železná košile, tak proč ji zbytečně měnit. Zelená jeď, červená stůj. Volume doprava. Pokračujeme vpravo, vracíme se vlevo.
Responzivita
Přizpůsobení stránky různým šířkám displeje (pro počítače, notebooky, tablety a mobily) je základ, bez něhož se dnes neobejdete.
Vizuální hierarchie
Snažte se obsah stránky, především pak delší texty, dostatečně strukturovat. Pomůžete si tak k lepší čitelnosti a přehlednosti.
Carousel
Carousel (slider) už je out. Pokud potřebujete lidem sdělit důležité informace, ukažte je rovnou, jinak je uživatel třeba vůbec nikdy neuvidí.
Využití hoveru
Využijte najetí kurzoru na prvek např. ke znázornění, že se s ním dá něco dělat, nebo k zobrazení dalších užitečných informací.
Lidský jazyk
Když děláte něco pro lidi, tak k nim taky mluvte lidsky. Nicneříkající počítačové chybové hlášky jsou typický příklad, jak to nedělat.
Gramatika a stylistika
Slovosled, překlepy, i/y, trpný rod, čárky... v češtině toho můžete zkazit hodně, takže si všechny texty vždy pečlivě zkontrolujte.
Vy místo my
Chcete být úspěšnější? Tak nemluvte o sobě, ale mluvte k zákazníkovi. Vysvětlete mu, proč právě vy a že on je tady ten nejdůležitější.
Konkrétní texty
Vyhněte se obecným textům, které nic moc neříkají a používají je všichni. Máte-li argument, použijte ho zcela konkrétně.
Méně textu
Většina lidí chce číst krátké texty (resp. stránky jen skenuje očima), takže se nebojte texty zkracovat, jak jen to jde. Kratší = lepší.
Jasná tlačítka
Říkejte lidem, co se stane, když provedou nějakou akci, např. kliknou na tlačítko. Ne každé překvapení bývá pozitivní.
Tlačítkové odkazy
Tlačítko je vždy viditelnější než textový odkaz, takže jsou u důležitých akcí lepší volbou - tím spíš, když mohou snadno zapadnout mezi jiné.
Děkování místo potvrzení
Někdo udělal to, co jste po něm chtěli? Kromě potvrzení mu i poděkujte, a klidně ho vyzvěte i k další akci (např. na děkovací stránce).
Zpětná vazba
Není nic horšího, než když uživatel něco udělá, a přitom neví, jestli se to něco vlastně stalo. Vždy mu dávejte jasnou zpětnou vazbu.
Vysvětlování
Vysvětlujte lidem vše v předstihu, pokud je možné, že jinak udělají chybu nebo nebudou tušit, proč po nich něco chcete.
Mikrotexty
Rozbijte nudu na místech, kde to lidé nečekají. Chytré či vtipné texty a ideálně i výzva k akci bude na návštěvníky webu fungovat.
Text s grafikou
Doplňte zajímavé textové informace i vizuální stránkou, která pomůže nejen rychleji přitáhnout pozornost, ale i snadněji pochopit text.
Benefit ve výzvě
Ve výzvě k akci (= cta, call-to-action) se vyplatí zmínit jasný benefit. Konverze tlačítka s obecným textem budou obvykle nižší.
Benefity místo vlastností
Vysvětlete lidem výhody toho, co děláte či prodáváte. Technické vlastnosti jsou sice fajn, ale na většinu lidí působí spíš emoce.
Doporučená volba
Má-li vaše nabídka více variant, doporučte nerozhodným zákazníkům, kterou si vybrat (typicky tu, která je pro vás nejvýhodnější).
Využití testimonialu
Nevychvalujte sebe nebo své produkty sami. Daleko účinnější je nechat se vychválit od svých zákazníků a klientů v podobě testimonialu.
Ztráta místo zisku
Obava ze ztráty (např. peněz) je u většiny lidí silnější než touha po zisku. Zkuste toho využít ve svých textech i výzvách k akci.
Využití urgence
Chcete prodávat více? Udělejte svou nabídku časově omezenou. Tenhle tlak účinně zapůsobí na většinu lidí. A čas vám běží...
Využití nedostatku
Princip nedostatku (ať už třeba volných míst na eventu nebo počtu produktů skladem) má podobný efekt jako časové omezení.
Cenové ukotvení
Spousta lidí nemá mnohdy ponětí, jaká je běžná cena např. nějakého produktu. Ukažte mu ji, ať ví, jak moc je vaše nabídka výhodná.
Ujištění argumenty
Popostrčte k nákupu ty, co váhají. 30 dní na vrácení zboží, podpora 24/7, zabezpečení platby kartou, doprava zdarma, vyrobeno v ČR...
Cenová iluze
Rozsekejte větší částky na menší. Kromě nízké ceny můžete i přirovnávat v textu, co třeba takové "odpusťte si jedno pivo denně"?
Paradox možností
Výběrový paradox? Čím více možností člověk má, tím větší je pravděpodobnost, že si nakonec nevybere vůbec nic. Myslete na to.
Baťovky
Lidé čtou zleva a první číslovka rozhoduje. Jasně, rozdíl v ceně je reálně nicotný, ale tenhle psychologický trik zkrátka funguje.
Označení slevy
Pokud něco prodáváte se slevou, ukažte potenciálnímu zákazníkovi kolik to stálo předtím, a tedy že se nákup právě teď vážně vyplatí.
Košík v menu
Vždy mějte košík v menu výrazný, ať je dobře vidět. Měl by také zobrazovat informaci o stavu - počtu ks zboží a celkové ceně.
Nákup bez registrace
Umožněte lidem vyplnit údaje nebo se přihlásit do účtu, pokud jej mají, ale nikdy nevyžadujte před nákupem povinnou registraci.
Krátký košík
Mějte nákupní proces co nejkratší a nezdržujte zákazníky zbytečnými stránkami. Musíte-li v něm body navíc mít, schovejte je do jiných kroků.
Přihlášení v košíku
Pomáhejte lidem v košíku. Mají-li u vás účet, nabídněte jim možnost přihlášení, díky němuž se údaje v objednávce automaticky předvyplní.
Doprava a platba
Vždy ukazujte u doprav a plateb v košíku částky - zřetelně a klidně s užitečnou informací navíc. Je to samozřejmost, ale hodí se připomenout.
Filtrace produktů
Filtrujte co nejlépe. Umožněte řadit, využívejte posuvník, ukazujte ve filtrech kolik produktů není vidět, neaktivní deaktivujte/schovejte.
Zavřené filtry
Omezte volby parametrů, které lidé příliš nepoužívají. Kdo chce filtrovat produkty v e-shopu detailněji, ten už si některý další filtr zapne.
Načtení dalších produktů
Dejte náštěvníkům e-shopu kromě stránkování produktů také možnost načíst rovnou další produkty nebo rovnou rozbalit vše v kategorii.
Našeptávač
Našeptávač se u vyhledávání vyplatí. Můžete např. předpovídat pokračování zadávaného dotazu, nebo rovnou navrhovat vhodné výsledky.
Výsledky hledání
Pokud vyhledávání nedokáže najít dotaz, který uživatel chtěl, nabídněte mu alternativní možnosti - třeba si nakonec vybere něco jiného.
Související produkty
Podpořte nákupy up-sellem (např. větší balení) či cross-sellem (např. podobné produkty) v kategoriích, detailech produktů nebo v košíku.
Dostupnost zboží
Na detailu produktu by vám nikdy neměla chybět informace o skladové dostupnosti, ideálně i s informací o počtu kusů a termínem dodání.
Provozní doba
Řekněte lidem, kdy vás mohou kontaktovat, aby to nezkoušeli zbytečně. Provozní doba třeba pro zákaznickou podporu je nezbytnost.
Jednoduché formuláře
Nechtějte po lidech víc, než v danou chvíli potřebujete. Čím jednodušší formulář (ideálně jednosloupcový) budete mít, tím lépe.
Související informace
S jednoduchostí formulářů souvisí i sdružení polí k sobě, pokud spolu souvisejí (za předpokladu, že to nenadělá potíže někde na pozadí).
Kontrola formulářů
Na chyby ve formuláři upozorňujte vždy vizuálně. Ideálně s okamžitou inline validací, aby člověk nemusel hledat, co je kde špatně.
Nestriktní formuláře
Každý zadává své údaje pro některá specifická pole různě. Uživatelé budou spokojenější, když nebudete příliš striktní ve formátu.
Označení povinných polí
Vždy jasně označte, která pole jsou povinná (nebo naopak nepovinná). Jak? Tučnost, hvězdička, textem... možností máte spoustu.
Citlivé údaje
Když z nějakého důvodu chcete nebo potřebujete citlivější informace (datum narození, rodné číslo apod.), vždy lidem vysvětlete proč.
Popisek mimo pole
Popisek pole nikdy nevkládejte jako placeholder dovnitř pole. Sice ušetříte místo, ale uživatelsky je to při úpravách velmi nepřívětivé.
Volba z možností
Máte-li formulář s různým počtem možností (+/- 7 až 10), je lepší možnosti rovnou zobrazit než je skrývat do rozklikávacího seznamu.
Nejčastější volby
Bývají volby vašich uživatelů většinou podobné? Jestliže ano, je zbytečné je skrývat mezi ostatními - raději je vypíchněte v nabídce nahoru.
Ikony s popisky
Touha po minimalismu vede občas k mnoha ikonám, které ne každý (obzvlášť je-li starší) pochopí. Nechte jim raději i popisek.
Vizuální zobrazení stavu
Obrázek pochopí člověk rychleji než text, tak se ho nebojte často využít. V tomto případě funguje navíc velice motivačně, že?
Označení kroku
Musí-li člověk procházet více kroků (ať už v košíku nebo třeba při onboardingu online služby), vždy mu ukažte, v kterém kroku právě je.
Zobrazení pozice
Člověk rád ví, kde je, a tedy že se na webu nikde neztratil. Ukažte mu to v hlavním menu, záložkách anebo drobečkové navigaci.
Upozornění
Uklikli jste se někdy? Smazali si omylem něco důležitého? Nepochybně ano - a pak jistě chápete smysl, proč používat upozornění.
Možnost vrácení zpět
Uklikli jste se někdy dvakrát? Nebo právě ono upozornění chybělo? Tak či onak, dejte lidem ještě jednu šanci vrátit vše zpět.
Modální okno
Modál (= vyskakující okno) nesmí zapadnout do okolí (mj. ztmavte pozadí) a měl by jít zavřít křížkem, klikem mimo i klávesou escape.
Odběr newsletteru
Získat od lidí e-mail pro rozesílku vašich akcí není snadné. Dejte jim něco na oplátku, ať pochopí, že zrovna vaše newslettery stojí za to.
Mobilní velikosti
Počet přístupů z mobilních telefonů neustále roste, takže na mobilní uživatele myslete a dělejte prvky dostatečně velké a snadno klikatelné.
Mobilní menu
Pokud už musíte použít v mobilním menu tzv. hamburger, nezapomeňte vždy přidat popisek a ideálně udělat klikací i box kolem menu.
Mobilní kontakty
Na mobilech a tabletech vždy mějte aktivní kontakty na e-mail a telefon, aby je člověk nemusel složitě kopírovat, ale stačilo jen kliknout.
Alternativní popisek
V rámci zlepšení uživatelské přístupnosti a zároveň pro případy, kdy se nenačte obrázek/fotka, je dobré vyplňovat alternativní popisek.
Příliš popup oken
Info o cookies, lišta ke stažení, odběr newsletteru, geolokační sledování... nezahlcujte uživatele popup okny příliš, ať vidí i něco z obsahu.
Děkovací stránka
Po dokončení objednávky se hodí člověka udržet i nadále u vás - navrhněte mu, kam mrknout, dejte mu nějaký tip či třeba zajímavý obsah.
Chybová stránka 404
Dostane-li se člověk na neexistující stránku (error 404), zkuste mu pomoct a nasměrovat ho někam, kde by mohl najít svou odpověď.
A jsme na konci. Věřím, že pokud se pustíte byť jen do pár změn z tohohle průvodce, výsledky na sebe nenechají dlouho čekat. Další tipy sem budu do průběžně doplňovat, takže stay tuned ;-)
Chtěli byste mít lepší web či e-shop a průvodce vám nestačil? Neváhejte mi napsat, rád vám pomůžu.

O autorovi článku
Dála Musil je digitální konzultant a designér a Notion Certified Consultant & Ambassador z Pardubic. Svým klientům pomáhá zjednodušovat digitální pracovní život – věnuje se hlavně Notionu, UX designu a návrhu digitálních řešení. O podnikání, osobním rozvoji a všem digitálním píše už 10 let.