Vyberte stránku

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

Autor: Martin Havlín

Datum: 21.10.2020

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 MineruUX 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

  1. Kdo jsme?
    • Brand by měl být viditelný a jasný
  2. Co děláme?
    • Mělo by být na první pohled poznat, o čem e-shop je a co prodává
  3. 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

Menu

Obecně je lepší mít pouze 1 hlavní menu u sebe, aby to nemátlo uživatele:

  • 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:

Mohlo by se vám také líbit:

4 komentáře

    • Martin Havlín

      Můžete to trochu rozvést? Co je na nich nepovedené?

      Odpovědět
      • Profilový obrázek

        Možnost vybírat kombinace, které neobsahují žádné produkty. Po chvíli to může být dost otravné. Hláška, že střílíme slepými pobaví jen poprvé. Pokud není vybraný žádný filtr, tak vidím kolik produktů ve filtru je, pokud už jeden filtr vyberu, tak další filtrování už je opravdu naslepo.

        Odpovědět
        • Martin Havlín

          Tak to máte pravdu, po chvíli to je dost otravné. Ta filtrace je vcelku nešťastně vyřešena.
          Dal bych to jako další bod, na co si dát pozor.

          Odpovědět

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Pin It on Pinterest

Share This