Product page UX: co musí obsahovat detail produktu

Na detailu produktu se rozhoduje. Zákazník sem přijde z vyhledávání, kategorie nebo srovnávače a během chvíle si odpoví na tři otázky: je to to, co hledám, kolik mě to bude stát celkem a kdy to budu mít doma. Když odpověď nenajde, odejde. Často ke konkurenci, která stejný produkt prodává o pár korun dráž, ale s lepší stránkou.

Baymard Institute, který dlouhodobě testuje použitelnost e-shopů, uvádí ve svém přehledu Product Page UX pro rok 2026, že jen 48 % předních amerických a evropských e-shopů má na desktopu detail produktu v „slušném" nebo „dobrém" stavu. Na mobilu je to jen 38 %. Prostor ke zlepšení tedy mají i velcí hráči. U českých e-shopů k tomu přibývá vrstva, kterou americké studie neřeší: povinné informace podle českého práva.

Fotky: první věc, na kterou se zákazník podívá

Podle testování Baymard Institute začalo 56 % uživatelů po příchodu na detail produktu prohlížením fotek. Nečetli popis, neřešili cenu, dívali se. Stejný výzkum uvádí, že čtvrtina e-shopů nemá dostatečně velké rozlišení nebo zoom, a nekvalitní fotky byly v testech jedním z důvodů, proč lidé produkt opustili.

Co na detailu funguje:

• Více úhlů a detailů. Materiál, šev, konektor, štítek se složením. Zákazník si produkt nemůže vzít do ruky, fotka to musí nahradit.
• Fotka v kontextu nebo na člověku. U oblečení, doplňků a kosmetiky pomáhá odhadnout velikost a vzhled.
• Zoom, který opravdu přiblíží. Na mobilu gestem, bez rozbití stránky.
• Varianty propojené s fotkou. Když zákazník vybere barvu, má vidět tu barvu.

Fotky jsou ale i nejtěžší část stránky. Nekomprimované obrázky zpomalí načítání a zhorší Core Web Vitals, hlavně metriku LCP. Jak obrázky zmenšit bez ztráty kvality, popisujeme v článku Optimalizace obrázků pro SEO a rychlost.

Cena: konečná, srozumitelná a v souladu se zákonem

Cena je místo, kde se UX potkává s legislativou nejvíc. Na detailu produktu pro spotřebitele musí platit:

• Cena včetně DPH a všech povinných poplatků. Spotřebitel nesmí být nucen si daň dopočítávat. Cenu bez DPH můžete zobrazit doplňkově, typicky pro firemní zákazníky, ale hlavní a výraznější má být cena konečná.
• Měrná cena u vybraného zboží. U potravin platila vždy. Novela zákona o cenách rozšířila od 1. 1. 2025 povinnost i na vybrané nepotravinářské balené zboží podle vyhlášky č. 291/2024 Sb., například část drogerie a kosmetiky, krmiva a potřeby pro zvířata nebo stavební materiály jako obklady a podlahy. Uvádí se cena za 1 kg, 1 l, 1 m, 1 m² nebo 1 m³, jednoznačně a čitelně. Pokud je měrná cena shodná s prodejní, uvádět ji nemusíte.
• Sleva s referenční cenou. Podle § 12a zákona o ochraně spotřebitele musí e-shop při oznámení slevy na výrobek uvést i nejnižší cenu, za kterou výrobek nabízel během 30 dnů před slevou. Právě od této ceny se má sleva počítat. Povinnost se netýká služeb, výrobků podléhajících rychlé zkáze a skutečně individuálních slev, například kupónu pro konkrétního zákazníka.

Z pohledu UX doporučujeme držet u ceny jasnou hierarchii: jedna výrazná konečná cena, pod ní menším písmem referenční cena a výše slevy, případně měrná cena. Tři přeškrtnuté ceny vedle sebe zákazníka spíš zmatou. Podrobný výklad slev najdete na webu České obchodní inspekce v sekci o slevách a právní rámec e-shopu v článku Obchodní podmínky e-shopu.

Dostupnost, doprava a vrácení přímo u tlačítka

Zákazník chce vědět, kdy zboží dostane a kolik ho to bude stát celkem. Baymard ve svém benchmarku řadí sekce doprava a vrácení a „nákupní" část stránky mezi oblasti, kde má většina e-shopů vážné problémy.

Blízko tlačítka „Do košíku" by mělo být:

• Konkrétní dostupnost. „Skladem, odesíláme dnes do 14:00" je lepší než „Skladem". U zboží na objednávku reálný termín.
• Cena dopravy nebo aspoň „od". Včetně hranice dopravy zdarma. Neočekávané náklady v pokladně jsou nejčastějším opravitelným důvodem opuštění košíku, víc v článku Checkout UX.
• Vrácení v jedné větě. „14 dní na vrácení" s odkazem na podrobnosti. Lhůta 14 dní pro odstoupení od smlouvy uzavřené na dálku je zákonné minimum, delší lhůta může být konkurenční výhoda.
• Výrazné tlačítko kontrastní barvy, na mobilu na dosah palce, ideálně s pevnou lištou při scrollu.

Popis a parametry: pro skenování, ne pro čtení

Podle Baymard Institute má 10 % e-shopů popisy produktů tak slabé, že kvůli nim uživatelé v testech odcházeli. Častější problém ale není málo textu, nýbrž špatně uspořádaný text.

• Nahoře tři až pět hlavních přínosů v odrážkách. Co produkt řeší, ne jen co je zač.
• Parametry v tabulce se sjednocenými jednotkami. Rozměry, hmotnost, materiál, kompatibilita.
• Odpovědi na typické dotazy. Velikostní tabulka, návod, co je v balení, záruka.
• Opatrně se záložkami. Baymard v testech opakovaně zjistil, že uživatelé obsah ve vodorovných záložkách přehlížejí. Na mobilu i desktopu často funguje lépe dlouhá stránka s rozbalovacími sekcemi.

Parametry vyplatí také v SEO a ve vyhledávání. Strukturovaná data podle Schema.org (Product, Offer, AggregateRating) umožní zobrazit cenu, dostupnost a hodnocení přímo ve výsledcích vyhledávání. Víc v článku Produktové SEO.

Recenze: přesvědčují, ale mají svá pravidla

Hodnocení a recenze patří k nejsilnějším prvkům detailu produktu. Baymard doporučuje vždy ukázat vedle průměrného hodnocení i počet hodnocení, protože průměr 5,0 z jednoho hodnocení působí jinak než 4,6 ze 300.

Pro české e-shopy platí od novely zákona o ochraně spotřebitele účinné od 6. 1. 2023 jasná pravidla:

• Pokud zveřejňujete recenze, musíte informovat, zda a jak zajišťujete, že pocházejí od lidí, kteří produkt skutečně koupili nebo použili. Informace musí být přímo u recenzí, případně dostupná odkazem.
• Ověření v praxi znamená, že recenzi umíte spojit s konkrétní objednávkou, například přes unikátní odkaz zaslaný po nákupu, přes zákaznický účet nebo přes ověřovací službu třetí strany.
• Tvrdit, že recenze jsou ověřené, když to nejde doložit, je zakázaná nekalá obchodní praktika. Stejně tak zveřejňování falešných recenzí nebo zkreslování těch skutečných, například mazáním negativních.

ČOI se na recenze při kontrolách e-shopů soustředí a u velké části kontrolovaných obchodů nachází nedostatky. Jak recenze sbírat a zobrazovat, rozebíráme v článku Sociální důkaz, recenze a UGC.

Tabulka: co musí a co by měl detail produktu obsahovat

Přístupnost a mobil

Detail produktu musí fungovat pro všechny. Popisy fotek (alt texty), dostatečný kontrast ceny a tlačítka, ovládání výběru varianty klávesnicí a srozumitelné chybové hlášky, když zákazník zapomene vybrat velikost. To je základ přístupnosti a zároveň lepší UX pro každého. Na mobilu kontrolujte, jestli se cena a tlačítko vejdou do první obrazovky a jestli galerie nezabírá tolik místa, že zákazník nevidí nic dalšího.

Jak na to prakticky: checklist detailu produktu

• Je hlavní cena konečná, včetně DPH, a nejvýraznější?
• Zobrazujete měrnou cenu tam, kde to vyžaduje zákon o cenách a vyhláška č. 291/2024 Sb.?
• Počítáte slevy od nejnižší ceny za posledních 30 dní a tuto cenu zobrazujete?
• Je u recenzí informace, zda a jak je ověřujete, a odpovídá skutečnosti?
• Ukazujete u hodnocení i počet hodnocení?
• Mají fotky dostatečné rozlišení a zoom, i na mobilu?
• Vidí zákazník dostupnost, termín doručení a cenu dopravy bez scrollování daleko od tlačítka?
• Jsou parametry v tabulce a hlavní přínosy v odrážkách?
• Máte na detailu strukturovaná data Product a Offer?
• Načte se stránka rychle i s galerií?

Pokud chcete vědět, kde konkrétně vaše produktové stránky ztrácí, udělejte UX audit. Máme ho hotový do 10 dnů a výstupem je seznam úprav seřazený podle dopadu. Sporné změny, třeba přesun recenzí nebo nové uspořádání ceny, pak ověřujeme A/B testy v rámci CRO.