UX e-shopu – na co si dát pozor

Následující tipy ohledně UX designu přinášíme na základě online semináře od Marketing Mineru s UX specialistou Honzou Kvasničkou, který proběhl online 7.10.2020.

Níže se dočtete důležité body, které vám pomohou doladit e-shop z hlediska designu tak, aby prodával více. Na konci se navíc dozvíte, která šablona Shoptetu je na UX nejlepší nebo jaký nástroj v rámci UX využívat. Pokud vás zajímá, na co upozorňuje přední UX specialista, čtěte dále.

Všechny tipy vycházejí z ohodnocení několika e-shopů, které jsme v rámci webináře analyzovali, a tyto rady tak nemusejí platit pro veškeré e-shopy obecně.

Rychlost webu

Kontrola rychlosti webových stránek dle Google Page Speed Insights
- Google hodnotí web především dle rychlosti na mobilních zařízeních
- Rychlost webu ovlivňuje především PPC reklamy
Kontrola dle pagespeed.cz
- Zde můžete porovnávat rychlost svých stránek s konkurencí

3 základní otázky

Kdo jsme?
- Brand by měl být viditelný a jasný
Co děláme?
- Mělo by být na první pohled poznat, o čem e-shop je a co prodává
Proč by to návštěvníky mělo zajímat?
- Sdělení by měla být konkrétní a jasná, nedávat na stránky jen obecné fráze.

Pop up banner

Neměl by vyskočit na uživatele hned po přistání na stránce
- Když už pop up, tak ho dát alespoň třeba po 30 vteřinách strávených na webu
Google weby, na kterých ihned po přistání na stránce vyskočí pop up, hodnotí špatně
- Penalizuje poté PPC reklamy

Logo

Logo by mělo být dostatečně oddělené od ostatních polí
- Aby si lidé brand snáze zapamatovali

Homepage a produkty

Na homepage by měl být alespoň základní výpis produktů
- Aby návštěvníci poznali, že jsou na e-shopu a mohou nakupovat

Zvážit, zda dát odkaz na kontakty klasicky rovnou doprava nahoru na stránku – aby poté lidé jen rychle nevolali
Zvážit, zda nedát odkaz na kontakty raději vedle „poradny“, „FAQ“ apod.
- Aby návštěvníci nejdříve navštívili poradnu nebo FAQ, než budou s dotazy volat či psát email

Pole vyhledávání

Toto pole dát spíše na střed, nemusí to ale platit vždy
V textu vyhledávání předepsat například to, co by lidé do hledání měli zadat
- viz třeba alza.cz

Pokud člověk zadá něco, co na webu není, tak by ho výsledek hledání měl alespoň někam nasměrovat, ne pouze vypsat chybovou hlášku:

Bannery a obrázky v horní části webu

Slidery (i bannery):
- V drtivé většině nejsou příliš k užitku, lidé na ně neklikají a zabírají zbytečně příliš cenného místa
- Určitě je třeba měřit, jak na ně lidé klikají
- Je potřeba, aby bylo jasné, kam se člověk dostane, když na banner klikne (jasné sdělení) + dát do banneru výzvu k akci
- Má smysl třeba v případě, kdy běží FB kampaň s různými sděleními a tato sdělení pak reflektovat také na webu

Obrázky do horní části
- Dávat pouze pokud to navodí atmosféru
- Nedávat tak, aby zakrývaly produkty a odváděly pozornost od nákupu
- Například DEK příliš veliké

Oproti tomu hudy.cz navodí atmosféru

Personalizace homepage i jednotlivých stránek

Na e-shopu může být homepage personalizovaná pro každého uživatele následovně:
- První 3 návštěvy dbát na branding (třeba banner o brandingu)
- Od 4 návštěvy ukázat již příklad produktu či něco podobného
Můžeme také personalizovat prvky, které by mohly uživatele zajímat na základě jeho předchozích návštěv

Výhody e-shopu

Na každém e-shopu by měly být uvedeny nějaké výhody (o dopravě, záruky, apod.)
- Avšak nestačí využívat pouze zažité fráze, ty má již mnoho e-shopů
- Je dobré tyto výhody více rozepsat
Např. balistas.cz

Např. alza.cz

Košík e-shopu

Je zvykem umisťovat košík napravo nahoře
- Tam ho také lidé většinou intuitivně hledají
- Podle toho návštěvníci poznají, že jsou na e-shopu
Ideálně ho dát do barvy tlačítka „přidat do košíku“

Výpis produktů v kategorii

Doporučuje se mít 4 produkty v jednom řádku (případně 3)
- Více produktů znamená, že bude produkt zobrazován menší a třeba obrázky už nebudou tolik lákat.

Tlačítko přidat do košíku / přejít na detail u produktů v kategorii

Obecně je lepší mít rovnou z výpisů produktů v kategorii tlačítko „přidat do košíku“
Spíše nepoužívat „přejít na detail“ (hudy.cz to tak ale třeba má), raději mít proklikovou fotku s textem – v případě, že nechci mít rovnou „přidat do košíku“
Nemít „přidat do košíku“ v případě, že jsou produkty náročnější na výběr:
- Dražší výrobky (například kolo, Hudy produkty)
- Hodně filtrů u produktů (třeba u módy je pak ještě hodně vybíraní s velikostí, barvou, atd.)
Používat „přidat do košíku“ na místo „koupit“
- Chceme totiž po uživatelích, aby si přidali položku do košíku a dále nakupovali. Když bude u produktu koupit, tak to návštěvníky navádí, aby nákup ukončili

Konverzní cesta – výraznost

Konverzní cesta uživatele by měla být co nejvýrazněji vyznačená
- Na stránkách by návštěvníka nemělo nic jiného výraznějšího rušit
Často se používá zelená, protože je výrazná
Například u grizly.cz je pole „nejprodávanější“ příliš výrazné

Nezahlcovat zákazníka příliš informacemi

Prodávat zákazníkovi jen to, co je pro něj zrovna na dané stránce relevantní
Nedávat na stránky odkazy na tisíc dalších věcí, které člověk může vidět

Skladem

Informace, že je zboží skladem, uživateli neříká nic konkrétního
- Je lepší napsat, kdy konkrétně uživateli zboží dorazí domů (popřípadě kdy bude zboží expedováno)

Ceny produktů

Ceny by se měly uvádět spíše přímo u buttonu „přidat do košíku“, dávat ji dále od tohoto tlačítka (výš) je zastaralé

Obrázky u produktů

U produktových fotek myslet na fakt, že uživatelé mohou chtít mít představu o tom, jak je produkt veliký
- Například u hodinek
Plusové body získáte za to, když se změní produktový obrázek v případě, že uživatel změní velikost nebo barvu produktu
- Zvyšuje to konverznost
- Příklad – hudy.cz
Někdy může uživatele zajímat, jak produkt vypadá jako dárek
- Tedy jak třeba vypadá balení

Nákupní proces z košíku dále

Fáze nákupu

V ČR se doporučuje klasický 4fázový proces (poslední je děkovná stránka)
- Viz třeba alza.cz
Případně se může využít tzv. hybridní košík – vše na jedné straně, ale další krok objednávky se zobrazí až když uživatel vyplní předchozí část
- Například balistas.cz
Je dobré uživatelům naznačit, kolik kroků je ještě čeká

Nerušení při nákupu

V nákupním procesu nesmí uživatele rušit žádné odkazy, bannery a tlačítka
- Například hudy.cz nemá žádné rušivé elementy

Průchodnost košíku

Průchodnost košíku se většinou pohybuje okolo 35 – 45 % (správně přizpůsobeného)
- Mnoho e-shopů však těchto hodnot nedosahuje
U některých e-shopů, kde se lidé často vracejí, to může být až 70 %
Průchodnost je potřeba měřit

Doporučené produkty

Nedávat je do objednávkového procesu
Dát je spíše přímo u produktové stránky nebo před objednávkovým procesem (jako například rohlik.cz)

Nabízet doplňující a spíše levnější produkty, které třeba lidé kupují společně s daným produktem
Nazvat například: „Lidé si k tomuto produktu nejčastěji kupují“

Šířka displeje

Nebát se používat 1440px nebo 1600px
Je dobré mít horní fotku full width přes celý displej
Nemít ale u produktů full width

Další doporučení a tipy

Invisionapp

Nástroj pro UX design
Skvělé na feedbacky ohledně designu
Jakým způsobem hodnotí Honza Kvasnička design z pohledu UX:
- Udělám screenshoty na Invisionapp
- Dávám feedbacky k jednotlivým prvkům
- Označím, co je jak prioritní!
- Podle toho pak děláme úpravy

Jaká Shoptet šablona je nejlepší

Nejlépe optimalizovaná šablona na Shoptetu je šablona klasik
Shoptet je nejlepší krabicové řešení na e-shopy, ideální je k tomu mít šikovné vývojáře, kteří k tomu dodají skvělé technické prvky.

Jakými weby se inspirovat z hlediska UX

Zde najdete seznam některých webů, na kterých pracoval Honza Kvasnička, nebo ty které z hlediska UX doporučuje: