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ě.
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
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:
K ukládání a/nebo přístupu k informacím o zařízení používáme technologie, jako jsou soubory cookie. Děláme to, abychom zlepšili zážitek z prohlížení a zobrazovali personalizované reklamy. Souhlas s těmito technologiemi nám umožní zpracovávat údaje, jako je chování při procházení nebo jedinečná ID na tomto webu. Nesouhlas nebo odvolání souhlasu může nepříznivě ovlivnit určité vlastnosti a funkce.
Funkční
Vždy aktivní
Technické uložení nebo přístup je nezbytně nutný pro legitimní účel umožnění použití konkrétní služby, kterou si odběratel nebo uživatel výslovně vyžádal, nebo pouze za účelem provedení přenosu sdělení prostřednictvím sítě elektronických komunikací.
Předvolby
Technické uložení nebo přístup je nezbytný pro legitimní účel ukládání preferencí, které nejsou požadovány odběratelem nebo uživatelem.
Statistiky
Technické uložení nebo přístup, který se používá výhradně pro statistické účely.Technické uložení nebo přístup, který se používá výhradně pro anonymní statistické účely. Bez předvolání, dobrovolného plnění ze strany vašeho Poskytovatele internetových služeb nebo dalších záznamů od třetí strany nelze informace, uložené nebo získané pouze pro tento účel, obvykle použít k vaší identifikaci.
Marketing
Technické uložení nebo přístup je nutný k vytvoření uživatelských profilů za účelem zasílání reklamy nebo sledování uživatele na webových stránkách nebo několika webových stránkách pro podobné marketingové účely.
