V ideálním světě by každý zákazník začal na domovské stránce e-shopu a prošel by vždy stejnou plánovanou cestou ke konverzi. Jenže realita je trochu jiná: uživatelé z internetu přichází v podstatě kamkoli, nejen na domovskou stránku. Kdybychom se podívali na rozdělení celkové návštěvnosti, domovská stránka tvoří jen 30 % ze všech návštěv, zbylých 70 % se rozprostře mezi kategorie, produkty, kontakty a jiná místa. Právě proto hrají efektivně navržená navigace a navigační prvky tak důležitou roli v cestě uživatele za kýženým cílem.

Abyste si mohli mnout ruce nad spokojeným zákazníkem, při navrhování jednotlivých prvků navigace je potřeba myslet na čtyři základní aspekty: musí být dobře viditelné, musí umět zřetelně komunikovat aktuální pozici zákazníka na webu, dokázat nasměrovat uživatele na správné místo a především být snadno ovladatelné.

Prvky, které se postarají o spokojenost

Bez navigačního menu jako by webová stránka ani neexistovala. Z dostupných dat víme, že zákazníci si většinou navigaci představují coby horizontální nabídku v horní části stránky, a tak to také nejlépe funguje – pokud toto hlavní menu obsahuje rozbalovací položky, vyplatí se využít tzv. hover funkce neboli automatického rozbalování položek bez potřeby klikání myší. Pozor přitom na diagonální přechody, kdy uživatel může nechtěně rozbalit položku vedle.

Druhým základním prvkem je plovoucí hlavička, která se postará o rychlý přístup k prvkům navigace. Díky tomu, že je neustále k vidění v horní části obrazovky i při scrollování, není nutné se k hlavnímu panelu složitě vracet. Její použití zvyšuje pravděpodobnost, že si uživatel prohlédne obsahu co nejvíce. Nám se v praxi nejlépe osvědčila takzvaná částečně plovoucí hlavička, která je zprvu vidět v horní části stránky, při scrollování dolů zmizí a objeví se zase až ve chvíli, kdy se uživatel začne posouvat nahoru. Dopřeje tak více místa samotnému obsahu, což se hodí zejména v mobilní verzi.

Logo pak plní funkci hlavního výchozího bodu, který přesměruje návštěvníka na domovskou stránku. Z pozorování chování uživatelů víme, že je vděčným záchytným bodem pro všechny dezorientované. Většině webdesignérů se může zdát zřejmé, že se na toto logo dá kliknout, a necítí přitom potřebu doplnit navigaci o textový odkaz na domovskou stránku. Ten je však klíčový pro publikum, které je technologicky méně zdatné a o možnosti dostat se kliknutím na domovskou stránku neví – proto může doplňková položka „domů“ znamenat zásadní rozdíl v zákaznické zkušenosti.

Panel, patička a drobečky

Boční panel je důležitým doplňkem již zmiňované horní navigace. Rozhraní, které většinou zobrazuje podkategorie, je perfektním pomocníkem třeba pro e-shopy s větším množstvím informací a mimo jiné poskytuje ideální prostor pro filtr produktů. Při sledování chování lidí byste zřejmě zpozorovali, že často používají tlačítko „zpět“ přímo v prohlížeči, aby se posunuli zpátky do nadřazené kategorie. A právě boční panel s vlastním tlačítkem „zpět“ může být vítaným zpestřením uživatelského zážitku.

Přehlíženým prostorem při navrhování stránky často bývá její patička neboli její spodní část. Data ale jasně ukazují, že ji lidé skutečně používají. Buď se k ní dostanou po přečtení obsahu, který je zaujal, nebo v ní hledají informace, které nemohou nikde jinde nalézt. Proto je důležité využít jejího potenciálu a umístit zde skutečně relevantní informace – třeba ty o kariéře, obsah pro partnery, podklady pro média a jiné.

Dobrou zákaznickou zkušenost umí podpořit také drobečková navigace, která představuje hierarchicky seřazené navigační odkazy, většinou přímo pod hlavní navigací. Napovídá, kde na e-shopu se zákazník nachází, a popisuje umístění dané stránky v rámci celé hierarchie. Uživateli přitom umožňuje se jediným kliknutím rychle dostat do nadřazené kategorie, což využijí především ti, kteří na stránku přišli například odjinud z internetu nebo použili vyhledávání. Ještě lepší zážitek pak nabídne rozbalování ostatních kategorií na stejné úrovni. Tato funkce napomáhá uživateli objevit další obsah.

Dobrá tlačítka umí divy

Důležitým navigačním nástrojem jsou také tlačítka a odkazy, jejichž design by měl být konzistentní na všech stránkách daného e-shopu. V případě potřeby je můžete odlišit například barevně nebo viditelným orámováním, například ve chvíli, kdy se objeví vedle sebe dvě tlačítka pro různé akce.

Barva má mimochodem obrovský dopad při rozhodování, na uživatele totiž funguje podvědomě stejně jako v běžném životě (podobně jako na semaforu, zelená – ano, červená – ne). A ve spojení se správným názvem je to přímo ideální nástroj k prodeji. Ukázkovou mentální paralýzu umí způsobit kombinace tlačítek „zrušit“ a „zavřít“, zatímco červené tlačítko „zahodit všechny změny“ nebo zelené „pokračovat“ je zárukou úspěchu.

A ještě jedna rada na závěr: vždy je dobré podtrhávat hypertextové odkazy. Nakonec, uživatelé jsou na tento formát navyklí již přes 20 let. Špičkový uživatelský zážitek není věda, ale narušit ho mohou právě i zdánlivé maličkosti. Pokud chcete, aby uživatelé vždy našli to, co skutečně potřebují, použitelnost a srozumitelnost navigačních prvků za vás udělají tu nejlepší práci. A konverze jen posviští.

Lukáš Andel Autor článku je UX & product designer v Luigi’s Box.