V článku se dozvíte:

• Jak by měla vypadat standardní produktová stránka
• Hlavní pilíře, které tvoří dobrou produktovou stránku
• Popis produktu jako základ webové stránky
• Proč a jak vám může pomoci psychologie barev
• Základ konverze = CTA
• Seznam nejdůležitějších prvků dobré produktové stránky

Produktová stránka popisuje konkrétní produkt nebo službu na webu. Na produktové stránce se zákazníci obvykle dozvědí všechny potřebné informace o konkrétním produktu, které ovlivní jejich nákupní rozhodnutí. Správně nastavená produktová stránka může dokonce zvýšit konverzní poměr webu¹.

Jak vypadá standardní produktová stránka?

Mnoho produktových stránek je navrženo podle stejného vzoru - například vlevo jsou produktové fotografie a vpravo informace o produktu a tlačítka.

Uživatelé se díky zavedenému rozvržení a mechanismům snadněji orientují v podrobnostech o produktu. To však neznamená, že by všechny produktové stránky měly vypadat stejně. Doporučujeme držet se obecného rozhraní, které můžete oživit různými kreativními prvky. 

Základní pilíře dobré produktové stránky

Poskytněte zákazníkům reálnou představu o produktech

Náš mozek přenáší vizuální informace rychleji než textové. Produktové fotografie jsou pro e-shopy ideálním způsobem, jak zákazníkům poskytnout lepší představu o produktu.

OpiTip: Obrázky spolu se správně vyplněnými texty ALT mají posilující účinek pro SEO.

Absence fotografií “In Scale”

Kamenem úrazu bývá absence fotografií „In Scale“, které uživatelům umožňují určit velikost produktů, které si prohlížejí online. Tento problém se týká až 81 %² e-shopů. Kvalitní obrázky a videa z různých úhlů pomohou zákazníkům získat lepší představu o tom, k čemu produkty slouží.

V případě e-shopu s oblečením používejte fotografie s modelkami, které mají produkt na sobě. U větších produktů, jako jsou velké spotřebiče, poskytněte fotografie spotřebiče v prostoru.

Zaměřte se na hodnotný popis produktu

Popis produktu je zásadní. Slova jako sleva, doprava zdarma nebo funkce, která produkt odlišuje od konkurence, si zaslouží být viditelná hned na začátku.

Držte se však konceptu skenování - lidé obsah nečtou, ale skenují. V prvních třech slovech přidejte hlavní výhody produktu a nezapomeňte dodržet  F-vzor³.

A co s abstraktními informacemi?

Pro takzvané abstraktní informace, jako je hmotnost nebo vůně, jsou ideální textové popisy. S abstraktními informacemi o produktu má problém 52 %³ e-shopů.

Tento zahraniční web má abstraktní prvky dobře popsané a vizuálně znázorněné.

Nespoléhejte se však pouze na textové popisy. Kombinací obrázků a popisného textu máte u uživatelů zaručený úspěch. Ujistěte se, že fotografie a text jsou konzistentní ve všech rozhraních (stolní počítač, mobilní telefon...). U grafických fotografií doporučujeme před zveřejněním zkontrolovat, zda je text v grafice dostatečně čitelný.

OpiTip: Při optimalizaci produktové stránky myslete na SEO. Zaměřte se na témata související s vyhledávanými produkty. Než se zaměříte na objem, je důležité zvážit relevanci a to, co skutečně přispívá k úspěšným konverzím.

Nepodceňujte psychologii barev

Obecně platí pravidlo 60-30-10, které doporučuje používat na webu 60 % dominantních barev, 30 % sekundárních barev a 10 % akcentních barev.
Zajímavé je, že až 42 %⁴ zákazníků hodnotí obchod pouze na základě designu, zatímco 52 % se na web nevrátí kvůli jeho celkové estetice.

Barvy by měly být dostatečně kontrastní, proto je dobré při tvorbě webu používat nástroje pro testování barevné slepoty. Čím dříve tuto překážku odstraníte, tím lépe. Pomoci vám mohou i následující nástroje, které vám umožní ošetřit přístupnost webu pro všechny návštěvníky:

• Simulátor slepoty,
• Kontrola kontrastního poměru,
• Kontrola barevného kontrastu.

Myslete také na zrakově postižené uživatele, kterých jsou přibližně 2 miliardy⁵. Mezi tato postižení může patřit nejen úplná slepota, ale také různé formy zrakového postižení, které ovlivňují jejich schopnost vnímat digitální obsah a komunikovat s ním. Zákazníci se proto mohou setkat s následujícími problémy:

• Slepota
• Ztráta centrálního vidění: schopnost vidět pouze periferně.
• Rozmazané vidění
• Barvoslepost: neschopnost rozlišovat barvy
• Kontrastní citlivost: neschopnost rozlišit předměty od jejich pozadí
• Zhoršená zraková ostrost
• Slabé světlo: špatné vnímání za špatně osvětlených podmínek
• Pigmentová retinopatie: Schopnost vidět pouze úzkou oblast před sebou

Při tvorbě webového designu je důležité uplatňovat přístupy, které umožňují efektivní používání webu lidem se zrakovým postižením, což zahrnuje optimalizaci barev, kontrastů, textu a grafických prvků tak, aby byly přístupné všem uživatelům.

Tlačítka CTA jako základ pro konverze

Tlačítko CTA můžeme definovat jako grafický prvek, který uživatele podněcuje k provedení konkrétní akci. Typickými tlačítky jsou například „Koupit“ nebo „Zjistit více“.

Tlačítka CTA jsou klíčem ke zvýšení konverzí, v našem případě ke konečnému nákupu. Proto musí být viditelná a výrazná. Špatně navržené tlačítko může vést k vysoké míře okamžitého odchodu.

OpiTip: Nezanedbávejte výběr správné barvy tlačítka CTA. Nekombinujte velké množství barevných kombinací tlačítek na celém webu. Barvy by měly souznít s identitou vaší značky a vyvolat požadovanou emoci nebo podnítit požadovanou akci. Kromě toho je důležité, aby bylo tlačítko CTA dostatečně kontrastní s okolním designem, aby bylo pro uživatele dobře viditelné a použitelné.

Jasně prezentujte ceny produktů

Kvůli špatné viditelnosti ceny produktu zákazníci vnímají celý web negativně. Špatná přehlednost cen je ovlivněna i těmito faktory:

1. Ceny a slevy splývají s ostatními prvky stránky.
2. Slevy nejsou umístěny vedle ceny produktu.
3. Vícenásobné zobrazení akčních nabídek na stránce produktu.
4. Procenta nebo částky slev nejsou viditelné.

U produktů prodávaných ve více množstvích uvádějte informace o ceně za jednotku. Až 88 %6 e-shopů tyto informace nezobrazuje. Absence ceny za jednotku produktu může uživatelům ztížit posouzení ceny. V rámci sektoru B2B to ztěžuje prodej hromadných objednávek, které zvyšují průměrnou hodnotu objednávky.

Recenze - zlatý grál pro zákazníky

Recenze lze označit za jeden z nejdůležitějších prvků obsahu produktové stránky. Většina zákazníků7 si při prohlížení produktů nejprve přečte recenze od jiných kupujících. Snažte se reagovat zejména na negativní recenze. Dáte tím najevo, že se o své zákazníky skutečně zajímáte, a všimnou si toho zejména ti, kteří ještě nenakoupili.

Většina e-shopů však u recenzí požaduje příliš mnoho informací, což je pro zákazníky zatěžující. Usnadněte zákazníkům zpracování recenzí. Pokud budete požadovat pouze odpovědi na relevantní otázky týkající se produktu, zákazníci vám rádi zanechají recenzi zdarma.

Pokud však máte problémy s rychlým získáním recenzí, vyzkoušejte podpůrné aktivity:

• e-mailová kampaň po nákupu, ve které zákazníkům nabídnete slevu na další nákup výměnou za jejich recenzi, může výrazně zvýšit počet recenzí;
• nabídněte zákazníkům výhody za zaslání fotografií, na kterých používají váš produkt, což nejen povzbudí zákazníka k zapojení, ale můžete tyto fotografie také efektivně využít v dalších marketingových aktivitách.

V první řadě myslete na autenticitu. Zaměřte se na recenze od skutečných zákazníků.

Transparentně informujte o dodání a vrácení výrobku

Přibližně 64 %⁸ uživatelů se zajímá o ceny dopravy, přičemž 18 % uživatelů nedokončí nákup, protože předem neviděli celkovou cenu své objednávky.

E-shopy se obecně snaží poskytovat informace o doručení nebo vrácení zboží. Dejte návštěvníkům e-shopu jasně najevo celkovou částku včetně dopravy v detailu produktu. Vhodným místem pro tuto informaci může být hned vedle tlačítka „Koupit nyní“ nebo „Přidat do košíku“.  

Nezapomeňte také uvést další náklady na dopravu - například částku za nadrozměrné objednávky nebo expresní doručení.

Na stránce produktu (i v zápatí) zřetelně zobrazte odkaz na stručné shrnutí obecných zásad pro vracení zboží.

Parametrické tabulky

Uživatelé, kteří si prohlížejí technické specifikace, se v této oblasti obvykle dobře orientují. Mnozí z nich hledají odpovědi na velmi konkrétní otázky. Řada e-shopů má problémy s přehledným zobrazením technických parametrů a neposkytuje dostatečné doplňující informace o atributech technických specifikací.

Řešením je proto poskytnout seznam parametrů, které jsou přehledně oddělené a uspořádané. U rozsáhlého seznamu parametrů zajistěte jeho přiměřenou délku - například seskupte vše, co přesahuje 20 specifikací, do podsekcí. Nezapomeňte také použít tučné písmo nebo kurzívu.

Seznam důležitých prvků stránky produktu z hlediska UX:

Obrázky produktů:

• Reálné rozměry produktu na obrázku - oblečení vyfocené na modelech, spotřebiče v reálném prostoru.
• Přidání popisného textu nebo grafiky - aby zákazníci lépe pochopili vlastnosti a funkce produktu, například voděodolnost.

Nákupní část (tlačítko Přidat do košíku)

• Viditelná cena produktu - zvýrazněte cenu buď barevně, nebo většími číslicemi.
• Zjednodušit tlačítko „Uložit“ - umožnit uložení výrobků bez registrace, např.
• Zobrazení „ceny za kus“ - umožněte zákazníkům porovnat cenu za kus pro různá množství.

Doprava a vrácení zboží

• Celková cena objednávky - poskytněte zákazníkům odhad celkové ceny včetně dopravy
• Informace o vrácení - umožňují zákazníkům snadno najít informace o vrácení výrobku
• Správné umístění informace „doprava zdarma“ - umístěte dopravu zdarma hned vedle tlačítka koupit
• Předpokládané datum dodání - pokud je to možné, uveďte informace o předpokládaném datu dodání

Specifikace produktu

• Rozsáhlé parametrické tabulky - poskytují rozsáhlé a uspořádané parametry produktu pro lepší pochopení specifik.
• Sjednocení specifikací od dodavatelů - zajištění jednotnosti parametrů, například jednotek délky
• Zlepšete specifikace parametrických tabulek - používejte terminologii parametrů, které zákazníci rozumí.

Recenze výrobků

• Nepožadujte osobní údaje - požádejte zákazníka pouze o základní informace, aby mohl zanechat recenzi 
• Negativní recenze - nereagování na negativní recenze zanechává dvojnásobně špatný dojem
• Vizuální prvky v recenzích - přeměňte recenze na hvězdičky a zobrazujte je také vedle ceny produktu.
• Videorecenze - videorecenze poskytují větší autenticitu, což mohou vaši zákazníci ocenit.
• Doporučení produktů - doporučte tipy na produkty na základě předchozích interakcí v obchodě

¹https://www.webfx.com/blog/marketing/case-studies-cro/

²https://baymard.com/blog/current-state-ecommerce-product-page-ux

³https://uxplanet.org/people-dont-read-online-they-scan-this-is-how-to-write-for-them-80a75069c14e

⁴https://www.ecommerce-nation.com/color-psychology-for-ecommerce/#rb-attract-online-shoppers-with-color-marketing

⁵https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment

⁶https://baymard.com/blog/current-state-ecommerce-product-page-ux

⁷https://www.dixa.com/blog/3-important-statistics-that-show-how-reviews-influence-consumers/

⁸https://baymard.com/blog/current-state-ecommerce-product-page-ux