Mobilní web pro byznys: Nevíte kam kliknout? I taková bývá realita

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. V předchozích článcích jsme odhalili tajemství mobilního webu a jeho provázanost na byznys. Zatímco nepřehledná navigace návštěvníka a potenciálního kupujícího zmate, absence viditelných prolinků a aktivních prvků vás může připravit o peníze. A přece existuje stále velké množství mobilních webů, které nemají jednoznačně označené aktivní prvky na stránce. Bohužel častým nešvarem některých grafiků je přílišná kreativita, která na desktopu může vypadat opravdu dobře, ale na mobilu je pak problém poznat, co je vůbec aktivní prvek a co nikoli. Některé příklady si níže rozebereme.

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ý.

Poznat odkaz na první dobrou

Když váš návštěvník nepozná, nač může na webu kliknout, tak není vždy jisté, že bude zkoušet, co je aktivní prvek a co nikoliv. Dost pravděpodobně nerozpozná všechny aktivní prvky a může se stát i to, že půjde nakoupit ke konkurenci. Nejednoznačnost odkazů vás tak může stát mnohem víc, než se na první pohled může zdát. Nejčastěji na sebe nejednoznačnost bere podobu černých nebo šedých odkazů. Vypadají možná hezky, ale návštěvník vašeho webu na první pohled vůbec nepozná, že to odkazy jsou. Toto je bohužel opravdu hodně časté a dokonce i na webech velkých společností. Například na okay.cz jsou šedou barvou aktivní prvky, odkazy, které ale na první pohled působí jako neaktivní. Není to jen můj pohled. Byla to i první zpětná vazba některých testujících při porovnávacích testech, kde jsem s lidmi testoval weby všech velkých prodejců elektra. I taková drobnost dokáže rozhodnout o tom, zda na tyto prvky někdo na webu klikne nebo nikoli. Stejně tak například e-shop smarty.cz má v patičce odkazy, které vypadají, jako by byly neaktivní. Podobné to je také s pouze černými odkazy, které nemají podtržení. I ty na mobilu mohou působit jen jako texty bez odkazu, proto pozor i ně. Ideálně byste měli mít jednoznačnou barvu pro odkazy nebo pro jejich označení, například pomocí podtržení, aby se zde návštěvník mohl jednoduše orientovat. O vašem byznysu rozhoduje chování vašich zákazníků mnohem více, než to, co se vám může zdát designově vychytané.

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Pomáhají bannery lákat?

Zkuste se někdy na svůj mobilní web podívat očima návštěvníka, který na něj přišel prvně. Dokážete poznat, která místa vás mají vybídnout k akci? Prokliknout se na další stránku, něco si zjistit, vyplnit formulář?

Mnohokrát se mi stalo, že bannery nebo akční plochy, které by měly návštěvníka vyzvat k akci, tak vůbec nepůsobí. Buď jsou příliš malé, aby na nich návštěvník cokoliv přečetl nebo jsou tak nevýrazné či nejednoznačné, že by jej to vůbec k žádné akci nepřimělo. Níže naleznete tři příklady těchto nešvarů. Bannery působí moderně, ale dejte si pozor, aby svoji funkci opravdu plnily. Pokud byste se chtěli inspirovat, pak doporučuji například e-shop Bellarose.cz. Tam bannery používají jednoznačně. Návštěvník tak ihned ví, co je mu prezentováno, i na jaký prvek (banner) může kliknout.

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Skrývání posouváním do strany

Dost často se stává, že vývojáři mobilních webů schovávají obsah tak, že se zobrazuje tažením do strany. To na první pohled dává smysl, jelikož tak dokážeme schovat části obsahu webu a návštěvník se k nim může pohodlně dostat jen jemným potáhnutím. Problém nastane v okamžiku, kdy návštěvník nepozná, že toto chování po něm někdo (tedy mobilní stránka) chce. Sami si to můžete vyzkoušet například na glami.cz. Mají tam některé prvky takto nejednoznačně zpracovány. Na jejich domovské stránce je výpis kategorií, který se posouvá do strany. Kdybych náhodně neklikl na jednu z kategorií a jemně ji nepřidržel, tak se nikdy nemusím dozvědět, že se zde další obsah ukrývá. Navíc se každému návštěvníkovi tento prvek zobrazí trochu jinak podle toho, jaké má zařízení i velikost displeje. Někomu se tedy může krajní ikona jevit useknutá, což napoví, že máme scrollovat do strany. Ale ty, kdo ji uvidí celou, nemusí napadnout, že mají hledat další obsah. Dejte si pozor, abyste se podobným způsobem nepřipravili o nakupující.

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Také smarty.cz má podobný problém, a to na detailu produktu. Mají tam záložky, u kterých na některých zařízeních nemusí jít vůbec poznat, že jejich výpis někam pokračuje, nebo že bychom se vůbec měli posouvat do strany. Přitom na témže webu mají podobnou vlastnost u výpisu produktů správně. Tedy se šipkami do strany, což návštěvníkovi jednoznačně říká, že se máme či můžeme posunout.

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Telefonní číslo má rovnou volat

Znáte to. Vybíráte si službu nebo produkt a na mobilním webu najdete telefonní číslo, na které chcete zavolat. Máte v ruce telefon, přirozeně se tedy pokoušíte na číslo kliknout, abyste mohli rovnou zavolat a doptat se na pár drobností, které vás zajímají. Klikáte, a nic se neděje. To proto, že zde zcela chybí funkce pro automatické volání. Co následuje? Snažíte se zapamatovat si celé číslo a poté přejdete na mobilu k zadání čísla, kde zjistíte, že jste si, pokud máte průměrnou paměť, zapamatovali prvních 5 číslic a musíte zpět na daný mobilní web, abyste se naučili zbytek telefonního čísla. A možná to budete muset zkusit několikrát dokola, dokud celé číslo správně neopíšete. Jde o zbytečné zdržení, které může vést jen k tomu, že nákup odložíte, nebo se naštvete a najdete si jiného prodejce, který vám nebude házet klacky pod nohy. V době chytrých telefonů se nevyplácí zapomínat na chytré funkce, které jsou pro lidi zcela přirozené a běžné. Nedělejte to jako okay,cz v patičce (viz ukázka níže), raději se inspirujte navigací od zoot.cz (druhá ukázka).

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Příklad mobilního webu

Nenuťte své návštěvníky přemýšlet

Když svým návštěvníkům jasně ukážete, jaké prvky na webu jsou určeny k prokliknutí, tedy jaké z daných prvků jsou aktivní, budete mít větší pravděpodobnost, že se z nich stanou vaši zákazníci. Jednoznačnost znamená, že návštěvník na první pohled pozná, co je aktivní plocha a co nikoli. Nemusíte začínat uživatelskými testy. Stačí, když si otevřete sami svůj web a zkusíte si jej projít očima někoho, kdo web vidí poprvé. Možná budete sami překvapeni, co novýma očima uvidíte.

Další pokračování už příští úterý

Nejnovější