Dokonalý dizajn vyhľadávacieho poľa: ako na UI/UX

Úvod

Funkcia vyhľadávania je kľúčovým dizajnovým prvkom webových stránok s rozsiahlym obsahom. Používatelia používajú vyhľadávanie, aby našli to, čo potrebujú na zložitejších stránkach.

Funkcia vyhľadávania pozostáva z dvoch základných prvkov: vstupného poľa, ktoré umožňuje zadávať text, a tlačidla odoslať. Hoci sa vyhľadávacie lišty môžu zdať ako jednoduchý nástroj, proces návrhu si vyžaduje rozsiahly výskum a pozornosť.

Tou vecou, ktorá stojí medzi vami a vaším úspechom, môže byť napokon niečo tak jednoduché, ako je dizajn vyhľadávacieho poľa webovej stránky.

Poradili sme sa s naším skúseným produktovým tímom, aby sme vám mohli poskytnúť cenné tipy na zlepšenie funkčnosti vyhľadávania na vašej stránke. Budeme sa zaoberať osvedčenými postupmi pre návrh UX a používateľského rozhrania, predstavíme ukážkové weby a tiež softvérové nástroje, ktoré vám pomôžu optimalizovať vyhľadávanie na vašej stránke.

Predstavte si, že navštívite webovú stránku, ktorá predáva tenisky, a máte záujem o konkrétny model. Prehliadli by ste si celú stránku, kým by ste tento model našli? Pravdepodobne nie. Pravdepodobnejšie je, že by ste do vyhľadávacieho poľa zadali názov/typ modelu, stlačili enter a voilà – našli ste, čo ste hľadali.

Ale čo ak nie je vyhľadávacie pole navrhnuté efektívne? Z výskumu spoločnosti Baymard vyplýva, že až 39 % e-shopov sa stretáva s výraznými problémami s funkčnosťou vyhľadávania. To poukazuje na dôležitosť dobre navrhnutej funkcie vyhľadávania, ktorá je často prehliadaná, ale pre bezproblémový používateľský zážitok je kľúčová.

Dizajn a funkčnosť vyhľadávacích polí zohrávajú pri úspechu v e-commerce kľúčovú úlohu. Nielenže pomáhajú používateľom nájsť presne to, čo hľadajú, ale pomáhajú im aj vtedy, keď si ešte nie sú istí tým, čo vlastne potrebujú.

Funkcia vyhľadávania na webe je podceňovaným dizajnovým prvkom. Podľa nášho prieskumu:

Osvedčené UI postupy pri dizajnovaní vyhľadávacieho poľa

Táto časť sa zameria na osvedčené postupy pri navrhovaní robustného vyhľadávacieho panela webu.

1. Vytvorte dizajn zameraný na mobilné zariadenia

Používatelia mobilných zariadení predstavujú viac ako 50 % celosvetovej webovej návštevnosti, pričom toto číslo medziročne neustále stúpa. Vzhľadom na tento trend je nevyhnutné sa pri návrhu vyhľadávacieho poľa zamerať na mobilné zariadenia.

Dizajn UX vyhľadávacieho poľa by mal byť vytvorený s ohľadom na plochu mobilnej obrazovky. Umiestnenie by malo byť viditeľné a ľahko dostupné jedným pohybe palca. Vynikajúcou funkciou pre mobilné zariadenia je aj „lepkavé“ vyhľadávacie pole, ktorá zostáva viditeľná v hornej alebo dolnej časti webovej stránky pri skrolovaní.

2. Zabezpečte viditeľnosť

Návštevníci vašej stránky by vyhľadácie pole nemali musieť hľadať. Niektorí dizajnéri robia chybu, keď možnosť vyhľadávania schovajú do tlačidla menu alebo nezabezpečia jeho dostatočnú viditeľnosť.

Je dôležité zobraziť celé pole s otvoreným textom, pretože skrývanie funkcie vyhľadávania za ikonu znižuje jej viditeľnosť a zvyšuje náklady interakcie.

Zabezpečte, aby bol váš vyhľadávací panel ľahko rozpoznateľný, a to použitím ikony lupy a umiestnením tlačidla vyhľadávania vedľa vyhľadávacieho poľa. Jeho viditeľnosť môžete zvýšiť aj použitím farieb pozadia, ktoré kontrastujú s témou vašej stránky.

V prípade mobilných zariadení použite lepkavé vyhľadávacie pole v strednej hornej časti obrazovky, aby ste dosiahli najlepšie výsledky.

3. Zachovajte konzistentný dizajn naprieč celým webom

Dbajte na to, aby ste funkciu vyhľadávania umiestnili na svojej webovej stránke vždy na tom istom mieste.

Návštevníci očakávajú, že vyhľadávacie pole bude na rovnakom mieste a bude mať rovnaký vzhľad ako na prvej stránke, ktorú navštívili. Ak nie je umiestnenie poľa konzistentné, môže to spôsobiť zmätok a negatívne ovplyvniť konverzný pomer.

4. Implementujte automatické dokončovanie

Niekedy vaši návštevníci nemusia presne vedieť, čo hľadajú. A niektorým používateľom sa jednoducho nechce zadávať dlhé vyhľadávacie výrazy.

Automatické dokončovanie (tzv. našepkávač) je výkonná funkcia vyhľadávacieho poľa, ktorá predpovedá požiadavky používateľov a ponúka im návrhy na základe ich počiatočného zadania, histórie vyhľadávania, aktuálnej stránky a ďalších údajov.

Táto funkcia otvára množstvo príležitostí, ako zaujať vašich návštevníkov. Jeden vyhľadávací výraz môže priniesť viacero výsledkov vyhľadávania súvisiacich so zadaním, napríklad kategórie produktov a top značky, čím sa zvýši pravdepodobnosť úspešnej konverzie.

5. Obrázky vo výsledkoch

Je dôležité zamerať sa aj na používateľské rozhranie výsledkov vyhľadávania. Zobrazovanie obrázkov produktov vedie k väčším predajom. Ľudia si často vizualizujú produkt, ktorý na vašom webe hľadajú. Pokiaľ teda vo výsledkoch vyhľadávania uvidia obrázok produktu, ktorý zodpovedá ich predstave, zvyšuje to šancu na konverziu.

6. Zástupný text

Účinným spôsobom, ako ľuďom pomôcť lepšie si predstaviť, čo môžu hľadať, je pridať do vstupného poľa vzorový hľadaný výraz ako zástupný text. Môžete im tak navrhnúť, ako začať hľadanie. Zástupné texty sa do vstupných polí pridávajú ľahko pomocou HTML5.

7. Kľúčové slovo ponechajte v poli

Po dokončení vyhľadávania by kľúčové slovo malo zostať viditeľné vo vyhľadávacom poli. To používateľovi umožní upraviť alebo doplniť pôvodný dopyt a vyhľadávať znova. Zlepšuje to celkové používateľské prostredie a znižuje mieru okamžitých odchodov z webu (bounce rate).

Uistite sa, že si vyhľadávacie pole pamätá a kľúčové slovo z posledného dopytu a zobrazuje ho.

5. Vyhľadávacie pole v mobilných zariadeniach

Prezeranie alebo nakupovanie cez telefón môže byť frustrujúce, ak niektoré časti webových stránok nefungujú podľa očakávania.

Rozšírené možnosti vyhľadávania by preto nemali byť obmedzené iba na používateľov počítačov. Stále viac ľudí nakupuje online zo svojich smartfónov.

Plnohodnotné vyhľadávacie polia dostupné na mobilných verziách webov môžu výrazne prispieť k zlepšeniu prostredia pre všetkých používateľov vďaka tomu, že splnia ich očakávania.

Pokročilé funkcie, ako je oprava preklepov, lemmatizácia alebo automatické dopĺňanie, môžu výrazne zlepšiť výsledky a tiež zvýšiť šance na predaj väčšieho množstva tovaru.

6. UX výsledkov vyhľadávania

Bonus: ak chcete dosahovať ešte lepšie výsledky, popracujte na obsahu

Obsah je základ! Dobrý obsah dokáže návštevníkov vášho webu presvedčiť, aby nakúpili. Uistite sa, že všetky produkty majú podrobné opisy obsahujúce všetky dôležité vlastnosti. K dobrému obsahu patria aj obrázky produktov. Dbajte na to, aby boli kvalitné a aby mali jednotné rozmery. Pri žiadnom produkte by nemali chýbať informácie o cenách či tabuľky veľkostí (ak sú k dispozícii). Obsahu svojho webu venujte veľkú pozornosť, pretože tiež do veľkej miery prispieva k vytváraniu kladného dojmu používateľov.

5 príkladov efektívnych návrhov vyhľadávacieho poľa

V tejto časti sa pozrieme na päť e-shopov s výnimočným dizajnom vyhľadávacieho poľa.

1. Škoda Auto

E-shop Škoda Auto si bez problémov poradí s vyhľadávacím výrazom, ktorý obsahuje rozmer požadovaného produktu, takže 16″ disky na model Karoq nájde bez problémov.

2. Acer

Obchod Acer má široké vyhľadávacie pole, ktoré si zákazníci okamžite všimnú. Našepkávač ponúka obľúbené dopyty a produkty ešte predtým, než používateľ začne vyhľadávať.

3. 11teamsports

Ďalšie vyhľadávanie, ktoré okamžite zobrazuje návrhy našepkávača, obľúbené produkty a dopyty. Ihneď po zadaní prvých písmen „ars“ sa zobrazili sady značkového tovaru futbalového klubu Arsenal.

4. Kik

Vyhľadávanie na webe Kik obsahuje zástupné texty, ktoré motivujú návštevníkov použiť vyhľadávanie na nájdenie želaných produktov.

5. Bobcat

Vyhľadávanie na webe spoločnosti Bobcat zobrazuje návrhy priamejšie a zrozumiteľnejšie. Zástupný text s návrhmi dopytov sa strieda a ukazuje tak zákazníkom, čo všetko by mohli vyhľadať.

Najlepšie nástroje na vyhľadávanie na trhu

Dizajn, umiestnenie a funkcie vyhľadávacieho poľa sú síce dôležité, ale rovnako dôležitú úlohu pri vytváraní používateľského prostredia hrá aj samotný nástroj. Poďme sa tomuto aspektu venovať hlbšie a pozrime sa na niektoré z popredných spoločností v oblasti vyhľadávania pre e-commerce.

1. Luigi’s Box

Slovenská spoločnosť Luigi’s Box vznikla ako systém na riešenie problémov s vyhľadávaním na webe pre firmy z oblasti e-commerce. V priebehu rokov si vďaka svojmu inovatívnemu prístupu získala uznanie na celom európskom trhu.

2. Algolia

Spoločnosť Algolia vznikla v roku 2012 v Paríži a rýchlo rozšírila svoje pôsobenie do San Francisca a ďalších svetových lokalít. Je známa svojim prístupom zameraným na vývojárov a zabezpečila si silnú pozíciu na trhu vyhľadávania ako služby.

3. Elasticsearch

Služba Elasticsearch vznikla v roku 2010 ako vedľajší projekt Shaya Banona a neskôr sa stala hlavným produktom spoločnosti Elastic, ktorá vznikla v Amsterdame. Odvtedy sa stala poprednou značkou v oblasti open-source vyhľadávacích technológií.

4. SearchSpring

Spoločnosť SearchSpring bola založená v roku 2007 v Colorado Springs ako reakcia na rastúcu potrebu pokročilých riešení pre vyhľadávanie v e-shopoch. Odvtedy slúži mnohým značkám a predajcom.

5. FactFinder

Spoločnosť FactFinder pochádza z Nemecka a pôsobí v oblasti vyhľadávania pre e-shopy zhruba od roku 2000. Na európskom trhu je uznávaná pre svoje spoľahlivé riešenia vyhľadávania a navigácie.

6. Klevu

Fínska spoločnosť Klevu bola založená v roku 2013. Zameriava sa na riešenia založené na umelej inteligencii a rozšírila svoje pôsobenie po celej Európe a Severnej Amerike.

7. Doofinder

Spoločnosť Doofinder bola založená v Španielsku v roku 2011 a jej cieľom bolo zlepšiť vyhľadávanie v e-shopoch v celej Európe. Odvtedy rozšírila svoju zákaznícku základňu a zväčšila svoju ponuku.

8. Loop54

Spoločnosť Loop54 so sídlom vo švédskom Štokholme začala svoje pôsobenie v roku 2011. Vďaka svojmu zameraniu na riešenia založené na umelej inteligencii sa firma rýchlo presadila na severskom trhu e-commerce.