Kľúčové poznatky
- Vyhľadávacie pole je významný faktor rastu príjmov: zákazníci, ktorí používajú vyhľadávanie, majú o 44 % vyššiu pravdepodobnosť konverzie.
- Rýchlosť a presnosť sú kľúčové: Autocomplete, oprava preklepov a presné párovanie dopytov udržujú používateľov zapojených.
- Uprednostnite mobile-first dizajn: vyhľadávacie pole musí zostať dostupné a konzistentné na celej vašej stránke.
- Personalizácia na základe predchádzajúceho správania: predchádzajúce vyhľadávania návštevníkov môžete využiť na vytvorenie osobnejšieho a relevantnejšieho zážitku.
Vyhľadávacie pole je jedným z najvplyvnejších interaktívnych prvkov na e-commerce stránke. Ovplyvňuje, ako sa zákazníci pohybujú po vašom obchode a ako rýchlo nájdu produkty. Keď je interakcia s vyhľadávaním nejasná, obmedzená alebo frustrujúca, používatelia sa neprispôsobia – jednoducho vyhľadávanie opustia. Preto sú používateľská skúsenosť (UX) aj používateľské rozhranie (UI) dizajnu vyhľadávacieho poľa kľúčové pre konverzie.
Táto príručka pokrýva praktické best practices pre dizajn vyhľadávacieho poľa, ktoré zlepšujú UX a UI vyhľadávania v e-commerce, znižujú prekážky, podporujú skutočné správanie zákazníkov a zlepšujú objavovanie produktov aj konverzie.
Čo je vyhľadávacie pole?
Vyhľadávacie pole je komponent používateľského rozhrania (UI), ktorý umožňuje používateľom zadať dopyt a získať výsledky z webovej stránky, aplikácie alebo databázy. Zvyčajne obsahuje textové pole na zadanie dotazu a tlačidlo (alebo akciu na klávesnici) na spustenie vyhľadávania.
V tomto príklade z demoshopu Luigi’s Box si môžete všimnúť, že vyhľadávacie pole je rozšírené o funkciu autocomplete.
Prečo je v e-commerce dôležitý UX a UI dizajn vyhľadávacieho poľa?
Tretina zákazníkov okamžite opustí stránku po neúspešnom vyhľadávaní.
Dizajn vyhľadávacieho poľa ovplyvňuje, ako rýchlo zákazníci nájdu správne produkty a posunú sa k dokončeniu nákupu. UI motivuje používateľov k interakcii. UX zabezpečuje, že táto interakcia vedie k relevantným výsledkom. Keď spolu fungujú správne, vyhľadávanie je prirodzené, podporuje objavovanie produktov a pomáha premieňať návštevníkov s vysokým nákupným zámerom na zákazníkov.
Predstavte si, že navštívite web, ktorý predáva tenisky, a máte vyhliadnutý konkrétny model. Prechádzali by ste celý web, kým ho nájdete? Pravdepodobne nie. Skôr zadáte názov alebo typ modelu do vyhľadávacieho poľa, stlačíte enter a — voilà — nájdete to, čo hľadáte.
Vyhľadávacie pole na e-commerce webe je často podceňovaný dizajnový prvok, no podľa nášho vlastného výskumu:
44%
Zákazníci, ktorí používajú vyhľadávanie na stránke, majú o 44 % vyššiu pravdepodobnosť nákupu.
40%
Funkcia vyhľadávania môže tvoriť približne 40 % celkových príjmov online obchodu a v niektorých prípadoch môže dosiahnuť až 90 %.
90%
Väčšina zákazníkov sa sústreďuje iba na výsledky na prvej stránke.
14%
Približne 14 % zákazníkov používa vyhľadávanie na mobilných zariadeniach.
Čo však ak vyhľadávacie pole nie je dobre optimalizované a vedie k neúspešnému vyhľadávaniu? Zistili sme, že to poškodzuje objavovanie produktov, znižuje predaje a zvyšuje mieru odchodov zo stránky.
Aké sú osvedčené postupy pre UI dizajn vyhľadávacieho poľa?
UI dizajn vyhľadávacieho poľa je o tom, aby bolo vyhľadávanie jasné, dostupné a jednoduché na používanie.
Nasledujúce best practices zdôrazňujú UI prvky, ktoré podporujú kvalitný vyhľadávací zážitok priamo na stránke.
1. Vytvorte mobile-first dizajn
Mobilné obrazovky menia spôsob, akým používame vyhľadávanie. Používatelia na mobile potrebujú rýchlejší prístup a jasnejšiu spätnú väzbu. Dizajn vyhľadávacieho poľa by mal byť navrhnutý s ohľadom na priestor mobilnej obrazovky. Umiestnenie by malo byť viditeľné a ľahko dostupné aj pri minimálnom pohybe palca. Sticky search bar, ktorý zostáva viditeľný v hornej alebo dolnej časti stránky pri scrollovaní, je tiež skvelou funkciou pre mobilné zariadenia.
Mobilní používatelia tvoria viac ako 50 % celosvetovej webovej návštevnosti a tento podiel každoročne rastie. Preto je prioritizácia mobile-first dizajnu pre vyhľadávacie pole nevyhnutná.
2. Zabezpečte dobrú viditeľnosť
Vyhľadávacie pole, ktoré je ťažké nájsť, zvyšuje frustráciu a znižuje zapojenie používateľov. Nenúťte návštevníkov hľadať samotné vyhľadávanie. Niektorí dizajnéri robia chybu, že skrývajú vyhľadávanie do menu tlačidla alebo pole nie je dostatočne viditeľné.
Je dôležité zobraziť celé otvorené textové pole, pretože skrývanie vyhľadávania za ikonou znižuje jeho viditeľnosť a zvyšuje náročnosť interakcie.
Zabezpečte, aby bolo vyhľadávacie pole ľahko rozpoznateľné použitím ikony lupy a tlačidla vyhľadávania vedľa textového poľa. Viditeľnosť môžete zvýšiť aj použitím kontrastnej farby pozadia voči dizajnu vašej stránky.
3. Zachovajte konzistentný dizajn na celej stránke
Uistite sa, že vyhľadávacie pole je na celej stránke umiestnené na rovnakom mieste.
Návštevníci očakávajú, že vyhľadávacie pole bude na rovnakom mieste a bude vyzerať rovnako ako na domovskej stránke. Ak to tak nie je, môže to spôsobiť zmätok a negatívne ovplyvniť mieru konverzií.
4. Implementujte Autocomplete
Autocomplete (alebo našepkávač) pomáha používateľom spresniť ich dotaz ešte pred jeho odoslaním. Niekedy návštevníci presne nevedia, čo hľadajú. A niektorým používateľom sa jednoducho nechce písať dlhé vyhľadávacie výrazy.
Vyhľadávacie pole s autocomplete predpovedá dotazy používateľov a ponúka návrhy na základe ich vstupu, histórie vyhľadávania, aktuálnej stránky a ďalších faktorov.
Táto funkcia otvára množstvo príležitostí na zapojenie návštevníkov webu. Napríklad jeden dotaz môže priniesť viacero výsledkov súvisiacich s hľadaným výrazom, ako sú kategórie produktov alebo top značky. Tým sa znižuje námaha používateľa a zrýchľuje objavovanie produktov.
Autocomplete poskytuje používateľom rýchlu spätnú väzbu na ich dopyty
Okamžite používateľov uistí, že sa nachádzajú na správnom mieste, teda vo vašom e-shope, a že robia správne kroky k nájdeniu požadovaného produktu, ktorý ponúkate a máte na sklade. Veľmi často sa používa aj ako rýchla navigácia, ktorá umožňuje priamo prejsť do správnej kategórie produktov vo vašej štruktúre kategórií. Jeho rýchlosť je kľúčová, pretože zákazníci ho využívajú aj na rýchle upravovanie vyhľadávacích dopytov predtým, než prejdú do plného vyhľadávania s pokročilým filtrovaním a triedením.
5. Pridajte obrázky do výsledkov
Zobrazovanie obrázkov produktov môže zvýšiť predaje, pretože zákazníci často majú vizuálnu predstavu o tom, čo hľadajú. Keď nakupujúci uvidia vo výsledkoch vyhľadávania obrázok produktu, ktorý zodpovedá ich predstave, je pravdepodobnejšie, že nákup dokončia.
6. Použite placeholder text
Dobrý placeholder text nastavuje jasné očakávania. Namiesto všeobecného textu použite text, ktorý naznačuje, čo môžu používatelia vyhľadávať, napríklad typy produktov, značky alebo akcie.
Aby používatelia pochopili typy vyhľadávacích dotazov, ktoré môžu použiť, zvážte vloženie ukážkového výrazu priamo do vstupného poľa ako placeholder. To je obzvlášť užitočné, ak je možné vyhľadávať podľa viacerých parametrov. HTML5 umožňuje jednoducho pridať placeholder text do vstupných polí.
7. Zachovajte kľúčové slovo v poli
Vyhľadávacie kľúčové slovo by malo zostať viditeľné vo vyhľadávacom poli aj po načítaní výsledkov.
Okrem toho by vyhľadávacie pole malo vždy zachovať a zobrazovať posledný zadaný výraz používateľa. Používatelia tak môžu svoj pôvodný dotaz upraviť alebo spresniť, vyhľadávať znova a nájsť ideálny produkt.
Aké sú osvedčené postupy pre UX dizajn vyhľadávacieho poľa?
UX dizajn vyhľadávacieho poľa presahuje samotný vzhľad vyhľadávacieho poľa. Závisí od toho, ako dobre zážitok z vyhľadávania podporuje reálne správanie zákazníkov.
Tu sú osvedčené postupy, ktoré ho môžu zefektívniť.
1. Rýchlosť
Ľudia sú zaneprázdnení. Nechcú dlho čakať, kým sa na vašej stránke načítajú výsledky vyhľadávania. Platí to najmä pri funkcii Autocomplete.
Rýchlosť je pre User Experience rozhodujúca. Ak návštevníci nedostanú výsledky okamžite, zatvoria okno a nakúpia inde.
2. Kvalita zhody
Používateľ vám nemusí vždy zadať presne zodpovedajúci dopyt. Môže obsahovať preklep, neúplný zámer vyhľadávania alebo chýbajúci kontext.
Algoritmus vyhľadávacieho nástroja by mal byť dostatočne sofistikovaný na to, aby zohľadnil všetky faktory, rozpoznal, čo používateľ skutočne hľadá, a následne poskytol presné výsledky vyhľadávania. Vyhľadávacie pole, ktoré toleruje drobné chyby a dokáže sa s nimi vysporiadať, zvyšuje úspešnosť vyhľadávania a znižuje počet stránok bez výsledkov.
Niektorí používatelia nemusia používať rovnaký jazyk ako váš produktový katalóg. Synonymá a porozumenie prirodzenému jazyku pomáhajú preložiť výrazy zákazníkov a priradiť ich dopyty k relevantným výsledkom.
3. Hlasové vyhľadávanie
Hlasové vyhľadávanie je pohodlný spôsob, ako môžu používatelia nájsť produkty, najmä na mobilných zariadeniach, kde môže byť písanie pomalé alebo nepohodlné. Ak viete, že vaši zákazníci často vyhľadávajú počas pohybu, funkcia hlasového vyhľadávania im môže pomôcť.
Aby bola ľahko rozpoznateľná, pridajte do vyhľadávacieho poľa alebo vedľa neho ikonu mikrofónu, ktorá bude reprezentovať hlasové vyhľadávanie.
Zároveň zlepšuje funkčnosť vyhľadávania pre používateľov, ktorí môžu mať kvôli fyzickým obmedzeniam problém používať klávesnicu.
4. Dynamické filtre
Dynamické filtre pomáhajú zákazníkom zúžiť výsledky bez toho, aby museli začať vyhľadávanie odznova, najmä pri veľkých katalógoch. Zvyšujú pohodlie tým, že automaticky zobrazujú relevantné filtre prispôsobené každej kategórii produktov.
Napríklad basgitary je možné filtrovať podľa počtu strún, zatiaľ čo súpravy bicích ponúkajú úplne iné možnosti filtrovania.
Dynamické filtre sa tiež menia podľa kontextu.
5. Mobilné vyhľadávacie pole
Keďže m-commerce naďalej rastie, funkcie vyhľadávania by mali fungovať rovnako dobre na smartfónoch ako na desktopoch.
Plnohodnotné vyhľadávacie formuláre dostupné na mobilných webových stránkach výrazne zlepšujú zážitok pre všetkých používateľov tým, že spĺňajú ich očakávania. Implementácia pokročilých funkcií, ako je oprava preklepov, lematizácia alebo autofill, môže priniesť výrazný rozdiel a zvýšiť vaše šance na predaj väčšieho množstva produktov.
6. UX výsledkov vyhľadávania
Kategórie
Pridajte kategórie, vďaka ktorým zúžite výsledky vyhľadávania a zlepšite celkovú skúsenosť vašich zákazníkov. Topánky, oblečenie, doplnky a iné podobné produkty môžu byť napríklad rozdelené do kategórií na základe pohlavia. Zjednošíte tým zákazníkovi nájdenie toho správneho produktu.
Počet výsledkov na stránku
Ideálny počet je dvadsať výsledkov na stránku. To vám umožní zobraziť značný počet produktov bez toho, aby ste návštevníkov zahltili príliš veľkým množstvom možností.
Popisy
Namiesto jednoduchého uvedenia špecifikácií uveďte jednu alebo dve vety, ktoré opíšu výpis produktov. To vám umožní lepšie osloviť zákazníkov a viac ich motivovať, aby klikli.
Značky
Filtrovanie výsledkov na základe značky vám umožní využiť už vybudovanú lojalitu k značke na podporu predajov vo vašom e-shope.
7. Personalizácia na základe predchádzajúceho správania
Hoci nákupná cesta často začína vyhľadávaním, nie vždy sa končí nákupom. Personalizácia môže zefektívniť interakcie s vyhľadávacím poľom tým, že prispôsobí návrhy a výsledky predchádzajúcemu správaniu každého zákazníka.
S pokročilým vyhľadávacím softvérom môžete využiť predchádzajúce dopyty návštevníkov na personalizáciu ich skúsenosti. Vyhľadávací algoritmus využíva údaje z histórie prehliadania, nákupov alebo správania, aby optimalizoval proces a zobrazil používateľom produkty, ktoré si s najväčšou pravdepodobnosťou kúpia.
Päť príkladov dobrého dizajnu vyhľadávacieho poľa
V tejto časti sa pozrieme na päť e-commerce stránok, ktoré v praxi ukazujú kvalitný dizajn vyhľadávacieho poľa. Každý príklad demonštruje, ako premyslené rozhodnutia v oblasti UX a UI dokážu zrýchliť Product Discovery a urobiť ho pre zákazníkov intuitívnejším.
1. Škoda Auto
E-shop Škoda Auto nemá problém spracovať dopyt, ktorý obsahuje veľkosť požadovaného produktu, a bez problémov nájde 16″ disky Karoq.
2. Acer
Obchod Acer má široké vyhľadávacie pole, ktoré si zákazníci okamžite všimnú. Autocomplete zobrazuje populárne dopyty a produkty a ponúka návrhy ešte predtým, než používateľ začne vyhľadávať.
3. 11teamsports
Ďalšie vyhľadávacie pole s okamžitými návrhmi Autocomplete pre populárne produkty a dopyty. Po napísaní „ars“ používateľ uvidí dresy a merch 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 pre vyhľadávacie pole
- Luigi’s Box
Luigi’s Box vznikol ako riešenie na riešenie výziev spojených s vyhľadávaním na stránke pre e-commerce firmy. V priebehu rokov si získal uznanie na európskom trhu vďaka svojmu inovatívnemu prístupu. - Algolia
Spoločnosť Algolia bola založená v roku 2012 v Paríži a rýchlo rozšírila svoje pôsobenie do San Francisca a ďalších globálnych lokalít. Je známa svojím prístupom orientovaným na vývojárov a získala silnú pozíciu na trhu search-as-a-service. - Elasticsearch
Elasticsearch vznikol v roku 2010 ako vedľajší projekt Shay Banaona. Neskôr sa stal hlavným produktom spoločnosti Elastic, ktorá bola založená v Amsterdame. Odvtedy patrí medzi popredné open-source technológie pre vyhľadávanie. - SearchSpring
SearchSpring bol založený v roku 2007 v Colorado Springs ako reakcia na rastúcu potrebu pokročilých riešení vyhľadávania pre e-commerce. Odvtedy poskytuje služby mnohým značkám a retailovým spoločnostiam. - FactFinder
FactFinder má korene v Nemecku a v oblasti e-commerce vyhľadávania pôsobí od začiatku 2000-tych rokov. Na európskom trhu je známy svojimi robustnými riešeniami pre vyhľadávanie a navigáciu. - Klevu
Klevu pochádza z Fínska a bol založený v roku 2013. Spoločnosť sa zameriava na riešenia riadené AI a postupne rozšírila svoje pôsobenie v Európe aj Severnej Amerike. - Doofinder
Doofinder bol založený v Španielsku v roku 2011 s cieľom zlepšiť zážitok z e-commerce vyhľadávania pre firmy v Európe. Odvtedy rozšíril svoju zákaznícku základňu aj ponuku služieb. - Loop54
Loop54 so sídlom v Štokholme vo Švédsku začal svoju cestu v roku 2011. Zameranie spoločnosti na riešenia riadené AI ju odlišuje na severskom e-commerce trhu.
Záver
Silný dizajn vyhľadávacieho poľa spočíva v dôslednom uplatňovaní správnych osvedčených postupov. Jasné umiestnenie, premyslené rozhodnutia v oblasti UI a podporné UX funkcie, ako sú Autocomplete, tolerancia preklepov a personalizácia, spolu pomáhajú zákazníkom vyhľadávať s istotou a rýchlejšie nachádzať relevantné produkty.
Venujte pozornosť detailom, pretože tieto dizajnové prvky sú kľúčové a môžu zásadne ovplyvniť používateľskú skúsenosť na vašej stránke.
Často kladené otázky
Prečo by som mal na svojom webe riešiť vyhľadávanie?
Kvalitné vyhľadávanie pomáha zákazníkom rýchlejšie nájsť produkty a znižuje mieru opustenia stránky. Efektívny dizajn vyhľadávacieho poľa je kľúčovou súčasťou vyhľadávacieho zážitku. Poskytuje návštevníkom pokročilé funkcie vyhľadávania, ktoré využívajú používateľský vstup aj historické údaje na poskytovanie presných a personalizovaných zhôd produktov. Vďaka tomu vzniká plynulý nákupný zážitok, ktorý znižuje bounce rate, zlepšuje priemerný čas relácie a zvyšuje konverzie.
Ako navrhnúť efektívne vyhľadávacie pole?
Dobrý dizajn vyhľadávacieho poľa by mal byť prispôsobený mobilným zariadeniam, dobre viditeľný a konzistentný na celej webovej stránke. Funkčnosť vyhľadávacieho poľa by mala byť rýchla a mala by ponúkať silné funkcie, ako sú Autocomplete, faceted search, hlasové vyhľadávanie, dynamické filtrovanie, personalizované výsledky vyhľadávania a ďalšie. Hlavným cieľom je urobiť proces vyhľadávania pre používateľa čo najjednoduchší a najprehľadnejší.
Môžem si vytvoriť vlastné vyhľadávacie pole?
Áno, riešenie vyhľadávacieho poľa pre vašu webovú stránku je možné vytvoriť. V skutočnosti máte niekoľko možností. Môžete napríklad použiť verejné knižnice, open-source technológie, Elasticsearch, plug-iny a podobne. Ak však chcete pokročilý a výkonný vyhľadávací nástroj, ktorý ponúka množstvo moderných funkcií, Luigi’s Box patrí medzi najlepšie možnosti.
Súvisiace články a stránky
Pokiaľ vás tento obsah zaujal, prečítajte si ďalšie články o podobných témach a objavte viac zo sveta e-commerce a Luigi’s Boxu.
Filip Kubelka vedie produktový marketing v Luigi's Boxe. Jeho zázemie je v oblasti prekladateľstva a práve to formuje jeho pohľad na vyhľadávanie: na presnosti záleží a slová, ktoré používate na opis problému, zvyčajne prezradia, či mu skutočne rozumiete. Píše o tom, s čím sa e-commerce tímy skutočne trápia v oblasti vyhľadávania a objavovania produktov.
Viac príspevkov od tohto autora