Web může vypadat profesionálně, mít dobré SEO a přivádět návštěvnost — a přesto nikdo nevolá, formuláře nikdo neposílá, a zákazník odchází ke konkurenci. Problém není vždy v tom, co na webu je, ale v tom, jak se to používá. UX design, tedy design uživatelského prožitku, řeší právě tuto mezeru.
UX vs. UI: v čem je rozdíl
UI je to, jak web vypadá — barvy, typografie, rozmístění prvků, vizuální styl. UX je to, jak web funguje — jak snadno návštěvník najde, co hledá, jak přirozený je tok od prvního příchodu ke konverzi, jak se uživatel cítí při práci se stránkou.
Můžete mít krásné UI a hrozné UX. Stránka vizuálně ohromí, ale zákazník nenajde kontakt, formulář má deset polí, navigace je nepochopitelná. Výsledek je stejný jako u ošklivého webu: odchod.
Prvních pět sekund rozhoduje
Průměrný návštěvník rozhodne o odchodu nebo setrvání během tří až pěti sekund. V té době stačí zachytit tři informace: kdo jste, co děláte a co má zákazník udělat dál. Pokud tyto tři věci nejsou okamžitě zřejmé, velká část návštěvnosti odejde ještě dřív, než začne číst.
Nejjednodušší test: ukažte svůj web někomu, kdo vaši firmu nezná. Po třech sekundách stránku zavřete a zeptejte se, čím se firma zabývá. Pokud odpověď nezazní, hero sekce dělá špatnou práci.
Jedním z nejčastějších problémů je nadpis jako "Inovativní řešení pro moderní podnikání" — věta, která říká vše i nic. Zákazník potřebuje konkrétní odpověď: "Weby pro české živnostníky a firmy. Hotovo za 6 týdnů."
Méně možností, více akcí
Hick's zákon popisuje fenomén, který každý zná z praxe: čím více možností, tím déle trvá rozhodnutí, a pravděpodobnost, že se člověk nerozhodne vůbec, roste. Na webu to platí pro navigaci i pro výzvy k akci.
Navigace s dvanácti položkami zákazníka přemůže. Pět až sedm položek je maximum, co člověk snadno zpracuje. Pokud máte více obsahu, hierarchizujte — dropdown menu pro méně důležité sekce, primární navigace pro klíčové stránky.
Na jedné stránce by měl být jeden primární CTA (call to action). Tři různá tlačítka — "Kontaktujte nás", "Prohlédněte si portfolio", "Stáhněte ceník" — zákazníka paralyzují. Primární akce by měla být vizuálně dominantní a jednoznačná. Ostatní akce mohou existovat, ale v nižší vizuální prioritě.
Formuláře: méně polí, více vyplnění
Každé pole formuláře je bariéra. Každá bariéra snižuje pravděpodobnost, že zákazník formulář dokončí. Kontaktní formulář na firemním webu nepotřebuje jméno, příjmení, telefonní číslo, e-mail, typ firmy, IČO, zprávu a souhlas se třemi různými dokumenty. Potřebuje e-mail a zprávu — a volitelně telefon.
Pravidlo: ptejte se jen na to, co skutečně potřebujete pro první kontakt. Zbytek zjistíte v konverzaci.
Formulář by měl okamžitě zobrazit chybu u konkrétního pole (ne až po odeslání celého formuláře), použít srozumitelné chybové hlášení ("Zadejte e-mail ve formátu jmeno@firma.cz", ne "Neplatný vstup"), a po odeslání zobrazit jasné potvrzení s informací, kdy se ozvete.
Mobilní design není zmenšená desktopová verze
Přes šedesát procent návštěvnosti přichází na mobilu. Přitom mobilní konverze jsou na většině webů výrazně nižší než desktopové. Problém je, že mobilní design bývá zmenšenou kopií desktopového rozvržení — a to nefunguje.
Na mobilu uživatel ovládá web palcem. Tlačítka musí být dostatečně velká (minimálně 44×44 pixelů). Nejdůležitější akce by měla být dosažitelná bez roztahování prstu nebo rolování. Navigace musí fungovat jako přirozené hamburger menu, ne jako miniaturizovaná desktop navigace.
Klíčová kontrola: vezměte telefon a projděte celý web jednou rukou, jen palcem. Funguje vše? Pokud ne, uživatel pravděpodobně odchází bez konverze.
Vizuální hierarchie a čitelnost
Lidé na webu nečtou — skenují. Průzkumy sledování pohybu očí ukazují, že návštěvníci projíždějí stránku F-vzorem: přečtou první řádek, pak skenují dolů po levé straně, občas odbočí doprava. Z tohoto vzoru vyplývá, kde musí být nejdůležitější informace.
Odstavce by neměly přesáhnout tři až čtyři řádky. Nadpisy a podnadpisy jsou navigační body pro skenování — každý by měl být pochopitelný i bez čtení textu kolem něj. Velikost písma v obsahu by měla být minimálně 16 pixelů, ideálně 17 nebo 18 pixelů pro komfortní čtení na všech zařízeních.
Prázdný prostor (white space) není ztráta plochy. Je to nástroj, který odděluje sekce, dává obsahu prostor dýchat a zlepšuje čitelnost. Web, který se snaží nacpat maximální množství informací na obrazovku, je paradoxně méně přehledný než web s dostatkem mezer.
Konzistence jako základ důvěry
Nesourodý design — každá stránka vypadá jinak, tlačítka mají různé barvy, nadpisy různé styly — budí podvědomou nedůvěru. Zákazník, aniž by vědomě analyzoval proč, cítí, že web "není v pořádku".
Konzistentní design systém znamená: jeden primární a jeden sekundární styl tlačítka, jasná typografická hierarchie (H1 pro hlavní nadpisy, H2 pro sekce, H3 pro podnadpisy), konzistentní použití barev (primární barva pro akce, neutrální pro obsah, důraz pro upozornění).
Zpětná vazba na každou akci
Uživatel musí vždy vědět, že se něco děje. Stiskl tlačítko — co se stalo? Odeslal formulář — proběhlo to? Čeká na načtení stránky — jak dlouho?
Tlačítko, které po kliknutí nic neudělá vizuálně viditelného, způsobuje, že zákazník klikne znovu — nebo odejde v přesvědčení, že web nefunguje. Jednoduché řešení: změna barvy při najetí myší, změna textu na "Odesílám..." při odeslání formuláře, loading indikátor při čekání na odpověď serveru.
Jak auditovat vlastní web
Pět rychlých testů, které odhalí UX problémy bez analytických nástrojů:
Test tří sekund: ukažte homepage cizímu člověku na tři sekundy a zeptejte se, čím se firma zabývá. Test jedné ruky: projděte celý web na mobilu jen palcem — funguje navigace, jsou tlačítka dosažitelná? Test konverzní cesty: spočítejte, kolik kliků potřebuje zákazník od homepage ke konverzi — ideálně tři nebo méně. Test formuláře: projděte kontaktní formulář jako nový zákazník — každé pole, které váháte vyplnit, odstraňte. Test potvrzení: odešlete formulář a sledujte, co se stane — je zpráva potvrzena? Víte, kdy se firma ozve?
V Appitect přistupujeme k UX jako ke klíčové součásti každého projektu — ne jako k doplňku po dokončení vizuálního designu. Pokud máte web, který přivádí návštěvníky, ale nekonvertuje, rádi projdeme, kde jsou bariéry.
