ILINČEV 
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
- 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. - 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. - Mobilní verze všude
Uživatelé jsou dost zmatení, pokud se z mobilní verze stránky dostanou na nemobilní stránku webu. - Zachovejte zvyklosti
Pokud jsou uživatelé zvyklí, že u ceny máte na desktopu související produkty, ukažte jim je i na mobilu. - 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. - Text tlačítek by měl být pochopitelný
Tlačítko je slib. Nepopisujte akci (Pokračovat), ale hodnotu (Vybrat dopravu)
Čitelnost a klikatelnost
- 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. - 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í. - 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ů. - 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
- 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. - 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. - 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). - 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
- 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. - 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.). - 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
- 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í. - 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ů
Navigace
- 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. - 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ě. - 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). - 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 okna a dveře.
Vyhledávání
- 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. - 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 :). - 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ů
- 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á. - 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. - 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. - 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). - 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. - 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í. - 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. - 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í
- Dejte možnost filtrovat i pro výsledky vyhledávání
Protože jinak nutíte uživatele skrolovat až do konce seznamu. - Kam dát filtry a řazení
Nahoru nad seznam produktů. Téměř všichni uživatelé si obě funkce pletou. - 3 druhy řazení
Nabízejte řazení podle: nejprodávanější, ceny a hodnocení uživatelů. - 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. - Ukažte počet výsledků
U výsledků vyhledávání, filtrování nebo podkategorií ukažte počet vyhovujících produktů. - Skladem jako filtr
Dejte možnost filtrovat podle dostupnosti zboží – skladem. - 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
- 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. - 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
- 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. - Ukažte drobečkovou navigaci
Pomáhá s orientací, kde uživatel je.
- 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. - 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. - Swipe a zoom
Dovolte uživatelům swipovat galerií fotek a zoomovat dvěma prsty. - 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
- 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. - 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. - 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. - Více kusů
U více kusů stejného zboží ukazujte jak cenu za kus, tak celkovou cenu. - Doprava
U dopravy ukazujte cenu i termín dodání. - Osobní odběr
Osobní odběr / odběr na prodejně dejte k informacím o dopravě. A přidejte odkaz na mapu. - 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 %. - 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. - 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. - Progress bar
Ukažte uživateli, kolik je kroků objednávky a jak je daleko.
Zadávání informací
- 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. - Fakturační = dodací adresa
Předpokládejte, že obě adresy budou stejné. Takže nenuťte uživatele vyplňovat obě. - Neptejte se na typ kreditní karty
Lze to zjistit z prvních 2 čísel. VISA začíná číslem 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í. - 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. - 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.) - Povolte detekci polohy pomocí GPS
Dejte uživatelům na výběr mezi napsáním polohy nebo detekcí pomocí GPS. - 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č. - Vypněte opravu psaní
U názvů ulic a podobných polí vypněte automatickou opravu pravopisu (input type=“text“ autocorrect=“off“). - Respektujte tlačítka Zpět a Vpř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. - 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. - 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 :).
Smysluplná debata