Mobilní web pro byznys: vyhledávání a jak ho optimalizovat

Pokračujeme v seriálu zaměřeném na e-shopy a tématech okolo optimalizace mobilních webů a jejich vlivu na váš byznys. Prošli jsme si jejich vliv na byznysnavigaciprocházení mobilního webu a naposledy jsme se věnovali optimalizaci formulářů. Dnes se zaměříme na vyhledávání a jeho specifika na mobilních webech. A opět to vezme prakticky. Uvědomme si, že pro některé projekty je vyhledávání stěžejní funkce. Obzvlášť tam, kde e-shopy nabízí velké množství produktů a kde je náročné zorientovat se ve složité struktuře kategorií a podkategorií zboží. Tam pak hledání pomáhá zákazníkům rychle najít to, co chtějí koupit, či co k tomu potřebují.

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

Pozor na umístění vyhledávání

Pokud máte e-shop, určitě jste se už zamýšleli nad tím, kam hledání umístit. Doporučil bych vám vyhledávání návštěvníkovi příliš neschovávat, ať už máte web nebo e-shop. Vyhledávání je jedna z nejpoužívanějších funkcí na webech a e-shopech. Pokud máte e-shop, kde vyhledávání návštěvníci hodně používají a vede ke konverzím, pak by mělo být vyhledávání ideálně ihned viditelné, aby do něj na jeden klik mohli začít psát. Výborný příklad najdete v první ukázce. Knihy Dobrovský se snaží jít naproti potřebám svých zákazníků. Také mají spočítáno, že právě z vyhledání jim přichází vysoké procento konverzí. Právě proto mají vyhledávání ihned viditelné.

Příklad vyhledávání

Příklad vyhledávání

V případě, že pro vás vyhledávání není až tak důležité a nevede vám konverze, ale návštěvníci webu jej využívají, tak jej dejte jako ikonu v hlavičce webu, na kterou mohou návštěvníci v případě potřeby kliknout. Na podobné umístění jsme nejvíce zvyklí a u ikony lupy většina z nás bez problémů pozná, že slouží k vyhledání potřebného výrazu.

Příklad vyhledávání

Příklad vyhledávání

Bohužel je stále hodně projektů nebo e-shopů, které vyhledávání ke svému fungování potřebují, vede jim konverze, ale návštěvníkovi jej schovávají. Například do menu, jako tomu je v ukázce níže. Nevýhoda tohoto umístění se mi nejednou potvrdila v porovnávacích uživatelských testech. Lidé totiž v menu hledání nečekají, nenapadne je jej tam hledat a pak si myslí, že na stránce vyhledávání vůbec není. Někteří dokonce v takovémto e-shopu scrollovali úplně dolů, protože hledání čekali alespoň v patičce, kde jej ale zase nenašli. Proto pozor, kam vyhledávání umisťujete, abyste návštěvníkovi zbytečně cestu k produktu nebo informaci nezesložitili.

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Udělejte vyhledávání rozpoznatelné

Další způsob, jak znepříjemnit návštěvníkovi vyhledávání, je jeho vizualizace. Obzvlášť na mobilním telefonu může šedá barva působit jako označení neaktivního prvku. Takže šedý prvek, který po přejetí myší na desktopové verzi webu díky hover efektu je jasně rozpoznatelně aktivním prvkem, na mobilu může působit jako neaktivní prvek. Proto si dejte velký pozor na to, jak znázorníte možnost vyhledávání. V ukázce níže můžete sami posoudit, zda na vás ikona vyhledávání působí jako aktivní nebo neaktivní. Obzvlášť, když vedlejší ikona košíku je tmavší a jako jediná ikona z těchto tří vypadá tak, jako by jste na ni mohli kliknout. I takové drobnosti rozhodují o tom, zda návštěvník vašeho webu vyhledávání použije či nikoli.

Příklad vyhledávání

Příklad vyhledávání

Našeptávač vyhledávání

Velký vliv na konverze z mobilního webu má našeptávač ve vyhledávání. Díky němu totiž návštěvník ihned vidí produkty, návrhy kategorií či odpovědí pro zadávanou frázi. Našeptávání mu tak pomáhá se mnohem rychleji dostat k produktu nebo informaci, kterou potřebuje. Našeptávání také návštěvníky motivuje k přesnějšímu zadání hledané fráze, jelikož si vlastně již filtrují výsledky pomocí toho, co vidí v našeptávači. Musíme ale také dodat, že dobře zpracovat našeptávač není jednoduché. I velké e-shopy v něm tam mívají chyby. Nejprve se podívejme na ukázku jednoho zpracování našeptávače.

Příklad vyhledávání

Příklad vyhledávání

Když už víme, jak může našeptávač vypadat, rozebereme si nejčastější chyby, které se zde vyskytují.

Chybějící fotografie u produktů

Někteří designéři si myslí, že fotografie do našeptávače vyhledávání nepatří, protože zpomalují jeho zobrazení, nebo že zde pro fotografie není místo. Hodně ale záleží na typu produktů, které e-shop nabízí. Pokud máte e-shop, kde zákazníci hodně vybírají právě podle fotografií a navíc máte názvy produktů takové, které jim na první přečtení moc neřeknou (třeba technické názvy pro elektroniku), pak jim pouze slovní našeptávač moc nepomůže. Našel jsem pro vás ukázku, kde bez fotografie našeptávač pomůže jen tehdy, kdy si přesně pamatujete název naposledy koupeného či prohlíženého produktu, o který máte zájem. Jistě uznáte, že v tomto případě by nám fotografie vyhledávání zjednodušila, jelikož si někteří z nás si pamatují spíše fotky než názvy. I u správně nastaveného našeptávače musíte vědět, jak se návštěvníci na vašem e-shopu chovají. A pokud čtete náš seriál pravidelně asi nemusím připomínat, že si své předpoklady můžete snadno ověřit například na uživatelském testování.

Příklad vyhledávání

Příklad vyhledávání

Nedostatečná prezentace nalezených produktů

Někteří designéři se snaží v našeptávači šetřit místem, a proto nezobrazují všechny nalezené produkty. Vyberou jen některé z nich. Což na první pohled dává smysl. Všechny produkty by se nám do našeptávače vůbec nevešly. Bohužel to ale kolikrát zkrátí takovým způsobem, že nejde poznat, že se v e-shopu nějaké další  produkty nachází, a to pak je velký problém. Ve dvou ukázkách níže vidíte příklady, jak to může vypadat, pokud designer výčet produktů na webu špatně zkrátil. Udělal jsem vám pro kontext screenshoty celého našeptávače (horní i spodní část). V prvním ukázce se může návštěvníkovi zdát, že pro frázi “Electr” má e-shop celkově v nabídce pouze 2 produkty, protože jsou zde vybrány právě dva a nikde není řečeno, že jich e-shop nabízí více.

Ani u druhého příkladu se nedozvíte, zda má pro frázi “Electr” e-shop více než ony 3 doporučené produkty. Pokud chcete předejít tomu, aby byli vaši zákazníci z našeptávače zmateni, je třeba jim do našeptávače umístit informaci o tom, kolik produktů bylo celkově nalezeno nebo kolik se jich zobrazí po kliknutí na tlačítko s přechodem na celkový výpis nalezených produktů ve spodní části našeptávače. A tip jak tyto informace do našeptávače zapracovat najdete v poslední ukázce. Na konci našeptávače vyhledávání vidíte tlačítko “zobrazit dalších 12 produktů”, díky kterému návštěvník ví, kolik výsledků mu hledaná fráze vrátí.

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Chybějící informace u produktů

Když jsme u znalosti vašich zákazníků, měli byste také vědět, podle čeho se ti vaši během nákupu rozhodují. Pokud patříte k e-shopům, kde je stěžejní cena, pak ji uveďte i v našeptávači. Jednak ji návštěvník vidí na první dobrou a jednak funguje také jako kotva. To druhé se vám hodí, pokud se návštěvník zrovna rozhoduje mezi více produkty, které mu našeptávač vrátil. V ukázkách výše můžete vidět příklady, kdy je cena přímo v našeptávači.

Pro jiný sortiment může být důležitým faktorem pro rozhodovací proces návštěvníka skladovost zboží. Pokud máte ve své nabídce produkty, na které se zákazníci hodně těší a v rámci trhu jsou zvyklí, že tyto produkty jsou k dostání do dvou dnů, ukažte jim, za je máte skladem už v našeptávači. I taková maličkost pak může pomoci, že se rozhodnou pro nákup právě u vás. Navíc, pokud máte některé produkty skladem a jiné nikoli, tak tato informace v našeptávači pomůže vybrat, zda si počkají, nebo vezmou alternativu, kterou máte skladem. I proto u většiny e-shopů doporučuji řadit výpis výsledků vyhledávání dle skladovosti – tedy nejprve produkty, které jsou skladem a poté všechny ostatní. Ukázky různých prezentací skladovostí můžete také vidět v příkladu e-shopu kasa.cz výše.

Specifickým příkladem je pak prezentace katalogového čísla produktu nebo EANu, kdy pokud máte produkty, které jsou si hodně podobné nebo je mezi nimi jen minimální rozdíl. Tato míra podrobnosti je specifická například pro železářství nebo B2B sortiment. Tam pak dává smysl návštěvníkovi rovnou v našeptávači ukázat i toto číslo , protože podle něj produkty často hledají. Díky němu pak mají jistotu, že našli ten správný produkt.

Rychlý nákup

Další specifickou možností je nabídnout v našeptávači rovnou možnost nákupu. Toto je důležité především u e-shopů, kde je typické, že zákazník na jednu objednávku nakoupí hodně produktů i že objednává často. Pěkným příkladem nám tak může být Rohlik.cz, kde si můžete rovnou v našeptávání zvolit i počet kusů a mnohem rychleji se tak dostanete k dokončení objednávky.

Příklad vyhledávání

Příklad vyhledávání

Opomíjená technická chyba s přiblížením vyhledávání

Dost často narážím i na přehlížení technické chyby, která vzniká na mobilních zařízení Apple. Pokud je text ve vyhledávacím poli menší než 16px, tak se celé pole s vyhledáváním přiblíží, jak je tomu v ukázce níže. Pak ale nemusí jít být vidět tlačítko pro potvrzení vyhledávání, což může být pro některé návštěvníky problém. Někteří uživatelé totiž stále neví, že si mohou web přiblížit nebo oddálit. A ti pak nemusí vědět, jak se dostat na stránku s výsledky vyhledávání. I vyhledávací pole je dobré testovat a kontrolovat na různých zařízeních, abyste podobným problémovým místům uměli předejít.

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Výsledky a jejich členění podle obsahu

Návštěvníci webů hledají různé informace. Někdo hledá produkt, jiný nápovědu nebo poradnu, jiný konkrétní značku, někdo obsahovou stránku. Proto je potřeba členit typ nalezeného obsahu, aby návštěvník věděl, kam má kliknout, aby přešel na to, co jej zajímá. Bohužel s tímto mnoho projektů vůbec nepracuje a prezentují všechny výsledky, jako by šlo o tentýž typ. A to je špatně. Posuďte sami z první ukázky. V druhých dvou ukázkách naopak návštěvníkovi pomáhají rozdělením výsledků hledání dle typu rychleji se dostat k tomu, co potřebuje. Sám vám tuto segmentaci vřele doporučuji, mám s ní na svých projektech super výsledky. Pomáhají především zvýšení konverzí z mobilního vyhledávání.

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Příklad vyhledávání

Nepodceňujte práci s vyhledáváním

Vyhledávání může být jedním z nejdůležitějších míst, které vám zvýší konverze, proto je potřeba, aby bylo zpracováno co nejlépe. Problémových míst je zde hned několik, jak jste mohli vidět, a na tyto místa se prosím zaměřte. Doporučuji mít k ruce šikovného analytika, který vám pomůže vyhodnotit chování návštěvníků během vyhledávání na vašem webu a podle těchto dat pak můžete provádět optimalizaci k lepším výsledkům. Doporučuji také provádět uživatelská testování, kde návštěvníky uvidíte vy sami v akci a také nahrávat návštěvníky pomocí nástroje Smartlook.com nebo Hotjar.com. Tyto nástroje vám dají další důležité vhledy do toho, jak opravdu vaši zákazníci hledání používají. A také vám pomohou pro vyhodnocení jednotlivých změn, které jste (i díky nim) udělali.   

Nejnovější