Navigace v aplikacích mcommerce: šablony a úskalí

My v Heads and Hands jsme spolupracovali s 10 z 50 nejlepších společností elektronického obchodu v Rusku, takže víme, jak rozmotat i tu nejtemnější navigaci a vytvořit perfektní zážitek pro mobilní uživatele. V článku vám prozradíme, jaké navigační šablony používáme a k jakým úkolům.

Jdete do aplikace a nemůžete nic najít. Katalog je skryt v postranním panelu a abyste se dostali do požadované kategorie, budete muset navštívit 5 obrazovek. Jak často budete takovou aplikaci používat?

Norman Nielsen Group tvrdí, že uživatelé mobilních zařízení pravděpodobněji navigují a uživatelé počítačů vyhledávají. Navigace v aplikaci je důležitá z následujících důvodů:

• uživatelé nejsou vždy schopni vytvořit dobrý dotaz;
• nevědí přesně, co hledat; < /li>
• vytvoření a zadání dotazu vyžaduje více úsilí než kliknutí na navigační prvek.

Snadnější navigace v aplikaci je obtížnější než na webu: vzhledem k menší velikosti obrazovky by měl být kompaktnější, aby neodváděl pozornost od hlavního obsahu.

Nemusíte však od začátku vymýšlet, jak uživatelům navigaci srozumitelně vysvětlit. Návrháři specializující se na mobilní rozhraní používají navigační vzory. Jsou předvídatelné, což znamená maximální použitelnost.

Pojďme analyzovat, jaké úkoly jednotlivé navigační šablony v aplikacích mcommerce řeší pomocí příkladů své práce, a nejen.

Psali jsme také o dalších prvcích v aplikacích mcommerce – produktová karta, pokladna a funkce, které se budou lišit od konkurence.

V tomto článku uvádíme dva názvy prvků rozhraní: první podle pokynů pro rozhraní Interface ( iOS). část aplikace.

Kdy použít:

• Když můžete zvýraznit 3 až 5 sekcí navigace na nejvyšší úrovni, které jsou pro produkt stejně důležité.
• Lišta s kartami v systému iOS je hlavní doporučený způsob navigace na nejvyšší úrovni.

Pros:

• Sděluje uživateli, kterou sekci je v.
• Navigační prvky jsou dostupné z jakékoli sekce a jsou vždy viditelné.
• Tuto navigaci lze snadno ovládat jednou rukou.

Nevýhody:

• Možnosti navigace jsou omezené, protože na panel karet lze libovolně umístit až pět sekcí.

• Na chytrých telefonech Android může navigaci rušit vestavěný spodní ovládací panel .

Jak používat:

• V systému iOS může panel karet obsahovat libovolné číslo karet, ale jejich viditelnost závisí na velikosti a orientaci zařízení. Pokud se karty nevejdou, poslední viditelná se změní na sekci „Další“, která obsahuje zbývající karty jako seznam na samostatné obrazovce.
• Poslední ikonu lze použít pro další parametry navigace : uživatelský profil, věrnostní program, nastavení aplikace.
• Pokyny pro Android nedoporučují používat spodní navigační lištu pro rychlé nastavení a jednotlivé úkoly, například prohlížení jednoho e -mailu.
• iOS doporučuje používat panel karet výhradně pro navigaci a nezobrazovat akce.
• Uživatelé jsou zvyklí na určité pořadí tlačítek na panelu karet. První prvek vede na domovskou obrazovku a jejich následné pořadí by mělo odrážet logiku používání.
• Karta, na které se uživatel nachází, by měla být aktivní a vizuálně zvýrazněná.
• Ikony by měly jasně označovat účel karty. Zkontrolujte čitelnost ikon pomocí pravidla pěti sekund: pokud porozumění významu ikony vyžaduje více, je neúčinné.
• Můžete použít popisky ikon.

Boční panel a navigační panel

Taková navigace se nachází v levém horním rohu a je tradičně skrytá za ikonou hamburgeru, ale může být indikována jakoukoli jinou ikonou a dokonce i slovem „Menu“. Další verze je, když není vůbec žádná ikona a nabídka se rozbalí vodorovným přejetím.

< span class = "ui_preloader__dot">

Kdy použít:

• Když potřebujete skrýt velké množství dalších sekcí nabídky, které se používají jen zřídka.

Pros:

• Umožňuje umístit velké množství navigačních prvků.

• Umožňuje uvolnit místo na domovské obrazovce, aby se uživatel mohl plně soustředit na obsah.

Nevýhody:

• Skrytá navigace poskytuje horší uživatelský zážitek než viditelný – uživatelé utrácejí více čas hledání sekcí.

• Na vstupní stránku jsou potřeba alespoň dvě klepnutí.

• Uživatel nevidí, ve které sekci se nachází.

• Je navigační standard pouze pro chytré telefony Android.

Jak použít:

• Analytici ze skupiny Norman Nielsen Group nedoporučují používat postranní nabídku, ale rozmotat navigaci, zvýraznit položky hlavní nabídky a zviditelnit je.

• Boční nabídka je přijatelná, pokud je hlavní obsah na hlavní obrazovce a v hamburgeru můžete skrýt sekce, které se používají jen zřídka, například nastavení aplikace a volání podpory.

Navigační panel a horní panel aplikací

Na horní liště aplikace je ikona hamburgeru, ale mohou existovat i další navigační prvky, které na liště karet nemají místo .

Kdy použít:

• Pokud jsou na místě 1-2 navigační prvky, které chcete mít stále na očích, ale nevejdou se na panel karet .

Pros:

• Navigační prvek je viditelný.

Proti:

• Nelze dosáhnout palcem.

Jak používat:

• Pro další navigaci. Například zkombinujte s panelem karet na celou obrazovku.

• Pamatujte, že název je v systému iOS uprostřed a vlevo v systému Android.

Navigace na celou obrazovku

Tento vzor předpokládá, že místo na obrazovce je vyhrazeno pro navigaci . Používá se na domovské obrazovce i na interních stránkách.

Kdy použít:

• Šablona funguje když uživatel použije jeden směr navigace na relaci: přejde ze stránky s přehledem do konkrétní sekce.

Pros:

• Navigace na celou obrazovku je nejjednodušší a nejkonzistentnější.

• Lze zobrazit velké množství sekcí.

Nevýhody:

• Kromě navigace je nežádoucí zobrazovat další obsah, protože uživatelé mohou být zmateni.

< img src = "/wp -content/uploads/f507dcbd3970cb4b42b4d19609a91116.png"/>

Gesta

Již jsme zmínili jeden způsob používání navigace gesty – když se boční nabídka otevře vodorovným přejetím. Existují ale i další.

Kdy použít:

• Několik sekcí a kategorií produktů.
• Chcete na svůj obsah upozornit. < /li>

Pros:

• Gesta vám umožňují vytvářet minimalistická rozhraní a ponechat větší prostor na obrazovce obsahu.

Nevýhody:

• Navigace je neviditelná, takže je pro uživatele obtížnější ji najít.

• Ne všichni uživatelé jsou s gesty obeznámeni.

• Pokud navigace používá více gest, budete si je muset pamatovat, což použití komplikuje.
• V systému Android může přejetím vodorovně doleva omylem zasáhnout systém postranní panel.

Jak používat:

• Při prvním použití použijte vizuální podněty, jako je zobrazení části další obrazovky, obsahu nebo výukového programu.

Záložky

Zobrazení navigace, které se nachází přímo pod navbarem. Lze použít jako další navigaci na domovské obrazovce a v katalogu.

Kdy použít:

• Chcete-li maximalizovat hlavní kategorie viditelné.
• Když se můžete dostat pryč s malým počtem kategorií na hlavní obrazovce.

Pros:

• Karty lze použít k posouvání, což vám umožňuje umístit velké množství kategorií.
• Snižuje počet klepnutí v navigaci.

Nevýhody:

• Je obtížné dosáhnout při používání smartphonu s jedním ruka.

• V systému Android můžete použít maximálně 4 pevné karty.
• Pokud používáte rolování, část navigace je skrytá. Uživatelé nemusí dosáhnout posledních kategorií.

Tlačítko plovoucí akce (FAB)

Tlačítko plovoucí akce nebo tlačítko fab vypadá jako kulatá ikona, která se vznáší nad rozhraním. Více známé uživatelům Androidu. Tlačítko Fab skrývá nejčastější akci, kterou uživatelé provádějí. V mcommerce se prakticky nenachází.

Kdy použít:

• Tlačítko Fab podle společnosti Google motivuje lidi k provádění cílených akcí. Tato navigace předpokládá klíčovou funkci, která bude používána stále.

Pros:

• Zabírá málo místa na obrazovce.

• Výzkum Steva Jonese ukázal, že fab- tlačítko je nepohodlné při první interakci s ním. Po úspěšném dokončení úkolu se však používá častěji než jiné prvky rozhraní.
• Dobrý způsob, jak nasměrovat na cílovou akci.

Proti:

• Může odvádět pozornost od hlavního obsahu.

• Může bránit obsahu.

• Tlačítko fab nepoužívá text, takže význam ikony může být matoucí.
• Komponenta není specifická pro iOS.

Tipy pro používání :

• Na každé obrazovce použijte pouze jedno tlačítko fab, pouze na obrazovkách, kde chcete provést hlavní cílovou akci.

• Po stisknutí můžete seznam rozbalit na tlačítko fab.

< h2> Dílčí navigace

Subnav vám umožňuje navigaci do kategorií nižších úrovní. Hlavní potíž s aplikacemi je malá velikost obrazovky, což ztěžuje umístění mnoha podkategorií.

Podívejme se, které šablony sub-navigace vám umožňují rychle se dostat k požadovaným produktům.

Accordion

Toto je název organizace adresáře s rozbalovací nabídkou: když se podsekce rozbalí směrem dolů. Funguje to, když je v sekci několik odstavců – obvykle méně než 6. Jinak zabírá příliš mnoho místa – uživatel bude muset stránku dlouho posouvat.

Pros:

• Pro přístup do podkategorií uživatel provede minimum akcí a nečeká na načtení obrazovky.

Nevýhody:

• Pokud je v hlavní kategorii mnoho sekcí, zabírají celou obrazovku a posouvání dolů bude nepohodlné.

Aspekty použití:

• Kategorie a podkategorie by měly mít odlišný styl, aby je uživatelé mohli rozlišovat .
• Šipku nahoru a dolů lze použít k tomu, abyste uživatelům pomohli přesně pochopit, jak prvek funguje.

Sekvenční

K postupnému přechodu z sekcí nejvyšší úrovně do následujících dochází na nové stránce a s návratem přes šipku zpět.

Pros:

< ul>

Umožňuje umístit velké množství podsekcí.

Kliknutím na tlačítko Zpět přejdete do nadřazené kategorie, místo abyste opustili nabídku jako harmoniky.

Nevýhody:

• Trvá déle, než se uživatel dostane do požadované kategorie produktů.

• Musíte počkat, než se obrazovka načte.

Funkce použití:

• Vhodné pro mírně vnořené nabídky.
• Šipku doprava můžete použít pro položky nabídky, aby uživatel věděl, kam dál.

Výstup

Uvedli jsme navigační šablony specifické pouze pro mcommerce. Ve skutečnosti je jich mnohem více. U každé navigace je ale hlavní věcí dodržovat několik pravidel:

• Navigace by měla být viditelná – hlavní věc neskrývejte.

• Můžete se dostat hlavní sekce palcem jedné ruky.

• Čím méně klepnutí uživatel provede na požadovanou sekci, tím lépe.

Co je hlavní pro vás v navigaci?

#ui #ux # rozhraní