23 řešení pro snadnou navigaci v internetovém obchodě

Jsem Maxim Žukov z Kislorodu. Specializujeme se na design a vývoj projektů elektronického obchodování.

Pokračování série článků o elektronickém merchandisingu. Již jsme hovořili o implementaci funkcí vyhledávání a filtrování, správných webových vitrínách a náhledech produktů, které přispívají ke zvýšení konverze internetového obchodu.

Aby vám neunikl další článek v sérii, přihlaste se k odběru telegramového kanálu, ve kterém sdílíme naše zkušenosti s bodovým nárůstem konverzí v klientských projektech, výzkumech, hypotézách a postřezích.

Dnes si povíme o navigaci. Aby se návštěvníci online obchodu mohli rychle orientovat a najít produkty, které potřebují, měla by být na webu implementována pohodlná navigace.

Proč je důležité přemýšlet nad navigací v online obchodě pro UX?

Chcete-li rychle najít produkty, které potřebují, uživatelům nestačí pouze funkce vyhledávání na stránkách:

< li> na mnoha webech vyhledávání nesplňuje očekávání návštěvníků,
• uživatelé ne vždy chápou, jak formulovat dobrý dotaz,
• v některých případech je snazší udělat pár kliknutí než napsat text dotazu.

Systém navigace po webu je druh mapy sestávající z prvků (nabídky, odkazy, tlačítka), díky nimž mohou uživatelé procházet mezi stránkami zdroje a najít požadované produkty nebo informace.

Pokud je vyhledávání potřeba pro uživatele, kteří mohou formulovat jasný vyhledávací dotaz, pak každý potřebuje pohodlný systém navigace po webu, aby pochopil:

• co internetový obchod nabízí,
• aktuální pozice na webu,
• které stránky byly dříve zobrazeny,
• jak v zásadě koupit na webu.

Čím lepší je navigace, tím je pro uživatele snazší najít a koupit produkty, a tím vyšší konverzní poměr. Špatná navigace komplikuje vyhledávání a snižuje konverze.

23 řešení pro snadnou navigaci po stránkách

1. Vytvořte jednoduchou a logickou datovou strukturu

Dobrá organizace dat je základem pohodlné navigace na webu. Vytvořte hierarchii a distribuujte data tak, aby nový návštěvník mohl rychle najít požadovaný produkt.

Pamatujte, že uživatelská logika se může lišit od vaší. Navigace by měla být divákům jasná.

Web v níže uvedeném příkladu nezobrazuje nákupní košík. Uživatelovi není jasné, co se stane po kliknutí na tlačítko „Přidat do košíku“:

Zkuste nepoužívat navigaci na webu prvky, které by mohly uživatele zmást. Například na některých webech není jasné, jak přidat do košíku druhý podobný produkt:

ozon.ru navrhuje dobré řešení:

Pokud na webu stále nejsou zřejmé prvky, přidejte k nim vysvětlení. Jedním z takových prvků je tlačítko Zpět.

Uživateli není jasné, kam se po kliknutí dostane – do katalogu nebo na stránku, ze které přišel (z článku, reklamní jednotky atd.). Chcete-li tuto otázku odstranit, jednoduše změňte název tlačítka na „Zpět do katalogu“.

2. Při vývoji struktury se spolehněte na poptávku po vyhledávání

Při vývoji struktury webu je důležité brát v úvahu poptávku po vyhledávání, aby struktura internetového obchodu nebyla oddělena od reality – je srozumitelná uživatelům i vyhledávačům. Okamžitě po zahájení projektu tedy obdržíte provoz pro nízkofrekvenční požadavky. Jak vytvořit strukturu internetového obchodu na základě poptávky po vyhledávání bylo popsáno v tomto článku.

3. Zvažte škálovatelnost

Přemýšlejte o navigaci s ohledem na budoucnost, aby mohla při vývoji zdroje odolat vzniku nových navigačních prvků webu a zůstat v provozu. Ve fázi návrhu webových stránek je třeba zvážit zvýšení množství dat.

Navrhněte například nabídku tak, aby poskytovala prostor pro několik položek, které se mohou v budoucnu objevit:

4. Implementujte známé prvky na známá místa

Klíčové navigační prvky webu by měly zůstat na všech místech na všech místech stránky.

Například nabídka by měla být vždy na obvyklém místě – v záhlaví nebo pod ní a měla by vyčnívat ze zbytku obsahu.

Uživatelé jsou zvyklí vidět nákupní košík napravo, ne nalevo. Umístění vpravo je neobvyklé, nepředvídatelné a proto nepohodlné:

5. Nenechte se zavěšovat na kliknutí

Známé pravidlo tří kliknutí není vždy relevantní – ne všechny úkoly lze vyřešit tak snadno a rychle. Studie analyzovala více než 8 000 kliknutí. Osmdesát procent úkolů bylo dokončeno po 15 kliknutích. Některá témata navštívila až 25 stránek. Po třech kliknutích se téměř nikdo nevzdal. Studie ukázaly, že uživatelé pravděpodobně neodejdou po třech kliknutích než po dvanácti. Úspěch při plnění úkolů nezávisí na počtu kliknutí.

Spokojenost uživatelů také nesouvisí s počtem kliknutí. Když uživatel najde to, co potřebuje, nikdy si nestěžuje na počet kroků, které musel udělat. Podle vědců vzniká nespokojenost, když nemůžete najít to, co potřebujete. A i když si uživatelé stěžují na počet kliknutí, skutečným problémem je, že nebyli schopni úkol dokončit.

Jsme za zlatou střední cestu – věříme, že byste se neměli nechat zavěsit na tři kliknutí, ale pokud je to možné, musíte minimalizovat jejich počet. Je důležité uživateli co nejsnadněji najít produkt, který vás zajímá, implementací všech nástrojů, které to usnadňují, a dodržovat všechna pravidla použitelnosti v každé fázi cesty uživatele.

6. Vyvarujte se příliš kreativní

Navigační prvky webu by měly být viditelné. Nepřehánějte to však s originalitou – neobvyklé styly prvků nepomáhají uživatelům rychle se orientovat na webu. To vede ke zvýšení míry okamžitého opuštění a ke snížení počtu konverzí.

7. Navrhněte tlačítka správně

Tlačítka by měla být velká a kontrastní, text na nich by měl vyžadovat akci nebo vysvětli to.

Oznámení na vc.ru Zakažte reklamy Marketing 2100 prodejů v internetovém obchodě s nábytkem. Případ „Stolplit“ Jak přejít z propagace obrázků na prodej, uskutečnit více než 2 100 prodejů pouze prostřednictvím online obchodu a přesto …

Pro UX je špatné, když je tlačítko hlavní akce stylováno stejným stylem jako druhé nejdůležitější tlačítko akce.

Vytvořit hierarchie akcí a každá úroveň přiřazuje váš styl. Například jedno znatelné jasné primární tlačítko stylu a jedno nebo dvě tlačítka s méně výraznými akcenty sekundárního stylu. Pro uživatele bude tedy snazší orientovat se v možnostech a prioritách cílených akcí.

Takto vypadají tlačítka pro přidání do košíku, oblíbené položky a srovnání na citilink.ru. Tlačítko požadované akce pro internetový obchod je větší a jasnější.

Zobrazit uživateli různé možnosti zobrazení tlačítek – zapnuto najeďte myší, klikněte. Změna vzhledu tlačítka po kliknutí uživatele upozorní, že k akci došlo:

8. Vyberte srozumitelná slova

Všechna slova použitá v nabídce a dalších prvcích navigace na webu musí být cílovému publiku jasná, snadno čitelná a sdělující informace. Vyhněte se abstraktním pojmům a zdlouhavému jazyku.

9. Neskrývejte navigaci na ploše

Na smartphonu je známé hamburgerové menu. Nepoužívejte jej však v desktopových verzích. Skrytá navigace je pro uživatele méně viditelná a těžší než běžná navigace. Návštěvníci používají skrytou navigaci méně často, a pokud ano, použijí ji později, než kdyby byla viditelná. Skrytí navigace zhoršuje zkušenosti webu a vyhledávání.

Na ploše je lepší implementovat kompletní hlavní nabídku – k tomu je dostatek místa.

Pokud máte vysoce specializovaný internetový obchod, neskládejte kategorie do hamburgeru, pokud se do hlavní nabídky vejde počet hlavních kategorií katalogu.

V hypermarketech je obtížné vyhnout se skládání kategorií do hamburgeru. Přidejte do hamburgeru poznámku „Katalog produktů“ a zviditelněte tento prvek pro uživatele.

10. Zobrazit nejoblíbenější kategorie produktů v hlavní navigaci

Na domovské stránce nepoužívejte pouze jeden hlavní navigační prvek, který se nazývá „katalog“ nebo „produkty“ – uživatelům je užitečné zobrazit oblíbené kategorie produktů. Okamžitě tedy pochopí, co se na webu prodává. To platí zejména tehdy, když návštěvníci klikli na úzký dotaz a nemusí ani hádat, že web obsahuje produkty z jiných kategorií.

Jakmile na ozon.ru, uživatel okamžitě pochopí, že zde si můžete koupit knihy, elektroniku, oblečení a dokonce i lístky.

A ze záhlaví na wildberries.ru není jasné, co obchod prodává. Chcete-li zobrazit kategorie, musíte přejít do nabídky, která je implementována jako hamburger.

11. Použijte mega-menu pro hypermarkety

Pokud máte velký katalog, je lepší použít mega-menu. V tomto případě nabídka usnadňuje uživateli interakci s katalogem a okamžitě zobrazuje celý sortiment ve vhodné formě.

Je důležité implementovat vzhled této nabídky jako modální okno. Toto okno zmizí, pokud bude náhodně posouvána celá stránka.

Je lepší udělat kategorie v mega-nabídce klikatelné. V mega nabídkách některých online obchodů jsou odkazy propojeny pouze na podkategorie zboží. Studie Baymardova institutu zjistila, že uživatelé mají tendenci klikat na kategorie nabídek, i když na položku nelze kliknout. Pokud subjekty nedokázaly kliknout na kategorii a zobrazit mezistránky s podkategoriemi, byly zklamány, protože doufaly, že stránka poskytne více znalostí o podkategoriích a pomůže určit cestu pohybu.

12. Formujte cestu uživatele již z domovské stránky

Vědci z Baymardova institutu tvrdí, že na domovské stránce musí být kategorie – je důležité pomoci uživateli najít produkt nabídkou hotového webu navigační skripty.

Abychom pomohli kupujícímu s výběrem vína, při navrhování rozhraní pro vinařskou společnost Grape jsme implementovali blok „Ready-made offers“. Sbírky jsou vyvíjeny na základě běžných požadavků návštěvníků. Například „Nejlepší vína do 1500 rublů“, „Výběr červených vín na večer“, „Skvělá nabídka pro velkou skupinu přátel.“

V hypermarketech matras.ru a anatomiyasna.ru matrace je na první obrazovce implementován filtr.

Toto je dobré rozhodnutí – v naší studii zkušeností s nákupem matrací online začali uživatelé interakci s webem pomocí filtru. Více informací o tom, jak implementovat uživatelsky přívětivý filtr, se dočtete v tomto článku.

13. Správně implementujte propagační akce na hlavní stránce

Pozornost návštěvníků často upoutají propagační akce, ačkoli přechod na speciální nabídky z hlavního – není to velmi dobrý scénář. Uživatelé si mohou myslet, že přešli do určité kategorie, nenajdou produkty, které potřebují, a myslí si, že na webu nejsou. Aby návštěvníci nemohli opustit váš internetový obchod, můžete použít jedno z následujících řešení:

1. Nasměrujte návštěvníky nikoli na samostatnou vstupní stránku s propagačními produkty, ale na stránku kategorie s aktivním filtrem „Výprodej“, aby mohli filtr odebrat a zobrazit všechny produkty v kategorii.
2. Odeslat pouze kategorie na hlavní stránku a již na jejich stránkách zvýrazňují reklamní předměty.

Stránka bonprix.ru využívá první možnost: kliknutím na banner s novými produkty se uživatel dostane na stránku kategorie „Dámské oděvy“. Má povolené třídění podle „nejnovějších produktů“ a nad vydání je napsáno „nové položky“. To pomůže uživateli pochopit, že nevidí všechny nabídky v kategorii Dámské oblečení.

14. Ne nechte se unést nadměrným rozdělením do kategorií a podkategorií

Někdy se namísto filtrů nabízí uživatelům řada souvisejících kategorií, které lze kombinovat. Studie Baymardova institutu zjistila, že přílišná fragmentace ztěžuje navigaci a hledání produktů. Nadbytek kategorií děsí uživatele a je nemožné hledat produkt ve dvou kategoriích současně. Výsledkem je, že návštěvník nemusí najít požadovaný produkt a opustit web.

15. Implementovat stránku s podkategoriemi pro každou kategorii

Takové stránky pomáhají uživatelům lépe se orientovat v katalogu a vyhledejte požadované produkty rychleji, i když nenahrazujte hlavní navigaci. Seznam podkategorií s popisnými ikonami vám pomůže pochopit rozdíl mezi podkategoriemi a určit směr vašeho hledání.

A tímto způsobem můžete upozornit na produkt nebo obsah, který je pro vás důležité nabídnout – například na propagační akce a doporučení, která jsou relevantní pro tuto podkategorii.

Na takové stránky umisťujte odkazy na podkategorie. To je užitečné jak pro nováčky, tak pro běžné zákazníky:

• Odkazy na podkategorie pomohly novým návštěvníkům rozhodnout, zda hledat produkt v této kategorii – protože některé produkty lze přiřadit k několika kategoriím,
• běžní zákazníci používali odkazy pro rychlý přístup k potřebným produktům,
• při pokusu přejít do požadované podkategorie, uživatelé klikli také na ikonu kategorie – nezapomeňte to vzít v úvahu a provést na ikony lze kliknout.

16. Zobrazit související kategorie pro rychlou opravu oblasti vyhledávání produktů

Zobrazení souvisejících kategorií v seznamu je užitečné zejména pro uživatele, kteří na stránku produktu nepřišli z hlavní stránky, ale z vyhledávání, sociálních sítí, aby rychle pochopili, kde jsou a kam jít dál.

Pokud si uživatel uvědomí, že mu navrhovaný produkt nevyhovuje, může ušetřit několik kliknutí rychlou navigací do sousední kategorie, nikoli začít od začátku. Související kategorie můžete navrhnout podle varianty produktu nebo typu produktu.

Na lamoda.com se související kategorie (boty a oblečení) zobrazují nad kategorií, ve které se uživatel nachází.

Toto pravidlo není vždy vhodné dodržovat, zvláště pokud máte vertikální pohled na blok filtru a horizontální filtr není vhodný vzhledem ke specifikům výklenku. Blok filtrů je vždy prioritou a měl by být na první obrazovce.

17. Zobrazit oblíbené filtry na úrovni kategorií

Průzkum Baymardova institutu ukazuje, že uživatelé často vnímají kategorie jako nevyhnutelné výběr a filtry v postranním panelu jako něco, co je třeba ignorovat.

Chcete-li uživatele pobídnout k požadovanému scénáři, umístěte oblíbené možnosti filtrování do hlavní rozevírací nabídky na stránky přechodných kategorií nad seznam produktů. Chcete-li odlišit filtry od kategorií, nasměrujte je na seznam stránek s použitým filtrem. Další informace o filtrování si můžete přečíst v tomto článku.

18. Ukažte uživatelům, kde jsou, pomocí strouhanky

Abyste uživatelům pomohli pochopit, kde jsou a mohou jít o jednu nebo více úrovní výše, implementujte strouhanku. Toto je řetězec cest z domovské stránky na aktuální stránku. „Strouhanka“ se obvykle nachází v levé horní části stránky. Odkazy by se měly lišit od hlavního obsahu – jsou stylizované jinou barvou a používají menší velikost písma.

Pokud má adresář několik úrovní vnoření, můžete jeho navigaci v adresáři zjednodušit pomocí rozbalovací nabídky podkategorií, která se zobrazí, když umístíte ukazatel myši na odpovídající položku v navigaci. content/uploads/43bb05cc51ff39d87108741161550679.png „/>

19. Pomozte uživateli určit aktuální umístění v adresáři

Velká část provozu nepřechází na domovskou stránku, ale hluboko do adresáře. V takovém případě nemusí mít uživatel dostatek „strouhanky“, aby pochopil, kde se právě nachází, zvláště pokud jsou „strouhanky“ špatně implementovány.

Aby uživatel viděl svou aktuální pozici v adresáři, zviditelnil názvy stránek a vizuálně zvýraznil část nabídky, kde se uživatel nachází.

U produktů, které fungují pouze ve spojení s hlavním produktem, je nejdůležitější charakteristikou kompatibilita. Nabídkou kompatibilních produktů na produktové kartě zjednodušíte navigaci a vyhledávání a dodáte kupujícímu jistotu, že produkt přesně odpovídá. To znamená, že zkrátíte cestu prodejní cestou a zvýšíte pravděpodobnost konverze.

Na stránce citilink.ru na telefonní kartě můžete okamžitě vidět vhodné příslušenství:

21. Zobrazit bloky s prohlíženými produkty

Pokud se uživateli nelíbí produkt, který si právě prohlížel, může se rozhodnout vrátit se k produktu, který byl zobrazen dříve – pomozte mu rychle přejít přímo z karty produktu.

22. Zobrazit podobné produkty na kartě

Pokud se uživatel nehodí na zobrazovaný produkt, může se zajímat o alternativu nabízenou přímo na produktové kartě. A nebude to muset začínat znovu od začátku.

23. Implementovat nabídku zápatí

Zápatí je dalším prvkem navigace na webu, který jej zjednoduší v obchodech s mnoha sekcemi. V zápatí můžete umístit odkazy na důležité sekce, sociální sítě, posly a rozdělit je do sloupců v souladu s logikou.

< h2> Závěr

Dobře navržený navigační systém stránek je účinným nástrojem pro zvýšení konverze internetového obchodu.

O dalších důležitých prvcích elektronického merchandisingu si můžete přečíst v následujících článcích:

1. Hledání internetového obchodu: 24 nezbytných věcí, které zákazníkům pomohou najít ten správný a zvýšit konverzi
2. Ideální produktová karta pro internetový obchod: čipy pro zvýšení konverze
3. 23 chyb při objednávání, které brání návštěvníkům vašeho internetového obchodu nakupovat
4. Výpis a náhledy produktů v internetovém obchodě: 7 klíčových pravidel UX
5. 18 řešení pro filtrování a třídění produktů v internetovém obchodě, které zjednoduší výběr a zvýší konverzi

Chcete-li zkontrolovat, zda jste zohlednili další důležité prvky rozhraní, stáhněte si náš interní kontrolní seznam pro zlepšení použitelnosti internetového obchodu s více než 250 body.

Příště, probereme nuance různých možností autorizace a registrace online obchod. Abyste tento článek nezmeškali, přihlaste se k odběru tohoto blogu nebo našeho telegramového kanálu.

Líbí se (+1), pokud je to užitečné.

#shop