Průvodce pro lepší UX a vyšší konverze

Blog / Dála Musil – 31. března 2018, aktualizace 19. července 2023

Chcete mít web, e-shop či aplikaci lepší po designové i marketingové stránce? Aby byli návštěvníci či uživatelé spokojenější a zároveň jste více prodávali? Přečtěte si jak na to v dnešním rozsáhlém článku, resp. průvodci.

Inspirován zahraničními průvodci a motivován chybějícím podobným českým zdrojem jsem připravil průvodce, který jste právě otevřeli. 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 už více než 100+ nejzákladnějších, nejdůležitějších či nejúčinnějších tipů.

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).

Jednosloupcový layout

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.

Zvýraznění odkazů

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.

Formátování textu

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.

Velikost písma

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.

Délka řádků

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ý.

Méně okrajů

Pozadí místo linky

Potřebujete-li oddělit nějaké části obsahu, využijte radši jiné podbarvení pozadí než linku - ta občas odděluje až příliš silně.

Pozadí místo linky

Zvýraznění linkou

Pokud chcete něco zvýraznit, nemusíte vše dělat hned tučnější nebo výrazně větší. Co třeba zkusit doplnění barevnou linkou?

Zvýraznění linkou

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.

Dostatek prostoru

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.

Kontrast důležitých prvků

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.

Velikost důležitých prvků

Kontrast textu

Pokud lidé něco nepřečtou nebo s tím mají problémy, nebudou číst dál. Vždy tak pozor na kontrast textu a pozadí za ním.

Kontrast textu

Efekt prostoru

Klikatelné prvky je dobré zvýraznit. Zkusit můžete třeba prostorový efekt díky stínování, kdy vystoupí daný prvek jakoby nad povrch.

Efekt prostoru

Hlavní a vedlejší prvky

Pokud bude vše vypadat podobně, jak bude uživatel vědět, co je důležitější? Stanovte si jasně, které prvky jsou hlavní a které vedlejší.

Hlavní a vedlejší prvky

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.

Dodržení zvyklostí

Logo na homepage

Jedna z věcí, na které jsou uživatelé opravdu hodně zvyklí? Že se skrz logo dá prokliknout na homepage. Tak na to nezapomeňte.

Logo na homepage

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.

Logické konvence

Použitelné možnosti

Člověk nechce proklikávat všechny nabízené možnosti. Zobrazte mu zřetelně jen ty, které reálně může použít / něco obsahují.

Použitelné možnosti

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.

Responzivita

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.

Vizuální hierarchie

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í.

Carousel

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í.

Využití hoveru

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.

Lidský jazyk

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.

Gramatika a stylistika

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ší.

Vy místo my

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ě.

Konkrétní texty

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ší.

Méně textu

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í.

Jasná tlačítka

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é.

Tlačítkové odkazy

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).

Děkování místo potvrzení

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.

Zpětná vazba

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.

Vysvětlování

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.

Mikrotexty

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.

Text s grafikou

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žší.

Benefit ve výzvě

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.

Benefity místo vlastností

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ší).

Doporučená volba

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.

Využití 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.

Ztráta místo zisku

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í urgence

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í.

Využití nedostatku

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á.

Cenové ukotvení

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...

Ujištění argumenty

Číselné argumenty

Máte zajímavé číselné argumenty? Neváhejte je použít (třeba v oblíbené liště s čísly). Jen pozor na to, ať je to pravdivé a smysluplné.

Číselné argumenty

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ě"?

Cenová iluze

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.

Paradox možností

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.

Baťovky

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í.

Označení slevy

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ě.

Košík v menu

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.

Nákup bez registrace

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ů.

Krátký košík

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í.

Přihlášení v košíku

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.

Doprava a platba

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.

Filtrace produktů

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.

Zavřené filtry

Počet položek

Obsahují vaše prvky, možnosti či odkazy nějaké pod-položky? Pokud ano a dává to smysl, dejte lidem vědět, kolik jich tam je.

Počet položek

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čtení dalších produktů

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.

Našeptávač

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.

Výsledky hledání

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.

Související produkty

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í.

Dostupnost zboží

Jasná nedostupnost

Nenuťte lidi dělat víc, než je opravdu nutné. Pokud máte u produktů skladovou (ne)dostupnost, zobrazte ji rovnou bez schovávání.

Jasná nedostupnost

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.

Provozní doba

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.

Jednoduché formuláře

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í).

Související informace

Méně polí

Pokud potřebujete zjistit více podobných informací, vyřešte si to na pozadí, a uživatelům jejich zadávání zbytečně nekomplikujte.

Méně polí

Délka polí

Délka polí by měla odpovídat délce vstupních informací. Vizuálně to sice nebývá hezké, avšak lidem to zadávání zjednodušuje.

Délka polí

Odlišení stavu polí

U polí nezapomeňte nastavit, jaký je jejich stav - pokud jsou aktivní a neaktivní, právě se používají nebo když obsahují chybu.

Odlišení stavu polí

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ě.

Inline validace

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.

Nestriktní formuláře

Striktní formuláře

Musíte-li být striktní ve formátu zadávaných údajů do formuláře, zkuste alespoň lidem napovědět, jak má formát údajů vypadat.

Striktní formuláře

Neaktivní tlačítka

Chcete omezit chybové hlášky? Pak zneaktivněte odesílací tlačítko formuláře, dokud nebudou vyplněná všechna povinná pole.

Neaktivní tlačítka

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.

Označení povinných polí

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č.

Citlivé údaje

Tooltip

Chcete něco vysvětlit či doplnit, avšak decentně? Zkuste použít tooltip, který umístěte kde je potřeba, a informace vložte do něj.

Tooltip

Náhled hesla

Pokud má člověk vyplnit heslo (nebo dokonce 2x totéž), usnadněte mu to ikonou, která přepíná náhled mezi heslem a skrytými znaky.

Náhled hesla

Síla hesla

Musí heslo při registraci splnit nějaké podmínky? Dejte to vědět rovnou v rámci nápovědy, ať nevyskočí chybová hláška až před odesláním.

Síla hesla

Automatické doplnění

Dokážete sami automaticky doplnit z nějakého vyplněného údaje další informace ve formuláři? Pak takovou možnost lidem dejte.

Automatické doplnění

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é.

Popisek mimo pole

Popisky nad poli

Popisky polí je lepší dávat spíš nad pole než vedle, protože se pak očima snadněji skenují. Výhodné je to i pro responzivitu na mobilu.

Popisky nad poli

Prvky nad sebou

Má uživatel něco vybrat? Snadněji to udělá, pokud jsou položky pod sebou a ne vedle sebe. Nezapomeňte také zvýraznit zvolenou možnost.

Prvky nad sebou

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.

Volba z možností

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.

Nejčastější volby

Klávesnice dle pole

Každé pole ve formuláři by mělo aktivovat správnou mobilní klávesnici podle formátu dat, které se do daného pole zadávají.

Klávesnice dle pole

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.

Ikony s popisky

Prázdný stav

Uživatel se k vám zaregistruje a vy mu nabídnete prázdnou obrazovku? Radši mu napovězte a postrčte, co přesně má udělat.

Prázdný stav

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?

Vizuální zobrazení stavu

Posuvník včetně hodnoty

Ovládání posuvníku s aktuální hodnotou je snadnější a přívětivější než ruční zadávání hodnot. Akorát pozor, ať táhlo funguje i na mobilu.

Posuvník včetně hodnot

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.

Označení kroku

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.

Zobrazení pozice

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í.

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.

Možnost vrácení 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.

Modální okno

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.

Odběr newsletteru

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í velikosti

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í 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.

Mobilní kontakty

Méně dropdownů

Ovládání některých prvků na mobilu, třeba dropdownů, není ideální. Nahraďte je lepšími alternativami - záložkami, steppery či přepínači.

Méně dropdownů

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.

Alternativní popisek

Možnost kopírovat

Usnadněte lidem, co budou dělat. Příkladem je možnost snadno zkopírovat obsah, typicky třeba slevový kód, vhodným tlačítkem.

Možnost kopírovat

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.

Příliš popup oken

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.

Děkovací stránka

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ěď.

Chybová stránka 404

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.

autor Dála Musil

O autorovi článku
Dála Musil je digitální konzultant & designér a Notion Consulting Partner & Ambassador z Pardubic. Svým klientům pomáhá zjednodušovat digitální život díky aplikaci Notion, dříve se věnoval také UX designu, marketingu či procesnímu řízení. O podnikání a všem digitálním píše už více než 11 let.
Twitter profil  LinkedIn profil  Youtube kanál  Facebook stránka  RSS blogu

Líbil se vám článek? Sdílejte ho dál


Pomohl vám můj obsah? Podpořte další tvorbu

Jsou pro vás moje články, videa, šablony, newsletter či posty na socialu (nejen o Notionu) užitečné? Přispěním libovolné částky mi pomůžete tvořit další nový obsah. Předem díky za podporu! 🙌

QR platba

Přidejte se k 3 400+ lidem, kteří mě sledují

1x měsíčně vám pošlu zpravodaj ze světa Notionu plný novinek, tipů, článků a videí 🙂