UX checklist kontroly před spuštěním e-shopu

Lukáš Pítra nedávno napsal článek, co zkontrolovat před spuštěním webu z hlediska SEO. Tak jsme se domluvili, že na to navážu, a sepíšu obdobný seznam z hlediska uživatelské přívětivosti a použitelnosti.

Tak jdeme na to. Jen podotýkám, abyste tohle brali jako inspiraci, spíš než dogma. Některá doporučení mohou ve vašem konkrétním případě znamenat i zhoršení (díky za tip od Honzy Kvasničky). Takže jak říká Chris Goward – We should test it.

Na celém webu

Assos patička

  1. Responzivní web – mělo by to fungovat na všech možných zařízeních. Mobily počínaje a velkými obrazovkami konče. Pokud už máte mobilní verzi, zvažte verzi pro velké monitory (s adekvátním zvětšením obrázků).
  2. Fungující na různých zařízeních, prohlížečích vč. starších verzí. Konverzní pyramida – začněte technickými nedostatky. Snadno se odstraní a výrazně zvednou konverzi.
  3. Zrychlete web – lidem ušetříte nervy, zvýšíte obrat a zlepšíte i pozice ve vyhledávačích.
  4. Slogan/výhoda oproti konkurenci – jasně lidem řekněte: co děláte, proč by je to mělo zajímat, a co mají dělat dál.
  5. Košík vč. ceny a počtu položek – Udělejte tlačítko výrazné, kontrastní a velké. A pamatujte si obsah košíku i po odchodu uživatele z webu.
  6. Vyhledávání – nakonfigurujte našeptávač, počítejte s překlepy, nabízejte kategorie i hledání v konkrétním umístění/výsledcích.
  7. Navigace – udělejte navigaci pochopitelnou i pro lamy. A nezapomeňte na drobečkovou navigaci. Taky ji zbytečně neschovávejte za ikonu hamburgeru ☰, lépe třeba takto M☰NU :).
  8. Dejte možnost změnit jazyk i měnu. Zkuste toto zjistit předem pomocí geo-ip lokace či nastavení operačního systému.
  9. Přihlášení a registrace – přihlášení si pamatujte pro příští návštěvu.
  10. Poštovné zdarma – pokud ho nabízíte, vrazte ho do hlavičky. Je to důležité hledisko při koupi.
  11. Kontakt – ukažte telefon, zařiďte si online chat. Do patičky dejte otevírací dobu, hledání poboček – pokud máte i prodejnu(y).
  12. Doprava, platba, reklamace, soukromí, obchodní podmínky – dejte to do patičky. Stejně tak, jako odkaz na desktop/mobilní verzi.
  13. Ubezpečovače – ukažte loga partnerů, platebních karet/bran, certifikací (Apek), heuréka, shop roku, dopravu, atd.
  14. Newsletter – pokud píšete užitečný newsletter, tak dejte možnost se přihlásit. Nabídněte slevu na další nákup.

Domovská stránka

Harry's homepage

  1. Šířka sortimentu – ukažte hlavní kategorie, oblíbené produkty, loga značek, případně navštívené produkty. Ale nepřeplácejte to.
  2. Prototypovost – respektujte očekávání uživatelů, jak má web ve vašem odvětví vypadat. Bez dobrého prvního dojmu a vybudované důvěry jste v pytli.
  3. Vizuální hierarchie – jednoduchá, přehledná a graficky čistá domovská stránka je základ.
  4. Social proof – ukažte, jak vás má hodně lidí rádo :).

Více v článcích:
Efektivní domovská stránka
Jak vybrat fotku na homepage

Kategorie

Alza kategorie

  1. Zobrazení produktů – dejte možnost ukázat produkty v tabulce, řádkovém zobrazení a výlohy (lookbook). Výloha je nový koncept, dost možná vám nebude fungovat.
  2. Náhled – ukažte velký náhled s cenou, hodnocením, dostupností. Možná i tlačítko koupit, pokud se lidi nemusí dívat na detail produktu.
  3. Řazení – uveďte minimálně tyto 4 možnosti: cena, prodávanost, relevance (jen u vyhledávání), hodnocení uživatelů (pokud jich máte dostatek).
  4. Filtrace – filtruje výsledky podle podkategorie, vlastností produktu (cena, výrobce, barva, …). Ukažte, kolik zbývá produktů při použití filtru.  Použité filtry ukažte nad výpisem produktů.
  5. Pomocník s výběrem – dejte lidem možnost si vybrat i jinak, než pouhou filtrací, veďte je trochu za ručičku. Např.: kytky – podle příležitosti, hračky podle věku a pohlaví dětí, atd.
  6. Nejprodávanější – ukažte nejprodávanější produkty. Dejte tipy na top produkty v podkategoriích (výdrž, design, pokemon go)
  7. Stránkování – většinou je lepší mít tlačítko Nahrát dalších X, paginace nefunguje na malých obrazovkách.

Produkt

Astratex

  1. Název produktu – jasný, srozumitelný, s klíčovými slovy.
  2. Fotky – velké fotky ze všech úhlů vč. možnosti zoomovat. Video, pokud je k dispozici.
  3. Tlačítko přidat do košíku – musí být nepřehlédnutelné. A po kliknutí musí být jasné, že se produkt přidal do košíku.
  4. Cena – u tlačítka. Dejte vědět, zda je s DPH, o kolik je zlevněná, kolik stojí doprava, možnosti platby.
  5. Hodnocení – za počtem hvězdiček dávejte i počet hodnocení.
  6. Dostupnost – skladem, kdy to dorazí k vám domů, na jaké je to prodejně. Pokud není dostupný, zvýrazněte to.
  7. Varianty – barevnost, atd.
  8. Velikosti – hlavně u oblečení, včetně tabulky pro jednotlivé země.
  9. Množství – počet kusů. Navíc ukažte omezené množství na skladě, vede to k impulzivnějším nákupům kvůli tzv. FOMO principu (fear of missing out).
  10. Popis produktu – zvýrazněte výhody daného produktu (odolnost, prodloužená garance), včetně kompatibility. Níže uveďte podrobný popis.
  11. Recenze – ukažte recenze ostatních uživatelů, spokojenost s produktem.
  12. Wishlist, hlídací pes – možnosti nechat si koupi na později nebo hlídat určitý parametr (dostupnost, cenu, variantu produktu)
  13. Upsell a cross-sell – lepší verze a doporučené produkty, příslušenství.
  14. Sdílení – s citem prosím. Jen dvě sociální sítě + e-mail. A neukazujte počet, pokud je tam nula.

Více v článcích:
17-elementu-produktove-stranky
upsell a cross-sell

Košík

Hanibal - košík

  1. Registrace – nenuťte uživatele registrovat se před nákupem. Přicházíte tak o 20-25 % objednávek.
  2. Konečná cena – ukažte cenu včetně poštovného, balného. Prostě sakumprásk. Nejistá cena je hlavní důvod opuštění košíku.
  3. Náhled produktů – včetně fotky, počtu kusů, jednotkové ceny, daně a dalších poplatků, poštovného a možnosti odebrat.
  4. Doručení – ukažte přesné datum doručení, cenu dopravy – ideálně zdarma, varianty (do 90 minut, do druhého dne)
  5. Upsell jen na mobilu – ukažte doporučené produkty v mobilu. Tam to lidem nevadí. U desktopu jste jim to ukazovali na stránce produktu.
  6. Tlačítka – tlačítka pro další krok dejte jak nad, tak pod košík.
  7. Uložit na později – dejte možnost dokončit nákup jindy. A pak na to upozorněte e-mailem.
  8. Slevové kódy – tohle trochu upozaďte, nebo vám lidi začnou utíkat a hledat slevu.
  9. Možnosti placení – u dražších produktů dejte možnost více plateb.

Více v článcích:
Jak by měl být zpracování košík (od Honzy Kvasničky)
Nákupní košík na steroidech – oblíbená přednáška Pavla Ungra ;/

Objednávkový proces

amazon objednávkový proces

  1. Zbavte se balastu – navigace? Pryč. Patička? Pryč. Jako Amazon. Jedno tlačítko směřující dopředu. Nic víc. Nedá se dokonce ani kliknout na předchozí kroky a logo(!).
  2. Guest checkout – objednávka bez registrace. Můžete pak už jen na děkovné stránce požádat o heslo. Nebo ho rovnou vytvořit a poslat e-mailem.
  3. Košík > Doprava a adresa > Platba > Souhrn > Děkujeme – tohle je nejčastější pořadí kroků. Dejte možnost se vrátit a pamatujte si vyplněné údaje. Prosím!
  4. Progress bar – ukažte uživateli, kolik a jaké jsou kroky v objednávce. U složitějších dejte vědět, kolik to zabere času (nebo taky ne a uveďte procenta). Nebo z toho udělejte hru, jako linkedin u vyplňování profilu.
  5. Online podpora – když ne tady, tak už nikde.
  6. Viditelný obsah košíku – ukažte obsah košíku v každém kroku (na velkých monitorech).
  7. Platba – dejte více možností. Karta, dobírka, splátky, převodem.
  8. Doprava – pokud si to vyzvednu v Uložence, nepotřebujete mojí adresu. Alzo sakra. Opět… více možností (i rychlosti dodání).
  9. Bezpečnost – zvyšte pocit bezpečí SSL šifrováním, a ukázáním log ubezpečovačů.
  10. Formuláře – ptejte se jen na to, co potřebujete. Velikost polí odpovídá vstupu. Měňte klávesnici v závislosti na typu obsahu (číslo, e-mail, telefon).
  11. Děkovná stránka – poděkujte, řekněte, co se bude dít dál. Dejte možnost založit účet, přihlásit se k newsletteru, pochlubit se na sociálních sítích, …

Více v článcích:
22 možností, jak zvýšit dokončení nákupu

Optimální proces nákupu

Závěr

Určitě to není konečný seznam. Ale píšu to z hlavy, tak kdybyste měli připomínky, tak budu rád.

 

Trackbacks/Pingbacks

  1. Mobilní UX checklist pro e-shopy | ILINČEV – Catcher - 27. únor 2017

    […] září jsem psal o UX checklistu pro e-shopy, teď přidávám verzi čistě pro mobil. Je to hlavně ze dvou […]

  2. Mobilní UX checklist pro e-shopy | ILINČEV | MOJE TÉMATA - 8. březen 2017

    […] září jsem psal o UX checklistu pro e-shopy, teď přidávám verzi čistě pro mobil. Je to hlavně ze dvou […]

  3. Mega checklist pred spustením e-shopu – vibration.sk - 27. únor 2018

    […] https://www.ilincev.com/ux-checklist-eshop […]

  4. Marketingové checklisty – Checklisty.cz - 25. září 2018

    […] UX checklist kontroly před spuštěním e-shopu, Ondřej Ilinčev, Ilincev.com, 9.2016 […]

Napsat komentář

Powered by WordPress. Designed by WooThemes