UX audit e-shopu Přírodně a zdravě: 8 míst, kde malý e-shop ztrácí objednávky

Nejdřív pochvala, protože je za co: web působí osobně a důvěryhodně — vlastní fotka majitelky, věta „vyzkoušeno v mojí zahradě“, hodnocení obchodu 4,9 a produkty, které majitelka sama používá. To je přesně ten základ, na kterém se dobře staví. O to víc mrzí pár míst, kde web zbytečně brzdí. Pojďme na ně.

1. Kategorie, ve kterých se zákazník ztrácí

Nejvíc práce jsem dala do struktury kategorií — protože právě tady se nejčastěji rozhoduje, jestli člověk najde, co hledá, nebo odejde. Kostra byla dobrá, ale roztříštěná a s překryvy. Podívejte se na počty produktů v jednotlivých podkategoriích:

Vidíte ten problém? Jedna podkategorie má 48 položek (skoro polovinu sortimentu na jedné hromadě), zatímco jiné mají dva nebo tři produkty. Skoro prázdné kategorie jsou slepá ulička pro zákazníka a „tenký obsah“ pro Google — vyhledávač je nerad zobrazuje. Naopak ta přeplněná se špatně prochází, zvlášť na mobilu.

K tomu se přidal překryv: sadba česneku a cibule byla dostupná dvěma cestami zároveň, takže zákazník nevěděl, kam jít, a dvě podobné stránky si mezi sebou „přetahovaly“ stejná klíčová slova. A našla se i drobnost typu překlep v názvu jedné kategorie — maličkost, která ale nahlodává důvěru i dohledatelnost.

Co si z toho vzít: Držte kategorie vyvážené. Když má některá jen 1–3 produkty, radši ji slučte nebo naplňte. Velké kategorie (nad ~30 položek) rozdělte podle druhu nebo přidejte filtry. A hlavně: dvě podobné kategorie by neměly soupeřit o stejné klíčové slovo (jako sadba česneku dostupná dvěma cestami) — na jeden hlavní dotaz patří jedna jasná vstupní stránka. To, že je jeden produkt zařazený do více kategorií, je naopak úplně běžné a v pořádku. Při každé změně URL nastavte přesměrování (301).

2. Hledání a orientace

Lidé na takovém webu často hledají konkrétní věc — „něco na mšice“, „na plíseň“. Proto se vyplatí mít našeptávač s náhledy produktů a na počítači ukázat podkategorie rovnou při najetí myší (rozbalovací menu), ať se zákazník dostane kamkoli bez zbytečného proklikávání. A filtr v kategorii nechte na počítači rovnou vidět, ne schovaný pod tlačítkem.

Co si z toho vzít: Čím rychleji zákazník najde, tím spíš koupí. Našeptávač, přehledné menu a viditelný filtr jsou levné úpravy s velkým dopadem.

3. Detail produktu bez hvězdiček

Detail produktu byl vlastně moc pěkný: drobečková navigace, výběr množství, skladovost, termín doručení i přehledné parametry. Chyběla ale jedna zásadní věc — hodnocení a recenze přímo u produktu. Obchod recenze má, jen se na detailu nezobrazovaly. Přitom hvězdičky u ceny patří k nejsilnějším prvkům, které rozhodují o koupi.

Co si z toho vzít: Recenze jsou zlato — ukažte je tam, kde se člověk rozhoduje, tedy na detailu produktu u ceny. A k tlačítku „do košíku“ přidejte informaci o dopravě; nejistota kolem dopravy je častý důvod odchodu.

4. Mobilní zobrazení, do kterého se nevejde obsah

Většina návštěv malých e-shopů dnes přichází z mobilu, takže sem míří i moje největší pozornost. Úvodní bannery byly dělané pro šířku počítače a na telefonu se ořezávaly — část textu i výzva „koupit“ končily mimo obrazovku. Řešení je nachystat bannerům mobilní variantu na výšku a přidat lepící tlačítko „do košíku“, které na mobilu zůstává po ruce i u dlouhých popisů.

Co si z toho vzít: Vždycky si web projděte na svém telefonu, ne jen na počítači. Ořezané bannery a tlačítko, které při scrollování zmizí, stojí objednávky.

5. Košík, který láká na nedosažitelnou metu

Košík mě potěšil: tři přehledné kroky, ukazatel „kolik zbývá do dopravy zdarma“, skladovost, termín i osobní kontakt na majitelku. Háček byl ve výši prahů: doprava zdarma až od 1 200 Kč a dárek od 1 500 Kč, přitom většina zboží stojí 150–300 Kč. U košíku za dvě stovky pak ukazatel hlásí „zbývá 980 Kč“ — a to spíš odrazuje, než motivuje. Chyběla také nabídka dokoupení přímo v košíku, která by pomohla na dopravu zdarma dosáhnout.

Co si z toho vzít: Práh dopravy zdarma by se měl odvíjet od hodnoty průměrné objednávky — nastavte ho jen kousek nad ni, ať je bonus reálně dosažitelný, a ne nedostupná meta. A rovnou v košíku nabídněte pár produktů k dokoupení, ať se k němu zákazník snadno dostane.

6. Barvy: sympatické, ale s jedním „ale“

Paleta e-shopu se mi líbí — kombinace fialové a zelené je dobře zvolená: zelená evokuje přírodu, fialová dává webu osobitost a odlišuje ho od tuctových „všechno zelených“ eko obchodů. Jedno „ale“ se ale najde v přístupnosti: bílý text na zelených a fialových tlačítkách má nižší kontrast, než doporučují pravidla přístupnosti (WCAG). Prakticky to znamená, že se text hůř čte části lidí a třeba na mobilu na slunci. Stačí přitom odstíny tlačítek jen mírně ztmavit — vizuálně skoro k nerozeznání, ale čitelnost výrazně vzroste.

Co si z toho vzít: Hezké barvy a čitelnost si neodporují. Než odstín schválíte na tlačítko s bílým textem, ověřte si kontrast (poměr aspoň 4,5:1).

7. Obsah, který prodává

Silná stránka tohohle webu je blog a video návody — přesně to, proč lidé majitelce věří. Škoda jen nevyužít je naplno: na konec článků typu „jak na mšice“ patří dva tři konkrétní produkty jako řešení a relevantní video se hodí i přímo na detail produktu. Tím se z čtenáře snadno stane zákazník.

Co si z toho vzít: Propojte obsah s prodejem. Každý užitečný článek může nenásilně vést k produktu, který problém vyřeší.

8. Nejde o velké přestavby

Nejlepší zpráva na závěr: většina těchhle věcí nejsou drahé přestavby. Recenze na detailu, ukazatel dopravy zdarma i mobilní bannery se na Shoptetu dají zapnout nebo nastavit bez programátora — jen o nich člověk musí vědět. A právě od toho je audit: ukázat, kde jsou skryté brzdy, a seřadit je podle toho, co přinese nejvíc s nejmenší námahou.

Ukázka z auditu (výřez). Každý úkol má štítek, kdo ho udělá (admin / obsah / kodér), prioritu a náročnost. Celkem 24 úkolů — u kodérských i s ukázkovým kódem a kritérii „hotovo, když…“.

A takhle vypadá u kodérských úkolů přiložený kód:

/* Lepící lišta „Do košíku" na mobilu (úkol C1) */
@media (max-width: 767px){
  .sticky-cart-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; background:#fff;
    box-shadow:0 -2px 12px rgba(0,0,0,.14);
  }
  .sticky-cart-bar .btn{ background:#6f8a3d; color:#fff;
    padding:12px 18px; border-radius:8px; font-weight:700; }
  body.has-sticky-cart{ padding-bottom:72px }
}

Publikováno se svolením majitelky e-shopu. Screenshoty pořízeny v červenci 2026.