KISLOROD pokračuje v sérii článků o mobilním rozhraní pro internetový obchod. Už jsme hovořili o nuancích implementace vyhledávání a filtrování pro smartphony.
Aby návštěvníci online obchodu mohli rychle navigovat a najít produkty, které potřebují na smartphonu, je důležité vzít v úvahu zvláštnosti mobilní navigace.
Nebudeme dotkněte se obecných zásad popsaných v tomto článku – probereme vše pro mobilní navigaci.
Během testování institutu Baymard Institute uživatelé často ztratili orientaci na webu – nechápali, kde jsou, jak se tam dostali a jak se vrátit na požadovanou stránku. Návrat na mobilní zařízení je skutečně obtížnější než na počítači.
Je důležité, aby navigace a rozhraní byly intuitivní a splňovaly očekávání uživatelů. Proto:
- co nejvíce usnadněte navigaci;
- zajistěte, aby uživatelé rozuměli tomu, kde se v hierarchii webů nacházejí;
- vždy zobrazit ikonu košíku s počtem přidaných položek atd.
Ano! Je toho hodně k zvážení. Níže naleznete podrobnosti, jak to provést.
1. Pamatujte na problém omezeného zobrazení
Hlavní stránka na ploše se vejde na 2 nebo 3 obrazovky, ale hlavní stránka v mobilní verzi může trvat 5–10 obrazovek.
Aby si uživatel mohl udělat představu o rozsahu internetového obchodu, bude muset otevřít nabídku mobilní verze webu a procházet ji, aby viděl kategorie. Chcete-li zobrazit podkategorie, musíte nejprve vybrat kategorii. Zároveň uvidí podstatně méně kategorií než na ploše.
Kvůli omezeným problémům se zobrazením návštěvníkům chybí důležité informace, nemohou najít produkty, které hledají, a opustit web. Pouze kvůli obtížím s navigací 63% subjektů odmítlo studovat obsah na mobilních zařízeních.
2. Nejdůležitější obsah
Toto je jeden z nejdůležitějších principů mobilní použitelnosti. Současně je vzhledem k velikosti obrazovky velmi obtížné implementovat plnohodnotný přehled o obsahu, zejména pokud je v internetovém obchodě mnoho kategorií. Při prvním seznámení s webem v mobilním zařízení uživatel v každém případě obdrží méně informací než z počítače.
Nekomplikujte mobilní rozhraní funkčností, množstvím odkazů a interaktivním obsahem. Testování ukázalo, že nejjednodušší rozhraní jsou mnohem uživatelsky přívětivější a uživatelé je lépe vnímají. Podle průzkumu 63% uživatelů opouští web kvůli složitému rozhraní.
3. Upozorněte na skrytou navigaci
Nabídka hamburgerů v mobilní verzi je známým řešením, které nezabere mnoho místa. Chcete-li na něj více upozornit, můžete vedle něj umístit text. Například na webu dsklad.ru:
Záhlaví také obsahuje funkci „Přidat k oblíbeným“, “ Porovnat „, nákupní košík, osobní účet a logo webu. Kliknutím na logo na jiných stránkách by měl být uživatel přesměrován na hlavní stránku mobilní verze.
Je také možné posunout navigační lištu dolů – to usnadní téměř polovinu návštěvníků, kteří palcem klikají na ikony nabídky. Optimální je, pokud jich není více než 5. Toto řešení se nazývá panel karet a používá se častěji v mobilních aplikacích než v adaptivních.
Aby bylo možné nabídnout navigačnímu menu funkce, které jsou pro uživatele důležité, a zvolit správné umístění určitých navigačních prvků, spoléhejte se na analytiku a monitorování chování návštěvníků webu pomocí clickmap a Yandex.Webvisor.
Například na webu oboi-3d.ru je díky teplotní mapě jasné, že uživatelé aktivně používají „hamburger“. Současně nikdo nepoužívá křížek k uzavření nabídky, což znamená, že to není potřeba.
4. Pomozte určit rozsah webu na hlavní stránce
Již jsme psali, že na počítačích se uživatelé snaží vyhodnotit rozsah webu podle obsahu hlavní stránky. V mobilní verzi to dělají ještě častěji. Pokud na ploše posouvá hlavní stránku nejprve pouze 25% uživatelů, pak na mobilních zařízeních to provede 70%.
Stává se to ze dvou důvodů. Zaprvé kvůli kontrole omezené malou velikostí obrazovky. Zadruhé, kvůli skryté navigaci.
Aby uživatel pochopil sortiment, je důležité zobrazit hlavní kategorie přímo na hlavní stránce mobilní verze. Zároveň na jiných stránkách mohou být skryty v hamburgeru.
Ve studii Baymard Institute, když na stránce byl malý nebo žádný obsah, uživatelé ve 42% případů dostali mylnou představu o velikosti adresáře.
Proto v mobilní verzi zobrazte na hlavní stránce 30-40% hlavních kategorií. Názvy kategorií by měly být jasné a se zřejmým významem pro uživatele. A samotné kategorie – zobrazují nejrůznější sortimenty a jsou vizuálně zvýrazněny ikonami, které odpovídají konkrétní kategorii produktů.
5. Umožněte vyhledávání podle témat
Někteří uživatelé mají náladu na „tematické nakupování“ – například hledají zimní bundu, hru pro společnost nebo dárky na 8. března. Je důležité zajistit vhodnou navigaci. V zásadě se touha hledat produkty podle tématu projevuje stejně na počítači i na mobilních zařízeních. Vědci z Baymardova institutu však zjistili, že zachování dobré aktuální navigace v mobilních zařízeních je důležitější, protože uživatelská zkušenost je již omezena velikostí obrazovky.
Tato prezentace produktů nemusí vypadat jako tradiční zobrazení kategorie. Můžete zveřejňovat průvodce a články v blogu s odkazy na konkrétní produkty, implementovat tematické vyhledávání. Výzkum ukázal, že formát pro poskytování aktuální navigace je sekundární – hlavní věc je, že uživatelé mohou snadno najít aktuální obsah.
6. Zvažte implementaci strouhanky
Struktury, které uživatelům pomohou porozumět kde jsou umístěny – na mobilních zařízeních je to obzvláště důležité, protože hlavní navigace je často skrytá. Implementace strouhanky v mobilních zařízeních je mnohem složitější než implementace v počítači.
Vědci ze skupiny Nielsen Norman Group se domnívají, že stojí za to použít jediný odkaz vedoucí do hlavní kategorie, aby návštěvník mohl přejít na přehled celé řady produktů v této kategorii.
Vědci z Baymardova institutu navrhují implementaci řetězce strouhanky jako rolovacího prvku. To umožňuje uživatelům porozumět navrhovanému řešení a zobrazit úplnou cestu k aktuální pozici na webu.
Doporučujeme vycházet ze specifik projektu, posoudit, co je pro cílové publikum důležitější, a samozřejmě testování. Jedinou nepřijatelnou možností není vůbec používat strouhanku.
Lze jednoznačně tvrdit, že:
- na obrazovce mobilních zařízení je málo místa, takže potřebujete používat strouhanku, aby nezabrala více než jeden řádek;
- drobečkové navigace na mobilních zařízeních je nepohodlné klikat, takže by měly být dostatečně velké, lišit se stylem a neměly by být příliš blízko sebe a dalších prvků – například jiných navigačních prvků;
- důležité aby uživatelé pochopili, že mají před sebou strouhanku, je třeba je podtrhnout a znát „& gt;“ nebo „/“ mezi úrovněmi hierarchie.
7. Poskytujte snadnou navigaci ve víceúrovňové nabídce
Vrstvená navigace v nabídce pomáhá uživatelům přistupovat ke kategoriím nižší úrovně v hierarchii webů. Je důležité jej implementovat tak, aby poskytoval snadný přístup k částem webu – s několika klepnutími, malým posouváním a bez načítání stránky, pokud je to možné.
Několik možností pro organizaci více -úrovňová nabídka:
1. Akordeony
Akordeon by neměl obsahovat mnoho prvků podkategorie (až šest), aby nezabíral místo na obrazovce. Jednou ze zvláštností akordeonů je to, že když kliknete na odpovídající ikonu, seznam se rozbalí a zobrazí se vložený obsah. Proto, aby se zabránilo uživateli ve stisknutí tlačítka Zpět při pokusu o návrat do původního stavu, je důležité pamatovat na přidání funkce pro sbalení seznamu.
Nedělejte harmoniky odstupňované a použijte ikona šipky dolů (nejen část názvu nebo znak „+“), aby uživatelé očekávali, že se obsah otevře na stejné stránce místo přechodu na novou.
2) Sekvenční nabídka
V sekvenčním menu pro mobilní verzi webu se nejprve zobrazí hlavní kategorie a po výběru jedné z nich zmizí seznam kategorií a zobrazí se pouze jeho podkategorie. Chcete-li se vrátit do kategorií, musíte stisknout tlačítko „Zpět“.
Toto je oblíbené řešení – opravuje problém se zobrazováním velkého počtu kategorií a podkategorií na malé obrazovce. Bohužel existují určité nevýhody sekvenčních nabídek. Testy ukázaly, že subjekty udělali chybu pomocí tlačítka Zpět na svém telefonu nebo prohlížeči, omylem zavřeli nabídku a místo návratu do nabídky přejeli na jinou stránku.
3) Nabídka sousedních sekcí
Jedná se o další nabídky, které se přidávají na stránky za účelem rychlého přesunu do sousedních sekcí, přičemž se obejde vyhledávání v hlavní nabídce.
< p> Ve verzi pro počítače se obvykle nacházejí v postranním panelu:
Na mobilním nebo responzivním webu jsou umístěni nad obsahem.
Někdy si uživatelé pletou nabídku sekce s hlavní nabídkou, takže je důležité zajistit, aby se vizuálně lišily.
Doporučení skupiny Nielsen Norman pro výběr možnosti vrstvené nabídky:
- pokud existuje méně než 6 podkategorií, vyberte akordeon nebo sekvenční nabídku;
-
Pokud jsou podkategorie od 6 do 15, zvažte nabídku sekce.
My v KISLOROD obvykle začínáme strukturou:
-
pokud existuje jedna nebo dvě úrovně vnoření, je lepší implementovat navigaci ve formě akordeonu;
-
pokud existují tři nebo čtyři úrovně vnoření, kombinovaná navigace.
Proč považujeme sekvenční nabídky za špatné řešení:
- Když existuje mnoho úrovní (3-5) v nabídce musí uživatel několikrát stisknout tlačítko Zpět, aby se vrátil do hlavní nabídky. To je obzvlášť nepříjemné pro nové návštěvníky.
- Pozice uživatele se často nezobrazuje. Pokud uživatel otevře nabídku v sekundární sekci, zobrazí se mu první úroveň, nikoli ta, kde se nachází. I když nabídka zobrazuje polohu uživatele, je stále obtížné se vrátit do hlavních sekcí.
- Není vždy možné přejít do celé sekce a zobrazit produkty celé sekce , nikoli podsekce.
- Nemůžete se dívat skrz sekce, aniž byste přešli na další úroveň. Pokud uživatel neví, ve které položce nabídky se požadovaná sekce nachází, musí do každé z nich strčit, aby zjistil, z jakých položek se skládá.
8. Použijte slider wisely
Na ploše je slider dobrým řešením, i když jeho implementace má nuance, o kterých jsme psali dříve. Na mobilních zařízeních také není vše jasné.
Výhody:
- na posuvník je umístěno značné množství obsahu, zatímco posuvník nezabírá příliš mnoho obrazovky mezerník;
- můžete současně zveřejňovat různý obsah.
Nevýhody zahrnují:
- někteří uživatelé ignorují posuvník kvůli slepotě bannerů;
- potřeba zobrazit všechny snímky, aby se zobrazil veškerý obsah; < br />
- Problémy při správné implementaci ovládacích prvků posuvníku.
Několik řešení pro implementaci posuvníku na mobilních zařízeních skupiny Nielsen Norman Group:
-
nepoužívejte na snímku více než 3–4 prvky (například text, obrázek, tlačítko, logo);
-
nejdříve zobrazte důležitější snímky;
- aby lidé pochopili, že je před nimi posuvník, použijte kontrastní šipky na snímky nebo tečky pod jezdcem;
- podpora přejetím prstem pro procházení jezdcem;
- duplikování obsahu z jezdce na jiných místech, protože uživatelé mohou jezdce ignorovat .
Baymard Institute doporučuje nepoužívat posuvník automatického převrácení – některé otravují pohybující se prvky, jiné prostě nemají čas číst a další končí na nesprávných stránkách.
9. Použijte křížové navigace
Křížová nebo křížová navigace je, když uživatel prochází související položky. Výzkum Baymardova institutu ukázal, že testované subjekty dokážou na mobilních zařízeních nabízet doplňkové, kompatibilní nebo alternativní produkty. Vnímají je lépe než na ploše. Je to s největší pravděpodobností způsobeno skutečností, že na mobilních zařízeních jsou potíže s navigací a vyhledáváním produktů.
Proto nezapomeňte vyzvat uživatele k doplnění sady nebo zvážit alternativy, čímž zvýšíte průměrný účet. Uživatelé se potýkají se zvláštními obtížemi, pokud potřebují najít produkt, který je kompatibilní s existujícím, takže zobrazení seznamu kompatibilních produktů na kartě nebo v košíku výrazně zjednodušuje život uživatele a ve výsledku má pozitivní vliv na průměrnou kontrolu částka.
10. Minimalizujte dopad náhodných klepnutí
Uživatelé mobilních telefonů musí neustále komunikovat svými prsty s webovým rozhraním:
- následovat odkaz,
- otočit stránku,
-
zvýraznit text.
Z tohoto důvodu se objevují náhodné pásky, které otravují uživatele – zejména pokud opustili požadovanou stránku kvůli chybnému kliknutí. Tlačítko „Zpět“ bohužel ne vždy vede návštěvníky na správné místo. To samozřejmě zvyšuje pravděpodobnost, že uživatelé web opustí.
V minulém článku jsme navrhli přizpůsobit velikost prvků anatomickým rysům prstů – aby byly dostatečně velké. A implementovat větší vzdálenost mezi interaktivními prvky ve srovnání s desktopem.
Existují další možnosti:
- nabídnout uživatelům potvrzení akce – ale pouze tam, kde je to skutečně nutné (například přidání nebo odebrání produktu);
- implementovat funkci zrušení náhodného klepnutí.
11. Duplicitní navigace v zápatí
O důležitosti správné implementace zápatí a o tom, jaké prvky by tam měly být přítomny, jsme již psali – zde. Připomínáme: 70% uživatelů věnuje pozornost obsahu v zápatí při první návštěvě webu. V mobilních zařízeních je třeba zápatí brát ještě vážněji. Správná implementace navigace pomůže uživatelům rychle získat přístup k požadovanému obsahu.
Je také důležité implementovat tlačítko zpět nahoru, zejména pokud je dlouhé (více než 4 obrazovky). Umístěte tlačítko vpravo dole – tam, kde jsou uživatelé zvyklí to vidět. A ujasněte si, že se jedná o návratové tlačítko. Text Zpět nahoru funguje lépe než šipka nahoru. Ale ujistěte se, že prvek nepřekrývá ostatní navigační prvky.
Závěr
Chytrá implementace navigace v mobilní verzi přímo ovlivňuje převod, protože usnadňuje nakupování uživatele. Proto se neomezujte pouze na čtení článků – implementujte naše doporučení.
V blízké budoucnosti na vás čekají články o mobilních rozhraních, ve kterých se dotkneme funkcí výpisu, produktových karet, pokladny a košíku, takže se přihlaste k odběru tohoto blogu nebo našeho telegramového kanálu nenechte si ujít obsah.
Máte-li jakékoli dotazy, neváhejte se zeptat v komentářích. Nezapomeňte lajknout (+1), pokud se vám materiál líbil.
