Premiér Andrej Babiš (ANO) vystoupí v neděli 18. listopadu od 21.25 v živě vysílaném rozhovoru televize Nova. Půlhodinový pořad Vládní krize tentokrát nahradí Střepiny a bude ho moderovat Rey Koranteng. Interview se má zaměřit na dění, jež způsobila kauza Seznamu Babišův syn promluvil.

Mobilní web pro byznys: jeden z největších problémů je navigace

Mobilní a responzivní web mají stále větší vliv na byznys. Nejen že roste návštěvnost, jak jste se mohli dočíst v předchozím článku, ale také stále víc objednávek a konverzí probíhá právě na mobilu. Proto je až s podivem, nakolik je rozšířený problém, že na mobilních webech je kolikrát obtížné dohledat správné informace, natož nakoupit. Dnes si ukážeme, že právě navigace na mobilním webu je jedním z nejpalčivějších problémů, který vás stojí peníze.

Jan Kvasnička

Jan Kvasnička

Jan Kvasnička, specialista na optimalizaci konverzního poměru (CRO) a uživatelskou zkušenost (UX), který se věnuje převážně e-shopům a optimalizaci jejich stránek, a spoluautor online kurzu Strategický webdesign, v novém seriálu nazvaném Mobilní web pro byznys pro Retailek popisuje, jak mobilní firemní web ovlivňuje podnikání. Nové díly seriálu budou vycházet vždy v úterý.

Nepřehledná prezentace navigace

Ač by se to mohlo zdát banální, na mnoha webech i e-shopech je často problém vůbec poznat, který prvek skrývá menu. Spousta tvůrců webů si myslí, že stačí, když je menu označeno jako onen oblíbený “hamburger”, tedy tři čárky nad sebou. To, co může být jasné vám, není dostatečné pro každou cílovou skupinu. Stále existuje hodně návštěvníků webů na mobilu, kteří neví, který prvek obsahuje naše menu, ani že to jsou právě ony tři čárky nad sebou. Ideální zkrátka je, když přímo uvedete text menu, což je pro každého návštěvníka jednoznačné. Návštěvník by u vás na mobilu měl co nejmíň přemýšlet, jak web ovládat, a díky tomu, že kolikrát neví, kde se nachází menu, přicházíte o hodně peněz.

Zajímavou proměnou takto prošel web T-Mobile.cz, kde nejprve měli jako menu tři tenké čárky, které byly hodně od sebe. Když jsem měl možnost dělat na tomto webu testování, někteří jeho účastníci, tedy uživatelé webu T-Mobilu, opravdu nevěděli, že toto je menu, a spíše scrollovali po stránce a hledali, co potřebují. Nyní už má T-Mobile mnohem lépe vyřešenou navigaci a jde lépe na první pohled poznat, který prvek je navigace. Toto je hodně důležité a neměli bychom návštěvníka zbytečně mást.

Menu na webu T-Mobilu

Staré menu na webu T-Mobilu

Menu na webu T-Mobilu

Nové menu na webu T-Mobilu

Hraje umístění vliv?

Když mluvíme o navigaci, stále častěji se u svých klientů setkávám s otázkou, zda by mělo být menu na levé, nebo na pravé straně. A přitom mají v hlavě svoji vlastní hypotézu. Jak to máte vy? Kam byste menu umístili a proč? Nejčastější odpověď bývá: “Je to zcela jasné. Na pravé straně, protože většina lidí jsou praváci a na menu na mobilu tak snáze dosáhne.” Na první pohled tato odpověď dává smysl. Jenže na ten druhý už to tak jednoznačné není. Stačí se podívat na důkazy a méně se domnívat. Už jste zkoušeli na novém iPhone 8 nebo jiném velkém mobilu dosáhnout palcem na menu v hlavičce webu? Pokud se vám to povedlo, musíte mít místo ruky doslova tlapu. Proč tedy ale někteří mají stále menu na pravé straně?

Další informaci, kterou do této skládačky potřebujeme, se týká toho, jak naši zákazníci vůbec mobilní telefony drží. K tomuto tématu jsem bohužel nenašel novější studii než z roku 2015. Ale i ta ukazuje, jak lidé mobilní telefon drželi – převážně na výšku a na displej klepali palcem pravé ruky. Druhé držení se nám pak čím dál víc rozšiřuje díky větším mobilním telefonům, což nám víc napovídá, kam menu umístit.

Jak lidi používají mobily

Jak lidi používají mobily

Pokud budete přemýšlet, kam patří menu na vašem mobilním webu, je potřeba vycházet z reálných dat. Měli byste vědět, z jak velkých zařízeních k vám na web zákazníci chodí i na co jsou vaši zákazníci z oboru, kde se pohybujete, zvyklí. Nepředpokládejte. Díky datům budete chytřejší a podle velikosti rozlišení nebo displeje, která najdete například v Google Analytics, pak lépe poznáte, kde by vaše menu mělo být umístěno. Správné umístění menu pak zvyšuje jeho interakci s návštěvníkem. Větší používání menu může vést víc ke konverzím, jelikož návštěvník může dřív najít to, po čem na mobilním webu jde.

Obsah

Zatím jsme mluvili pouze o umístění menu. Mnohem horší je, že nikdy nevíte, co se pod slovem menu na webu schovává. Je to takové kouzlo, nebo hra na překvapení. Mě samotného baví odhalovat, co vše se do menu dá schovat. Už jsem v něm našel možnost se přihlásit, telefonní číslo, přepnutí měny nebo jazyka a mnoho dalšího. Pokud máte potřebu víc informací prezentovat v menu, prosím dělejte to srozumitelně. To například znamená, že je třeba oddělit tento obsah od samotné navigace a návštěvníkovi to jasně dejte najevo. Musí poznat, co je ještě hlavní navigace a co nikoli, aby se zde dokázal rychle zorientovat. Pěkně s tím pracuje například Zoot.cz, u nějž poznáte, co je ještě navigace a co jsou spodní prvky, jako například ono telefonní číslo. Podívejte se na příklady níže. Podobně pak Outfit4events.cz, kde máte v menu pěkně odděleně zpracovanou volbu jazyka nebo měny. Příklad najdete také níže.

Příklad navigace

Příklad navigace

Příklad navigace

Příklad navigace

Příliš dlouhá

Pokud máte opravdu dlouhou navigaci, dejte si pozor, jak se návštěvníkovi zobrazí. A klaďte si otázku, zda vůbec pozná, že má dál scrollovat. Když se například podíváte na mobilním telefonu iPhone 7 na současnou navigaci webu Bata.cz, jak poznáte, že navigace dál pokračuje? Vidíte totiž pouze první část navigace, která ale působí tak, že je ukončena a dále nepokračuje. Pod ní se nachází ještě další prvky navigace, o kterých se ale nikdo nedozví. Najít kontakty na mobilním webu je tak složité a zajímalo by mě skutečné procento lidí, které k nim doscrolluje.

Navigace na webu Bati

Navigace na webu Bati

Navigace na webu Bati

Navigace na webu Bati

Větvení

Váš návštěvník by měl také na první pohled poznat, zda se daná kategorie menu ještě větví, nebo nikoli. Díky tomu totiž bude vědět, zda může jít ve struktuře webu ještě víc do hloubky, nebo zda by už měl v této části webu provádět například výběr zboží nebo hledat informace, které potřebuje. Této přehlednosti pomohou například šipky do strany v navigaci nebo ikony plus a mínus.

Přehlednost

Navigace má návštěvníkům vašeho webu pomoci. Nenechte je tedy tápat, kde mají najít tu informaci, ke které se potřebují dostat. Často totiž prvky navigace schováváme nebo je umisťujeme tam, kde si myslíme, že je to správně, ale návštěvníci webu na to zvyklí nejsou. Pokud chcete navigací lidem pohyb na svém mobilním webu ulehčit, doporučuji si ji ověřit. Ideálně na uživatelském testování s lidmi z vaší cílové skupiny, abyste věděli, že jim navigace opravdu pomáhá. To, co sami považujeme za přehledné, může mnohdy házet návštěvníkům vašeho mobilního webu velké klacky pod nohy.

Shrnutí

Navigace je jeden ze základních kamenů vašeho mobilního webu. Když ji nepodceníte, rozhodně svým zákazníkům pomůžete. Jak jste si mohli přečíst, problémových míst navigace skrývá potenciálně hodně. Stačí, když se budete snažit své návštěvníky zbytečně nenutit přemýšlet, ale budete pro ně jednoznační.