Jak se liší weby a e-shopy s UX designem a bez něj?

Když už člověk něco dělá, je fajn mít nějaká ta čísla. Rozumějte: prodejní argumenty, proč vlastně to UX potřebujete. A protože vás zajímá, jak se liší weby a e-shopy s a bez UX designu, rozhodla jsem se toto téma trošku více rozpracovat.

Pozn. Pokud píšu web, myslím jak weby, tak e-shopy. A pokud píšu UX, myslím tím i UI (tedy vzhled).

Web s UX designem

Co je to UX design?

Mít dobré UX není jen o tom, že někde budete mít tlačítko, co vypadá jako tlačítko. Není to ani hezký design. Jde o to, že web je logický, srozumitelný, rychlý a vede uživatele k cíli, který mu dáte (prodej, rezervace termínu apod.). Zahrnuje takových 7 velkých oblastí:

1. Strategie a struktura: Přesně víte, komu web stavíte a jaké má potřeby. Struktura webu není podle šablony, ale je promyšlená vzhledem k potřebám uživatelů i zadavatele. A všechno dohromady dává logiku.

Příklad: Přišla ke mně klientka, která je psycholožka a nabízí terapeutické dopisy. Pokud bych web navrhovala jen tak, pak by vznikly stránky jako Homepage, o mně, služba terapeutických dopisů a kontakt. Jasné, vyřešené. Při stanovení Persony a VPC jsme zjistily, že na web chodí rodiče mnohdy v dost rozpoloženém stavu. Nevědí, co jejich dítěti je; čekací lhůty na psychologa jsou šíleně dlouhé; potřebují získat jistotu, že nejsou sami a když je nejhůř (třeba se dítě sebepoškodí), pak co dělat. A v tom by jim klasická struktura fakt nepomohla. 

Takže jsme přidaly stránky s nejčastějšími neduhy a následně vysvětlením příznaků. Stejně tak jsou tam tipy, co dělat jako rodič a co může dělat dítě samo. Navíc je to super pro SEO (mrk, mrk).

Organizační struktura webu
Průchod webem

2. UX design, tedy User experience = zážitek: Na webu se potřebují lidé snadno orientovat a zřetelně najít cestu ke konverzi (nákup, přečtení článku, registraci). Jde také o srozumitelnost při zadávání dat do formulářů, prací s očekáváním uživatele a systematické odstraňování zbytečných překážek. Prostě nechcete uživatele naštvat.

Příklad: Před pár lety jsem měla klientku, která měla e-shop postavený na míru a stál jí 70.000 Kč (rok 2022). Vizuálně byl krásný, moderní. Ale kategorizace vlastně vůbec nebyla. Jediné, co jste na homepage viděli, byla kategorie „Produkty“. Produktů bylo 2.345. Žádná filtrace, žádné štítky. Nic. Konverze e-shopu byly 1 %. A problém byl právě v nepřehlednosti.

3. UI, tedy User interface = vzhled: To je ten váš vzhled. Jak vidíte, je to jen 1/7 celku. Design, který je sice vizuálně atraktivní, ale musí být i funkční a konzistentní po celém webu. Například: typografie, kontrast nebo viditelná tlačítka. A co zapomínáte často: vizuální hierarchie prvků.

Příklad: Dostal se mi do ruky krásný web. Spadla mi brada. Opravdu krásná práce. Problém ale byl, že když lidé používali web v mobilu a stáli na sluníčku, nebylo nic vidět.

4. Obsah a komunikace: Texty, které tam použijete musejí mít jasné sdělení. Lidé si nesmí nic domýšlet. Musí obsahovat trošku psychologických přesvědčovacích technik, které pomohou uživateli více se nacítit na produkt či službu (reference, case study apod.). A komunikace musí být konzistentní.

5. Technická použitelnost: Responzivní zobrazení, rychlost načítání, přístupnost (lidé s omezením), kompatibilita, připravenost webu použít jej při slabém signálu třeba na Sněžce.

Příklad: Dělala jsem analýzu na web ubytovacího zařízení. Byli na Vysočině uprostřed krásné přírody. Hned na homepage na pozadí běželo video. „Krása“ řeknete si. Jenže, lidé potřebovali přesně vědět, kde se zařízení nachází. No a uprostřed kopců a lesů je špatný signál. Takže, než lidé načetli video na homepage, tak se ztratili. Paní majitelka pak musela vyřizovat nepříjemné telefony, kde se vlastně nachází. A to jen z toho důvodu, že nebylo možné stránku zobrazit. Navíc na mobilu nebylo video rozpoznatelné, protože zůstalo velké jako v počítači.

6. Konverzní optimalizace: Správně umístěné výzvy k akci, minimalizace rušivých prvků, práce s důvěrou a rozhodováním uživatele, optimalizace nákupního procesu.

7. Testování a zlepšování: uživatelské, datové, analýzy chování uživatelů apod.

Při porovnávání webů s UX design a bez, je tedy na místě poznamenat, že nikdo nemá „žádné“ UX. Každý web, i když blbě navrhnutý, prostě nějaké má. Alespoň minimální. A odráží se od schopnosti tvůrce výše uvedené oblasti zapracovat.

Jak vypadá web bez UX designu?

Jako výchozí pozici pro „web bez UX designu“ můžeme uvažovat standardní web, vytvořený podle nějaké šablony, nebo svépomocně podle „vzoru ostatních“. S určitostí mohu říct, že něco tam máte dobré a funkční, něco nefunkční a nad něčím vám lidé přivřou oči, protože nabízíte jedinečnou věc.

A tady to začíná být zajímavé. Pokud totiž na webu nepracujete, využíváte jeho maximální možné síly. Tedy 100 %. Protože to prostě na víc nedotáhne. Vysvětlím na příkladu: Pepa, co se rozhodl dneska začít běhat, doběhne na konec ulice. Franta, co trénuje několik let, doběhne z Pardubic třeba až do Mikulova. Ale oba využívají svých 100 %. A v tom je ten vtip.

Point k zapamatování: Úspěšnost webů měřte pomocí konverzí. Co je to konverze?

Konverze u webů je číselné vyjádření splnění určitého úkolu. Většinou se uvádí v %. Konverze nemusí být jen prodej, ale zahrnujeme tam: odeslání formuláře, registrace, telefonát, přečtení článku apod. Dejte si pozor na to, abyste srovnávali srovnatelné (stejný časový úsek: počet dní, období apod.).

UX design je jako trénink. Upgrade potenciálu

Když si u mě objednáte návrh prodejní stránky kurzu nebo webu, bude to první verze. Výchozí pozice, ze které startujeme. A ta může, ale nemusí být lepší. To záleží… Na jedné přednášce jsem zaslechla číslo 40. Museli prodejní stránku upravit 40×, aby dosáhla konverze 5,5 %. A o tom to je. Je to jako trénink. Zas a znovu se postavíte na start a měříte procento.

Takže už je vám zřejmě jasné, co by mohlo být závěrem. Weby bez UX designu sice pracují na 100 %, ale mohou být lepší. O kolik? Záleží na poměru mezi výchozí a výslednou pozicí. Laickou řečí: „Když si vezmeš web, který je úplně šílený, pak můžeš vzrůst až o 800 % ani nemrkneš. Když vezmeš web, který je už v základu dobrý, neporosteš o tolik %, ale může to být znát.“

Princip znáte, jdeme na čísla

E-shopy

Průměrný konverzní poměr v e-commerce se podle SmartInsights pohybuje okolo 2 až 3 %. U maloobchodu: desktop: 3,2 %, mobil 2,8 %. Tablety měly okolo 2 %, takže je SmartInsights ani nezobrazuje.

Na obrázku konverzního trychtýře e-shopů vidíte, jak čísla klesají. Můžete si tak dokreslit sami, jestli jste +/- na správné cestě.

Baymard uvedl: Společnost Forrester Research napsala, že dobře promyšlený a bezproblémový design uživatelské zkušenosti by mohl potenciálně zvýšit konverzi až o 400 %.

No a teď je ta chvíle, kdy musíte zabrousit do podrobností. Každá best practices, kterou vydají různé výzkumné agentury má potenciál ke zvýšení konverzí od 1 % do nekonečna. Já tyto best practices sleduji (a sestavuji z nich svůj check-list pro analýzu) už 5. rokem. A každá drobnost má větší či menší vliv. Mrkněte na některé z nich:

  • Rychlost načtení: Portent zjistil, že e-shop načtený za 1 vteřinu má až 2,5× vyšší konverzi než stejný web načtený za 5 vteřin.
  • Responzivní design: Baymard Institut změřil, že uživatel očekává v mobilu plně funkční web. Pokud to nedostane, je pětinásobně vyšší šance, že jej opustí.
  • Objednávkový proces: Výše zmíněný Baymard také dodává, že každá překážka během nákupu zvyšuje šanci na snížení konverzí. 24 % uživatelů opustí košík, protože si museli založit účet. 17 % vadí příliš dlouhý či složitý nákupní proces.
  • Design: Hezká a čistá grafika budí dobrý dojem, což zvyšuje důvěru zákazníků a tím i konverze.
  • Plané sliby, např. doprava zdarma: A můj výzkum z dopravy zdarma. Když zákazníkům napíšete, že mají dopravu zdarma, pak 72 % z nich bude předpokládat, že máte všechny dopravy zdarma. Není-li to tak, 22 % odejde jen z principu.

U prodejní stránky kurzu jsme, v rámci SOS analýzy, do velké textové části přidaly graf, který má hned 2 cíle: a) zastavuje skrolovatele, b) názorně ukazuje výsledek. Malý zásah = velký vliv. Konverze prodejní stránky se zvýšila z 1 % na 2,3 %.

Službo-weby

U webů nabízejících služby, jsou konverze různé. A hodně jich navrhuji s vícero konverzními cestami: registrace do newsletteru, přečtení článku, objednání služby apod.  Mám ale jeden fajn výzkum z roku 2026. Scoop Market uvedl, že webové stránky s dobrým UX mají míru konverze kolem 14,4 %, kdežto ty se špatnou konverzí jen 6 %. Ale berte to s rezervou (viz poslední odrážka). Takže, musíme jít do podrobností. Například:

  • Rychlost načtení: Portent změřil, že stránka načtená za 1 vteřinu má 40% konverzní poměr. Při 6 vteřinách už je to jen polovina.
  • Responzivita: Pokud web není dobře použitelný na mobilu, 5× více návštěvníků odejde. (Baymard)
  • Weby generující poptávky B2B se pohybují podle RoastMyWeb od 1,7 % do 10,8 %. Nízké procento horší UX design, vyšší procento, lepší UX.

Závěr: Jsou lepší weby bez UX designu nebo s ním?

Weby stavěné se základem z UX designu pracují s uživatelem, jeho potřebami, obavami a dalšími důležitými otázkami typu: „Proč si to kupuje?“. Ale dá se říct, že weby s UX designem jsou lepší. O kolik procent? To je u každého jiné.

Nutno podotknout, že:
Pro někoho může být první verze webu absolutně dostačující. A je to tak v pořádku. Třeba pro elektrikáře, kandidáta na starostu, doktora s plnou kapacitou na X let dopředu apod. Jejich cílem není prodej on-line, ale mít základní vizitku, která sdělí místo a nějaký ten kontaktní údaj.

Pokud se ale chystáte prodávat on-line (služby, produkty apod.), nebo plánujete mít web jako nedílnou součást podnikání, pak je fajn pustit se do upgradu. A dokonce je jedno, zda půjdete cestou nového webu či jeho redesignu. UX design proces je stejný u obou variant.

Chcete-li poznat, jak vypadá proces UX designu, začtěte se do článku: Co je to UX design a potřebujete ho vůbec? a nebo mrkněte na video Jak vypadá UX design proces.

Web s UX designem

Buďte v obraze

Odebírejte newsletter Míša píše

copywriting