Zpět na seznam článků

17 elementů produktové stránky e-shopu

Proč potřebujete vlnu z jaka, a na co nezapomenout při tvorbě produktové stránky. 17 prvků, které by na stránce měly být - od pochopitelného nadpisu po cross-sell.

Harrys-product-page

Jak.

To zvíře. Respektive jačí vlna. Pokud si myslíte, že jsem se právě zbláznil, tak počkejte.

„Jačí vlna / yak shavings“ je terminus technicus a je to první zdánlivě nesmyslný krok v sérii kroků, které potřebujete udělat, abyste mohli něco udělat.
(poprvé použito v MIT media lab v roce 2000)

Uvedu příklad:

Potřebuju umýt auto.
Mám rozbitou hadici, musím ji koupit v Bauhausu.
Do Bauhausu se dostanu po dálnici, ale nemám známku.
Můžu si půjčit sousedovo auto se známkou.
Mám od nich půjčený polštář, který jim nemůžu vrátit, protože se z něho začala sypat výplň.
A výplní je jačí vlna.

Takže se jdu vloupat do ZOO ostříhat jaka, abych mohl umýt auto.

Jačí vlna

Co vám chci trochu krkolomně říct je to, že ne vždy tušíte, proč si někdo kupuje váš produkt. Můžete mu ale pomoct v rozhodování tím, že mu dáte správné informace.

Každý e-shop je jiný, takže jsem těch 17 elementů seřadil podle důležitosti.

1. Název produktu

Hlavní nadpis, dostatečně výrazný. Nemíchejte prosím název a kategorii případně vlastnosti produktu. 50 % e-shopů přidává do názvu produktu další informace (značku, typ, atp.), což uživatele mate/štve. Protože je nutíte číst celý text.

Dobře:

Stoly od IKEA

IKEA – Název oddělený graficky od kategorie/typu. Klidně na stejné řádce.

Špatně:

Stoly se špatným popisem produktu

SEARS – Popis produktu míchá název s vlastnostmi

2. Fotky

Lepší a větší fotky = lepší možnost si produkt prohlédnout. Nebojte se fotky udělat opravdu velké.

Dobrá je funkce zoom a 360stupňový pohled na produkt.

Zoom na detail produktu.

Existují i systémy, které mění fotku podle toho, jaké zadáte vlastní míry. Či dokonce augmentovaná realita, která vám například brýle nebo šaty nasadí na hlavu/tělo.

Alternativně můžete použít i video.

3. Tlačítko přidat do košíku

Tlačítko musí ze stránky trčet. Nabízí se příměr pěst na oko. Teď mě všichni grafici proklejí, ale udělejte tohle tlačítko barvou, která na webu nikde jinde není. Ideálně komplementární k barvě loga. Takže pokud máte oranžové logo, tlačítko udělejte modré. Tohle je jeden z logických A/B testů. Vždy volte barvu, která kontrastuje s okolím.

U textu mějte na paměti, že se liší úzus země od země. V USA je to Add to cart, v Británii Add to bag. Většinou se ukazuje že slovo Přidat funguje lépe než Koupit. Přidat nezavazuje, můžete to odebrat. Koupit je definitivní.

Výrazné tlačítko CTA

Kontrastní tlačítko Přidat do košíku.

4. Cena

Ať je velká, jasná, nepřehlédnutelná. Dejte vědět, zda je s DPH nebo bez.

Cenu dejte do blízkosti tlačítka pro přidání do košíku.

Co se týče slev, akcí, ukotvení a ostatních fíglů cenotvorby, mrkněte na můj předchozí e-mail: Tak za kolik? 6 principů, jak dosáhnout vyšší ceny.

5. Dostupnost

Vždy uveďte, zda je zboží skladem. Určitě nenechte si lidi dát něco do košíku a až v košíku jim říct, že to není dostupné. Body navíc, pokudpoužíváte multichannel a ukážete lidem i dostupnost zboží na nejbližší pobočce/odběrném místě.

Dostupnost zboží

Pokud zboží skladem není, tak dejte vědět, kdy bude. A pokud to nevíte, nechte si dát e-mail s tím, že dáte vědět, až to bude.

Pokud je zboží skladem, tak můžete aplikovat princip Nedostupnosti (Scarcity), abyste přinutili lidi si to koupit.

Klasicky Booking.com. Poslední dva pokoje, a zrovna se na tento hotel dívá dalších 5 lidí. Naposled k tomu přidali i větu: Tento pokoj pravděpodobně pronajmeme během následujících X hodin.

Velmi efektivní sviňárnička.

Booking a princip nedostupnosti

Utahování šroubů v podání Booking.com

6. Platební možnosti

Dejte lidem různé možnosti, jak zaplatit. Nemusí to být nutně ta nejvíce důležitá informace ve vizuální hierarchii, ale být by tam někde měla. Ideální jsou loga. Platební karet, dalších metod.

V Čechách je pořád nejoblíbenější způsob placení dobírkou, platební karty, online platby nebo placení při osobním odběru ale pomalu, zato dlouhodobě rostou (podle Heuréky a PayU).

7. Způsoby dopravy

Tady jsou tři elementy. Cena, pohodlí a čas.

Cena je ideálně 0, viz Amazon a jeho zvýšení zisku. I malá cena odrazuje, tuším, že ve Francii nechal dopravu za 1 frank a výsledky byly oproti dopravě zdarma tragické.

Pohodlí značí, zda pro to půjdete na poštu či odběrné místo nebo vám to někdo doručí až do 4. patra bez výtahu a s úsměvem. Třeba jako iTesco, které chválím.

Čas znamená, jak moc rychle to chci mít. Zda mesíkem do hodiny, nebo stačí za měsíc lodní dopravou.

8. Vrácení zboží

Důležité pro případné rozhodnutí o nákupu je možnost zboží jednoduše vrátit. Je to sice dané zákonem, ale udělat to bezbolestně, jako Zappos, včetně platby za dopravu zpět do e-shopu je geniální tah. Zvlášť pro oblečení a doplňky, kde si můžete vybrat více velikostí, a zdarma vrátit nevyhovující.

9. Popis produktu

Pokud si myslíte, že obšlehnete popis od výrobce, tak to máte smůlu. Z hlediska jak SEO tak UX se vám určitě vyplatí popsat produkt vlastními silami. Zkuste do toho dát kousek z osobnosti firmy.

Je fajn mít zajímavý produkt, třeba manšestráky s pruhy vodorovně. Tzv. cordurounds. Všude na světě tomu říkají manšestráky, jen v UK je to Corduroy. Něco jako Suomi.

Cordurounds
Znepokojivě aerodynamická kaťata.

No nekupte to. Tohle je příklad Purple cow od Setha Godina.

Manšestráky

O tomhle můžete povídat na každé párty

10. Detaily produktu

Detaily produktu. Rozměry, barvy, materiál, způsob údržby, manuál ke stažení. Prostě uspokojte Metodickou nákupní modalitu, viz některý s dalších e-mailů.

Amazon a detaily produktu

Amazon a detaily produktu.

11. Velikosti

Moje oblíbené téma. Hlavně pro oblečení je tohle hrozně důležité. Určitě zvolte přehlednou tabulku, uvádějte všechny dostupné možnosti a systémy a připojte tutoriál, jak se změřit. Klasické jsou v tomto košile, boty a podprsenky.

Například u podprsenek existuje 5 systémů: EU, Francie/Belgie/Španělsko, Itálie, UK, Austrálie a USA. A to nemluvím o tom, že objemově je stená velikost 38A jako 30E.

Aby se v tom prase vyznalo.

Velikosti podprsenek

Astratex – dobře umístěný odkaz ověřte si velikost

12. Výběr barvy, materiálu či střihu

Ukazujte barevné varianty produktu. Ideálně nejen ve čtverečku o velikosti, jako když veš kýchne. Ideálně ukazujte zvolenou barvu přímo ve velké fotce.

Výborně to mají zpracované v Le Premiér, kde mají konfigurátor košil.

Lepremier výběr barev a detailů košile

Výběr doplňků a interaktivní náhled.

13. Hodnocení zákazníků

Hodnocení je jedna z nejúčinnějších věcí, co ulehčí rozhodování. Musí to mít ale následující strukturu: počet hvězdiček následovaný počtem recenzí. Bez počtu recenzí je pouhé hodnocení hvězdičkami nedostatečné. Protože většina lidí preferuje nižší hodnocení při vyšším počtu recenzí.

Lidsky řečeno, radši si koupím produkt, který má 60 recenzí a 4,5 hvězdičky, než produkt, který má 5 hvězdiček a 3 recenze. Omezuji riziko chyby ve výběru.

Amazon má algoritmus, který dokonce z recenzí vytahuje benefity důležité pro uživatele. Například u foťáku rychlost závěrky atp. A tyto informace přehledně prezentuje.

Hodnocení lze hezky spojit se social proof ve smyslu, kolik lidí koupilo, kolik je spokojeno s nákupem, kolik by doporučilo atp.

Hodnocení produktu

Alza – hodnocení a social proof

14. Recenze

Další užitečná funkce. Co na to říkají ostatní lidi. Ne vždy se vám v popisu produktu podaří kompletní popis. Na případné námitky – viz e-mail o 7 krocích nákupního chování – slouží právě recenze.

recenze na Amazonu vč. hlasování o užitečnosti

Pár funkcí, které recenze ještě vylepšují:

  • sumarizace výhod a nevýhod
  • pro koho je produkt ideální (cílovka z pohledu cílovky)
  • seřazení recenzí podle užitečnosti (hlasování uživatelů)

15. Wishlist / Hlídací pes

Jedná se o seznam pro příští nákup. Ať už na základě oblíbenosti, nebo určitých parametrů, jako v případě hlídacího psa. Zvažte, nakolik tato funkce přinese užitek versus obtěžování uživatelů.

Nedávno jsem měl vášnivou debatu na téma funkce přidat do oblíbených. Než jsme se s klientem koukli do Analytics a zjistili, že to používají 3 lidi z 1000.

Nicméně wishlist je pro mě – minimálně na Amazonu – mor. A možnost jej sdílet je taky fajn. Ukazuje se totiž, že má člověk větší radost z dárku, který si sám vybral, než z dárku překvapení. Tak na to myslete, až budete přítelkyni kupovat příklepovou vrtačku.

16. Live chat

E-shop bez chatu, je jako obchod bez prodavačky. Tohle není z mé hlavy, klient to slyšel na přednášce. Bohužel netuším, od koho.

Live chat dává tím větší smysl, čím je produkt dražší a nebo komplikovanější. Z hlediska konverze stačí vidět možnost chatu, reálně vás bude kontaktovat každý 100 zákazník. Takže to pro vás většinou neznamená, že musíte zřizovat vlastní call centrum.

Doporučuji na toto aplikaci SmartSupp. Je od českých šikulů a mají solidní podporu.

17. Upsell a cross-sell

Upsell – nabízíte lepší verzi produktu.
Cross-sell – nabízíte doplňkový produkt.

Upsell prý funguje 20krát lépe, než cross-sell. Byl bych trochu skeptičtější, a tady určitě otestoval. Nicméně… určitě fungují věci jako:

  • Lidé, co koupili tohle, koupili i tohle. A tohle.
  • Lidé kupují dohromady tohle s tímhle.

Klasický je Amazon. Málokdo ví, že při koupi v jejich balíčku nedostáváte žádnou slevu. Amazon prostě sečte běžnou cenu všech produktů v balíčku.

cross sell na Amazonu

Vždy dbejte na to, aby dodatečná doporučení dávala smysl. A dodatečné produkty by neměly přesáhnout 60 % z ceny původního produktu.

Takže když kupuji kalhoty, nabídněte mi pásek. Ne boty za trojnásobek.

Intermezzo

Pokud máte dojem, že vám tam něco chybí, máte pravdu. Schválně jsem vynechal Social Media ikony a lepítka Akce, Sleva atp.

Ad social media ikony, viděl jsem poměrně hodně výsledků A/B testů, kde právě vynechání social media ikon vedlo k nárůstu konverzí.

Co se týče Akcí a slev, jsem na ně alergický. Byť to berte jako mojí osobní preferenci, přes kterou jsem schopen se přenést ve chvíli, kdy vidím tvrdá data o nárůstu prodeje a zároveň mám zpětnou vazbu od lidí, že jim to nevadí.

Závěr

Na dovolené jsem měl zajímavý rozhovor s kamarádem Tomášem Pavlovičem, který říkal, že jsem se zbláznil. Proč proboha dávám takhle užitečné informace zadarmo.

Upřímně? Berte tohle jako mojí jačí vlnu.

A teď si jdu umýt to auto :).

Související články

Dollar-shave-club

7 psychologických principů, které vám zvýší obrat

Checklist-g47812cb30-1280

22 možností, jak zvýšit dokončení nákupu v e-shopu

Ja-a-mia

42stupňové horečky a A/B testování

Navy-seals-1

UX průzkum bojem a vybuchující netopýři

Smysluplná debata

  • Jiří Franěk
    Jiří Franěk

    K tomu 17. elementu se skvěle hodí analýza nejprodávanějších kombinací produktů. Bohužel pro většinu eshopařů to je nemyslitelný úkol, aby dělali ještě nějaké analýzy, proto jsem vytvořil šablonu pro RFM analýzu zákazníků jejíž součástí je i analýza nejprodávanějších produktů. Když by někdo chtěl zvýšit obrat může si ji zdarma stáhnout na https://jirifranek.cz/rfm-analyza . Věřím, že poslouží dobře nejen ke zvýšení obratu :)