V článku zistíte:

• Ako by mala vyzerať štandardná produktová stránka
• Hlavné piliere, ktoré tvoria dobrú produktovú stránku
• Produktový popis ako základ webu
• Prečo a ako vám pomôže psychológia farieb
• Základ konverzií = CTA
• Zoznam najdôležitejších prvkov kvalitnej produktovej stránky

Produktová stránka popisuje konkrétny produkt alebo službu na webe. Na produktovej stránke sa zákazníci zvyčajne dozvedia všetky potrebné informácie o konkrétnom produkte, ktoré ovplyvnia ich rozhodnutie o nákupe. Správne nastavená produktová stránka môže dokonca zvýšiť konverzný pomer¹ webu.

Ako vyzerá štandard produktových stránok?

Množstvo produktových stránok je skonštruovaných podľa rovnakého vzoru – napríklad fotografie produktov sú vľavo a informácie o produkte a tlačidlá vpravo.

Používatelia sa vďaka zaužívaným rozloženiam a mechanizmom dokážu jednoduchšie orientovať na detaile produktu. Neznamená to však, že všetky produktové stránky by mali vyzerať rovnako. Odporúčame sa držať všeobecného rozhrania, ktoré môžete oživiť rôznymi kreatívnymi prvkami.

Základné piliere kvalitnej produktovej stránky

Poskytnite zákazníkom reálnu predstavu o produktoch

Náš mozog prenáša vizuálne informácie rýchlejšie v porovnaní s textovými. Produktové fotografie sú pre e-shopy ideálnym spôsobom, ako umožniť zákazníkom lepšie porozumieť produktu. 

OpiTip: Obrázky sú spoločne so správne vyplnenými ALT textami podporujúcim efektom pre SEO.

Absencia “In Scale” fotografie

Kameňom úrazu bývajú chýbajúce „In Scale“ fotografie, vďaka ktorým používatelia dokážu určiť veľkosť produktov, ktoré si prezerajú online. Táto problematika postihuje až 81 %² e-shopov. Kvalitné obrázky a videá z rôznych uhlov pomôžu zákazníkom si lepšie predstaviť, na čo produkty slúžia. 

V prípade e-shopu s oblečením použite fotografie s modelkami, ktoré majú daný produkt oblečený. Pri väčších produktoch, ako sú napríklad veľké spotrebiče, poskytnite fotografie spotrebiča v priestore.

Zamerajte sa na hodnotný produktový popis

Popis produktu je základ. Slová ako zľava, doprava zadarmo alebo vlastnosť odlišujúca produkt od konkurencie si zaslúžia byť viditeľné hneď na začiatku.

Držte sa však konceptu skenovania – ľudia obsah nečítajú, ale skenujú. Hlavné výhody produktu pridajte do prvých troch slov a nezabudnite zachovať F-vzor³.

Čo s abstraktnými informáciami?

Pri takzvaných abstraktných informáciách, ako je napríklad hmotnosť alebo vôňa, sú textové popisy ideálne. Problém s abstraktnými informáciami produktu má 52 %³ e-shopov.

Tento zahraničný web má abstrakné prvky dobre popísané aj vizuálne znázornené.

Nespoliehajte sa však len na textové popisy. Kombináciou obrázkov a popisných textov máte u používateľov zaručený úspech. Uistite sa, že fotografie a text sú v súlade so všetkými rozhraniami (desktop, mobil…). Pre graficky upravené fotografie odporúčame pred zverejnením skontrolovať, či je text v grafike dostatočne čitateľný.

OpiTip: V rámci optimalizácie produktovej stránky myslite aj na SEO. Zamerajte sa na témy spojené s produktmi, ktoré sú vyhľadávané. Skôr, ako sa zameriate na objem, je dôležité zvážiť relevantnosť a to, čo skutočne prispieva k úspešným konverziám.

Nepodceňujte psychológiu farieb

Vo všeobecnosti platí pravidlo 60-30-10, ktoré odporúča použiť 60 % dominantnej farby, 30 % sekundárnej farby a 10 % zdôrazňujúcej farby na vašom webe.

Zaujímavosťou je, že až 42 %⁴ zákazníkov hodnotí obchod výlučne na základe dizajnu, zatiaľ čo 52 % sa nevráti na stránku kvôli jej celkovej estetike.

Farby by mali mať dostatočný kontrast, preto je dobré pri vytváraní stránky použiť nástroje na testovanie farbosleposti. Čím skôr túto prekážku odstránite, tým lepšie. Pomôcť vám môžu aj tieto nástroje, vďaka ktorým si dokážete ošetriť prístupnosť webu pre všetkých návštevníkoch:

• Blindness simulator,
• Contrast ratio checkers,
• Color contrast checker.

Myslite aj na zrakovo znevýhodnených používateľov, ktorých je približne 2 miliardy⁵. Takéto formy postihnutia môžu zahŕňať nielen úplnú slepotu, ale aj rôzne formy zrakového znevýhodnenia, ktoré ovplyvňujú ich schopnosť vnímať a interagovať s digitálnym obsahom. U zákazníka sa preto môžete stretnúť s:

• Slepota
• Strata centrálneho videnia: Schopnosť vidieť len periférne
• Zahmlené videnie
• Farbosleposť: Neschopnosť rozlišovať farby
• Kontrastná citlivosť: Neschopnosť rozlišovať predmety od ich pozadia
• Zhoršená ostrosť zraku
• Slabé osvetlenie: Zlé vnímanie v slabo osvetlených podmienkach
• Pigmentová retinopatia: Schopnosť vidieť len úzku oblasť pred sebou

Pri tvorbe webového dizajnu je dôležité implementovať prístupy, ktoré umožnia ľuďom so zrakovými obmedzeniami efektívne používať váš web, čo zahŕňa optimalizáciu farieb, kontrastov, textov a grafických prvkov, aby boli prístupné pre všetkých používateľov.

CTA tlačidlá ako základ konverzií

CTA vieme definovať ako grafický prvok, ktorý podnecuje používateľov, aby vykonali konkrétnu akciu. Typickými tlačidlami sú napríklad „Kúpiť“ alebo „Zistiť viac“.

CTA tlačidlá sú kľúčové pre zvýšenie konverzie, v našom prípade konečný nákup. Preto musia byť viditeľné a zreteľné. Zle navrhnuté tlačidlo môže viesť k vysokej miere okamžitých odchodov.

OpiTip: Nezanedbajte správny výber farby CTA tlačidla. Nekombinujte veľké množstvo farebných kombinácií tlačidiel naprieč celým webom. Farby by mali rezonovať s identitou vašej značky a vytvárať požadovanú emóciu alebo podnecovať k požadovanej akcii. Okrem toho je dôležité mať dostatočný kontrast medzi tlačidlom CTA a okolitým dizajnom, aby bolo tlačidlo ľahko viditeľné a použiteľné pre používateľov.

Prezentujte ceny produktov jasne

Kvôli zlej viditeľnosti ceny produktu zákazníci vnímajú negatívne celý web. Zlú prehľadnosť cien ovplyvňujú aj tieto faktory:

1. Ceny a zľavy splývajú s ostatnými prvkami stránky.
2. Zľavy nie sú umiestnené pri cene produktu.
3. Viacnásobné zobrazenie akcií na produktovej stránke.
4. Nezvýrazné percentá alebo sumy zliav.

Pri produktoch predávaných vo viacerých množstvách poskytujte informácie o cene za jeden kus. Až 88 %⁶ e-shopov nezobrazuje túto informáciu. Absencia ceny za jednotku produktu môže používateľom sťažiť posúdenie ceny. V rámci B2B sektoru to komplikuje predávanie hromadných objednávok, ktoré zvyšujú priemernú hodnotu objednávky.

Recenzie – zlatý grál pre zákazníkov

Recenzie môžeme označiť ako jeden z najdôležitejších prvkov obsahu produktovej stránky. Väčšina zákazníkov⁷ si pri prezeraní produktov číta ako prvé recenzie od iných kupujúcich. Snažte reagovať najmä na negatívne recenzie. Ukážete tak, že sa o zákazníkov naozaj zaujímate a uvidia to najmä tí, ktorí ešte nenakúpili.

Väčšina e-shopov však požaduje pre recenzie príliš veľa informácií, čo je pre zákazníkov zaťažujúce. Uľahčite zákazníkom spracovanie recenzie. Ak budete požadovať odpovede len na relevantné otázky o produkte, zákazníci vám radi zanechajú recenziu zadarmo.

Ak však máte problém s rýchlym získaním recenzií, skúste podporné aktivity:

• e-mailová kampaň po nákupe, kde zákazníkom ponúknete zľavu na ďalší nákup výmenou za ich recenziu, môže výrazne zvýšiť váš počet recenzií;
• ponúknite zákazníkom výhody za zaslanie fotografií s využitím vášho produktu, čo nielenže stimuluje zákazníka k zapojeniu, ale tieto fotografie môžete efektívne využiť aj v ďalších marketingových aktivitách.

V prvom rade myslite na autenticitu. Zamerajte sa na recenzie od skutočných zákazníkov.

Transparentne komunikujte dodanie a vrátenie produktu

Cenu dopravy hľadá približne 64 %⁸ používateľov, pričom 18 % nedokončí nákup, pretože vopred nevideli celkovú cenu objednávky.

E-shopy vo všeobecnosti riešia problémy s poskytnutím informácií o doručení alebo vrátení tovaru. Dajte návštevníkom e-shopu jasne vedieť o celkovej sume vrátane dopravy už pri detaile produktu. Vhodné umiestnenie pre tieto informácie môže byť hneď pri tlačidle “Nakúpiť alebo “Pridať do košíka”.  

Taktiež nezabudnite zahrnúť dodatočné náklady za doručenie – napríklad sumu za nadrozmerné objednávky, prípadne expresné doručenie.

Na stránke produktu (ako aj v pätičke) zreteľne zobrazte odkaz na stručné zhrnutie všeobecných pravidiel vrátenia tovaru.

Parametrické tabuľky

Používatelia, ktorí si prechádzajú technické špecifikácie, majú zvyčajne dobré znalosti v danej oblasti. Mnohí z nich hľadajú odpovede na veľmi špecifické otázky. Viaceré e-shopy majú problémy so zrozumiteľným zobrazovaním technických parametrov a neposkytujú dostatočné doplňujúce informácie k atribútom technických špecifikácií.

Riešením je preto poskytnutie zoznamu parametrov, ktoré sú jasne oddelené a usporiadané. Pri rozsiahlom zozname parametrov stanovte adekvátnu dĺžku – napríklad čokoľvek nad 20 špecifikácií zoskupte do podsekcií. Nezabudnite tiež na rozlíšenie tučným písmom (boldom) alebo kurzívou.

Zoznam dôležitých prvkov pre produktovú stránku z pohľadu UX:

Produktové obrázky:

• Reálne veľkosti produktov na obrázku – oblečenie odfoťte na modeloch, spotrebiče v reálnom priestore
• Pridanie popisného textu alebo grafiky – zákazníci tak lepšie pochopia funkcie a vlastnosti produktu, napríklad vodeodolnosť.

Nákupná sekcia (tlačidlo „Add to cart“)

• Viditeľná cena produktu – zvýraznite cenu buď farebne alebo väčšími číslami
• Zjednodušenie tlačidla „Uložiť“ – umožnite uloženie produktov napríklad bez registrácie
• Zobrazenie „ceny za kus“ – umožnite zákazníkom porovnať cenu za kus pri rôznych množstvách

Doprava a vrátenie

• Celková cena objednávky – poskytnite zákazníkom odhad celkovej ceny vrátane dopravy
• Informácia o vrátení tovaru – umožnite zákazníkom jednoducho nájsť informácie o vrátení produktu
• Správne umiestnenie informácie o “doprave zadarmo” – umiestnite dopravu zadarmo hneď pri tlačidle kúpiť
• Predpokladaný dátum dodania – ak je to možné, tak informujte o predpokladanom dátume dodania tovaru

Špecifikácie produktu

• Rozsiahle parametrické tabuľky – poskytnite rozsiahle a usporiadané parametre produktu pre lepšie pochopenie špecifík
• Zjednotenie špecifikácií od dodávateľov – zabezpečte jednotnosť parametrov, napríklad jednotiek dĺžky
• Zlepšite špecifikácie parametrických tabuliek – využite terminológiu parametrov, ktorú zákazníci pochopia

Recenzie produktov

• Nežiadajte osobné informácie – pre zanechanie recenzie žiadajte zákazníka len o základné informácie
• Negatívne recenzie – neodpovedanie na negatívne recenzie zanecháva dvojnásobne zlý dojem
• Vizuálne prvky v recenziách – premeňte recenzie na hviezdičky a zobrazujte ich aj pri cene produktu.
• Videorecenzie – videorecenzie poskytnú väčšiu autenticitu, čo môžu vaši zákazníci oceniť
• Odporúčanie produktov – odporučte tipy na produkty na základe predchádzajúcich interakcií na e-shope

¹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://baymard.com/blog/current-state-ecommerce-product-page-ux

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