Zpět na seznam článků

Mobilní UX checklist pro e-shopy

Funguje vám mobilní verze e-shopu správně? Zkontrolujte si to pomocí 71bodového UX checklistu.

Mobile

V září jsem psal o UX checklistu pro e-shopy, teď přidávám verzi čistě pro mobil. Je to hlavně ze dvou důvodů:

  • návštěvnost z mobilů a je v současnosti na 30-40 % všech návštěv,
  • uživatelé se na mobilu chovají jinak než na desktopu.

A jelikož jsem ze statistik zjistil, že vás moc nebaví, když se vykecávám, tak přejdeme rovnou k věci. Respektive 71 věcem.

Obecné chování na mobilu

Mobil
  1. Stejný obsah na mobilu, jako na desktopu
    59 % uživatelů očekává, že na mobilu uvidí kompletní sortiment. Navíc se velmi špatně vysvětluje, co na mobilu neukazujete. Důležité je to zejména u katalogu produktů a stránek s podporou.
  2. Pamatujte si, co uživatelé zadávali
    Psaní na mobilu je nešikovné a uživatelé se bojí, že to budou muset dělat znova. Hlavní strach ze ztráty dat je u odkazů (otevírejte do nového okna), reloadů stránky, systémových oken (s chybou), opuštění košíku pro přidání zboží a použití tlačítka zpět.
  3. Mobilní verze všude
    Uživatelé jsou dost zmatení, pokud se z mobilní verze stránky dostanou na nemobilní stránku webu.
  4. Zachovejte zvyklosti
    Pokud jsou uživatelé zvyklí, že u ceny máte na desktopu související produkty, ukažte jim je i na mobilu.
  5. Změňte prvky interface, pokud to dává smysl
    V operačních systémech na Androidu i iOS musíte potvrdit volbu dropdownu tlačítkem Done. Ale uživatelé jsou z webu zvyklí, že stačí kliknout. Podobně je to s výběrem barev.
  6. Text tlačítek by měl být pochopitelný
    Tlačítko je slib. Nepopisujte akci (Pokračovat), ale hodnotu (Vybrat dopravu)

Čitelnost a klikatelnost

  1. Dostatečný odstup (min. 2 mm)
    Mezi jednotlivými prvky, na které se dá klikat, dejte dostatek místa. Dejte si zvlášť pozor na: odkazy v patičce, stránkování (paginace), výběr dat v kalendáři, vysvětlivky u formulářových polí, Zrušit objednávku příliš těšně u Objednat.
  2. Minimální velikost klikatelného prvku (7 × 7 mm)
    7 × 7 mm. To je minimální velikost, na kterou se dá pohodlně kliknout. Doporučují to Apple, Microsoft i Nokia. Dejte si na to pozor v navigaci, formulářových polích, checkboxech a radiobuttonech a stránkování.
  3. Více odkazů v jednom elementu? Nedělejte to
    Pokud máte grafický prvek s více odkazy, tak uživatele zmatete. Typicky je to u produktových dlaždic, seznamu produktů, filtrace produktů a sliderů.
  4. Rozumná velikost písma
    Nikdy nejděte pod 11 px. A ano, různá písma vypadají různě. Já se snažím na mobilu mít 14 px a na desktopu 16 px. I volba správného písma je důležitá.

Inteligentní web, který rozumí kontextu

  1. Nenabízejte nesmyslné volby
    Ptejte se jen na to, co dává v tu chvíli smysl. A to na základě toho, co už uživatel vyplnil. Pár příkladů: posílání ve více balíčcích, když jsem objednal jen jednu věc, dvě varianty dopravy zdarma, s tím že jedna trvá déle, položky stát a země, i když nejsem z USA atd.
  2. Logický předvýběr
    Nejčastější nebo nejlogičtější volby předvyberte. Výběr velikosti bot a následně ukázání jen bot v dané velikosti atp.
  3. 1 možnost není volba
    Pokud máte dropdown s jedinou položkou na výběr (tzv. Hobson’s choice), tak ji rovnou vyberte. Nebo se dvěma položkami Ano/Ne (dejte checkbox).
  4. Vyplňte ostatní informace
    Ideální je to pro PSČ (můžete zúžit výběr města/kraje/státu v USA), IČO (vyplňte firmu, adresu, DIČ) nebo VIN kód auta (vyplníte asi tak 180 dalších údajů od obsahu válců po počet dveří)

Pomoc uživateli

  1. Slepé uličky
    Vždycky pomozte uživateli se vrátit zpět. Nemějte na webu stránku, kde není co dalšího udělat a nejde se vrátit zpátky. Jedná se o stránky s podporou, vysvětlujícím tipem (tooltipem) a chybové hlášky v objednávce.
  2. Kontrastní primární tlačítko
    Uživatele zmatete, pokud nebudou vědět, které tlačítko je to důležité. Takže mějte dva druhy tlačítek: důležitá a méně důležitá. A důležitá udělejte kontrastní, ideálně v komplementární barvě (zelená – červená, modrá – oranžová, atd.).
  3. Tlačítko Přepočítat musí zemřít
    Je to nesmyslné tlačítko, které občas vidím v košíku u počtu kusů. Rovnou to přepočítejte, prosím. Je to jako dopravní značka Konec přikázané rychlosti. Já potřebuji vědět, kolik můžu jet teď, a ne že už nemusím jet 60.

Patička

  1. Odkaz na desktop verzi
    Do patičky vždycky dejte odkaz na desktop verzi. Někdy je pro uživatele jednodušší verze pro desktop, protože jsou na ni zvyklí.
  2. Doprava, reklamace, platební metody atp.
    Buďte struční, přehlední a pochopitelní. U dopravy uvádějte dopravce, rychlost doručení, kam jste schopni posílat. U reklamací: kdy můžete věc vrátit bez udání důvodu, jaký je proces reklamace, kdo za co platí, jaké jsou lhůty a kdy přijdou peníze.  A dejte to do patičky u všech stránek produktů, nejen v objednávce.

Kategorie produktů

  1. Inspirace, pomoc s výběrem
    Pokud nemáte přesnou představu, tak je téměř nemožné si na mobilu vybrat produkt. Podejte uživatelům pomocnou ruku. Ideální pro: květiny podle příležitosti, hraček podle věku a pohlaví dětí atp.
  2. Pozor na animované slidery a karusely
    Uživatelé to ignorují, neprohlíží si to pozorně a blbě se jim to používá. A když už musíte, tak správně.
  3. Zjednodušte domovskou stránku a stránky kategorií
    2/3 lidí stránkou rychle prolétnou nahoru a dolů, než se dají do čtení/interakce. Udělejte stránku jednodušší, neschovávejte produktové kategorie a dejte si pozor na ohyb stránky (aby nevypadal jako konec stránky).
  4. Jednoduché podkategorie
    Nemějte podkategorií moc, nebo málo, nebo nelogicky strukturovaných. Včera jsem předělával stránky, kde jedna kategorie byla okna a interiérové dveře a druhá vstupní dveře. Takže jsem z toho udělal oknadveře.

Vyhledávání

  1. Vyhledávání uvnitř kategorií
    Pokud je uživatel uvnitř kategorie, dejte mu možnost vyhledat buď v celém webu nebo jen v aktuální kategorii.
  2. Pamatujte na překlepy a synonyma
    Překlepy jsou časté; na mobilu obzvlášť. Tak s tím počítejte. Druhá věc jsou synonyma. Raketa, pálka. Nabíječka, adaptér. Polokaskáda, han kengai :).
  3. Našeptavač
    Udělejte ho pořádně nebo vůbec. Uživatelé jsou zhýčkaní Googlem a očekávají podobnou funkcionalitu i od vašeho webu.

Seznam produktů

  1. Výška produktové dlaždice polovina obrazovky
    U výpisu produktů v dlaždicích dejte pozor na to, aby výška dlaždice byla maximálně polovina obrazovky (u mobilu na výšku). Dlaždici výrazně graficky oddělte, aby bylo jasné, kde jedna končí a druhá začíná.
  2. Ukažte, kam na dlaždici kliknout
    Buďto ji udělejte klikací celou nebo tyto části: náhled, nadpis, cena. Zkuste použít šipku, abyste dali na vědomí, že lze postoupit.
  3. Co největší náhledy
    Produktové náhledy (thumbnails) udělejte co možná největší. Aby z toho bylo vidět, co prodáváte.
  4. Co patří do dlaždice za informace
    Název produktu vč. hlavních vlastností (max. 3 řádky), cena nebo cenový rozsah, hodnocení (hvězdičky) a skladovost (kdy to bude doručeno).
  5. Stejné informace u dlaždice a detailu produktu
    Při prokliknutí do detailu produktu by měl detail mít: stejnou fotku, jako byla v náhledu; stejnou cenu; stejné hodnocení a vlastnosti.
  6. Ukázat další spíš než stránkování
    Pod výpisem produktů dejte tlačítko Nahrát dalších X produktů spíš než stránkování.
  7. Odlište již navštívené produkty
    Stejně tak, jako je úzus ukázat navštívený odkaz fialovou, tak je dobré ukázat, že na daný produkt už jste se dívali.
  8. Text na dlaždici dejte nevybratelný
    Při swipování produkty se občas stává, že omylem vyberete text. Takže tuto vlastnost v html zakažte (user-select: none a varianty pro další prohlížeče).

Filtrování a řazení

  1. Dejte možnost filtrovat i pro výsledky vyhledávání
    Protože jinak nutíte uživatele skrolovat až do konce seznamu.
  2. Kam dát filtry a řazení
    Nahoru nad seznam produktů. Téměř všichni uživatelé si obě funkce pletou.
  3. 3 druhy řazení
    Nabízejte řazení podle: nejprodávanější, ceny a hodnocení uživatelů.
  4. Vždycky ukažte použité filtry
    Pokud je použitý filtr na výpis zboží, tak ho vždycky ukažte. A zvýrazněte ho.
  5. Ukažte počet výsledků
    U výsledků vyhledávání, filtrování nebo podkategorií ukažte počet vyhovujících produktů.
  6. Skladem jako filtr
    Dejte možnost filtrovat podle dostupnosti zboží – skladem.
  7. Harmonika lepší než dropdown
    Pro výběr filtrů použijte spíš harmoniku (accordeon) než dropdown. Je jednodušší na používání.

Cross sell a upsell

  1. Kompatibilní produkty
    Ukažte související a podobné produkty, které fungují s vybraným produktem. Když u notebooku uvidím nabíječku, budu vědět, že to spolu bude fungovat.
  2. Související produkty
    Opravdu spolu musí souviset. A ne jako mall.cz, který mi k myčce nabízel jar a digestoř. U kompatibilních i souvisejících produktů uvádějte kromě náhledu i nadpis.

Informace o produktu

  1. Vše na jedné stránce
    Neukazujte obrázky, popis nebo recenze na separátních stránkách. Matete tak uživatele. Pro jednotlivé sekce použijte harmoniku s jasnými nadpisy.
  2. Ukažte drobečkovou navigaci
    Pomáhá s orientací, kde uživatel je.
  3. 2 tlačítka přidat do košíku
    Jelikož je stránka produktu dlouhá, dejte na ni 2 tlačítka Přidat do košíku. Jedno k ceně nahoru a druhé na úplný konec stránky. A dejte si pozor, aby si uživatelé nepletli tlačítko Přidat do košíku se samotným Košíkem.
  4. Dobré fotky
    Produkt ukažte z různých úhlu včetně detailu (švy, porty, rohy). Část uživatelů otočí telefon do vodorovné polohy, aby si prohlédla větší fotky. Počítejte s tím.
  5. Swipe a zoom
    Dovolte uživatelům swipovat galerií fotek a zoomovat dvěma prsty.
  6. Detailní popis produktu
    I na mobilu je potřeba uvést detailní popis (materiály, rozlišení, velikost, wifi, kompatibilita, atd.). A pamatujte na to, že by se to mělo dát hezky číst.

Košík

  1. Košík jako odkladiště oblíbených produktů
    Část uživatelů používá košík, aby si tam odložili zajímavé produkty. Pamatujte si, co si tam dali.
  2. Kolik tlačítek pro pokračování
    Pokud je počet produktů v košíku 1-3, použijte jedno dole. Pokud je seznam přes víc obrazovek, použijte jedno nahoře a jedno dole.
  3. Celková cena
    Celkovou cenu ukažte co nejdříve (i kdyby mělo jít o odhad – u dopravy). A rozpadněte ji na jednotlivé položky. A celkovou cenu dejte až pod čáru nakonec.
  4. Více kusů
    U více kusů stejného zboží ukazujte jak cenu za kus, tak celkovou cenu.
  5. Doprava
    U dopravy ukazujte cenu i termín dodání.
  6. Osobní odběr
    Osobní odběr / odběr na prodejně dejte k informacím o dopravě. A přidejte odkaz na mapu.
  7. Bez registrace
    Vždycky dejte možnost objednat bez nutnosti registrace. Nucením k registraci před nákupem si snížíte obrat o 25 %.
  8. Souhrn objednávky
    Dejte možnost změnit objednávku – ideálně tapnutím na jednotlivé prvky. A dejte tlačítko Objednat nahoru. Je důležité, aby si uživatelé nemysleli, že už si objednali a tohle je děkovací stránka.
  9. Děkovací stránka
    Dejte tam: co si objednal, cenu, kdy to přijde, na jaký e-mail se mu pošle potvrzení a kontakt na vás. Obdobně, jako u desktopové děkovací stránky.
  10. Progress bar
    Ukažte uživateli, kolik je kroků objednávky a jak je daleko.

Zadávání informací

  1. Ptejte se na informaci jen jednou
    Neptejte se v průběhu objednávky na to samé vícekrát. Já teď pomáhám jedné pojišťovně, která má u havarijního pojištění 3krát pole s počtem dveří. A na nesmysly se neptejte vůbec.
  2. Fakturační = dodací adresa
    Předpokládejte, že obě adresy budou stejné. Takže nenuťte uživatele vyplňovat obě.
  3. Neptejte se na typ kreditní karty
    Lze to zjistit z prvních 2 čísel. VISA začíná číslem 4
  4. Jméno a příjmení jako jedno políčko
    Na mobilu je standardní, že jméno a příjmení je v jednom políčku. Ušetříte místo a uživatelé jsou na to zvyklí.
  5. Popisy formulářových polí
    Popisy formulářových polí dejte nad samotná pole. U mobilu na výšku jsme omezení šířkou (320 px) a je důležité, aby byl vidět celý obsah vyplněného pole. U mobilu na šířku dejte popisy nalevo od políček. Klávesnice zabere až 80 % obrazovky.
  6. Správná klávesnice
    Pro různý typy polí volte různou klávesnici (bod 14) (číselnou pro telefon, verzi se @ pro e-mail atd.)
  7. Povolte detekci polohy pomocí GPS
    Dejte uživatelům na výběr mezi napsáním polohy nebo detekcí pomocí GPS.
  8. Našeptávač u státu
    Pokud posíláte do celého světa, použijte namísto obřího dropdownu inteligentní našeptávač.
  9. Vypněte opravu psaní
    U názvů ulic a podobných polí vypněte automatickou opravu pravopisu (input type=“text“ autocorrect=“off“).
  10. Respektujte tlačítka ZpětVpřed
    Tlačítka musí být v každém kroku funkční a posouvat uživatele logicky po jednotlivých polích formuláře.
  11. Pochopitelné chybové hlášky
    Výrazně ukažte: kde je problém, a co je to za chybu. Ideálně přímo u políčka s chybou. A vysvětlete to lidštinou, prosím.
  12. Zrychlete nahrávání
    Obsah první obrazovky by se vám měl nahrát do 2 sekund. I na mobilu. Tady je pár tipů, jak stránky zrychlit.

No a pokud se vám do té kontroly nechce, tak to můžete nechat na mně. Protože mě to bude, na rozdíl od vás, bavit :).

Související články

Marcus-taylor

Jak zlepšit proklik tlačítek a call to action

Pexels-ivan-babydov-7789843

Design zaměřený na konverze

Dieter-rams-skicuje1

10 principů dobrého designu

Amazon-buttons

Vizuální hierarchie na webu

Smysluplná debata