Česky
Vyhledávací pole s textovým vstupním polem a tlačítkem v demoshopu Luigi's Box.
Klíčové poznatky
- Vyhledávací pole je významným zdrojem příjmů: zákazníci, kteří používají vyhledávání, mají o 44 % vyšší pravděpodobnost konverze.
- Rychlost a přesnost jsou klíčové: Autocomplete, oprava překlepů a přesné párování dotazů udržují uživatele zapojené.
- Upřednostněte mobile-first design: vyhledávací pole musí zůstat dostupné a konzistentní napříč celým webem.
- Personalizace na základě předchozího chování: předchozí vyhledávání návštěvníků můžete využít k vytvoření osobnější a relevantnější zkušenosti.
Vyhledávací pole je jedním z nejvlivnějších interaktivních prvků na e-commerce stránce. Ovlivňuje, jak zákazníci procházejí váš obchod a jak rychle najdou produkty. Když je interakce s vyhledáváním nejasná, omezená nebo frustrující, uživatelé se nepřizpůsobí. Vyhledávání jednoduše opustí. Proto jsou jak uživatelská zkušenost (UX), tak uživatelské rozhraní (UI) designu vyhledávacího pole klíčové pro konverze.
Tento průvodce představuje praktické osvědčené postupy designu vyhledávacího pole, které zlepšují UX a UI vyhledávání v e-commerce, snižují tření při používání, podporují reálné chování zákazníků a zlepšují Product Discovery i konverze.
Co je vyhledávací pole?
Vyhledávací pole je UI komponenta, která umožňuje uživatelům zadat dotaz a získat výsledky z webové stránky, aplikace nebo databáze. Obvykle obsahuje textové pole pro zadání dotazu a tlačítko nebo akci na klávesnici pro spuštění vyhledávání.
V tomto příkladu z demoshopu Luigi’s Box si můžete všimnout, že vyhledávací pole je rozšířeno o funkci Autocomplete.
Proč je design vyhledávacího pole důležitý pro e-commerce UX a UI?
Design vyhledávacího pole ovlivňuje, jak rychle zákazníci najdou správné produkty a přesunou se k Pokladně. UI přiměje uživatele k interakci. UX zajišťuje, že tato interakce vede k relevantním výsledkům. Když obě složky fungují společně, vyhledávání působí bez námahy, podporuje Product Discovery a pomáhá proměnit návštěvníky s vysokým nákupním záměrem v zákazníky.
Představte si, že navštívíte webovou stránku, která prodává tenisky, a máte vyhlédnutý konkrétní model. Procházeli byste celý web, dokud byste ho nenašli? Pravděpodobně ne. Mnohem pravděpodobnější je, že zadáte název nebo typ modelu do vyhledávacího pole, stisknete enter a najdete přesně to, co hledáte.
Vyhledávací pole na e-commerce stránce je často podceňovaný prvek designu, ale podle našeho vlastního výzkumu:
44%
Zákazníci, kteří používají vyhledávání na stránce, mají o 44 % vyšší pravděpodobnost nákupu.
40%
Funkce vyhledávání tvoří přibližně 40 % celkových příjmů online obchodu a v některých případech může dosáhnout až 90 %.
90%
Většina zákazníků se zaměřuje pouze na výsledky na první stránce.
14%
Přibližně 14 % zákazníků používá vyhledávání na mobilních zařízeních.
Co se však stane, když vyhledávací pole není dobře optimalizované a vede k neúspěšnému vyhledávání? Jak jsme zjistili, poškozuje to Product Discovery i prodeje a zvyšuje míru odchodů ze stránky.
Luigi’s Box exit rate after a failed search statistic
Jaké jsou osvědčené postupy pro design UI vyhledávacího pole?
Design UI vyhledávacího pole spočívá v tom, aby bylo vyhledávání jasné, dostupné a snadno použitelné.
Následující osvědčené postupy zdůrazňují UI prvky, které podporují kvalitní vyhledávání na stránce.
1. Vytvořte design mobile-first
Mobilní obrazovky mění způsob, jakým používáme vyhledávání. Mobilní zákazníci potřebují rychlejší přístup a jasnější zpětnou vazbu. Design vyhledávacího pole by měl být navržen s ohledem na prostor mobilní obrazovky. Umístění by mělo být viditelné a snadno dostupné i při minimálním pohybu palce. Sticky vyhledávací pole, které zůstává viditelné v horní nebo dolní části stránky při scrollování, je také skvělou funkcí pro mobilní zařízení.
Uživatelé mobilních zařízení tvoří více než 50 % celosvětové webové návštěvnosti a tento podíl každoročně roste. Vzhledem k tomuto trendu je upřednostnění mobile-first designu pro vaše vyhledávací pole zásadní.
2. Zajistěte viditelnost
Vyhledávací pole, které je obtížné najít, zvyšuje tření při používání a snižuje zapojení uživatelů. Nenuťte návštěvníky vašeho webu hledat samotné vyhledávání. Někteří designéři dělají chybu, že možnost vyhledávání skryjí do tlačítka menu nebo nezvýrazní vyhledávací pole dostatečně.
Je důležité zobrazit celé otevřené textové pole, protože skrytí vyhledávání za ikonou snižuje jeho viditelnost a zvyšuje náklady na interakci.
Zajistěte, aby bylo vyhledávací pole snadno rozpoznatelné použitím ikony lupy a umístěním tlačítka vyhledávání vedle textového pole. Jeho viditelnost můžete také zvýšit použitím barev pozadí, které kontrastují s designem vašeho webu.
3. Udržujte konzistentní design na celém webu
Ujistěte se, že vyhledávací pole je na celém vašem webu umístěno na stejném místě.
Návštěvníci očekávají, že vyhledávací pole bude na stejném místě a bude mít stejný vzhled jako na domovské stránce, na kterou přišli. Pokud není design na celém webu konzistentní, může to způsobit zmatek a negativně ovlivnit vaše konverzní poměry.
4. Implementujte Autocomplete
Autocomplete pomáhá uživatelům zpřesnit jejich dotazy ještě před odesláním vyhledávání. Někdy návštěvníci přesně nevědí, co hledají. A někteří uživatelé se jednoduše nechtějí vypisovat s dlouhými vyhledávacími výrazy.
Autocomplete ve vyhledávacím poli předpovídá dotazy uživatelů a nabízí návrhy na základě jejich počátečního vstupu, historie vyhledávání, aktuální stránky a dalších faktorů.
Tato funkce otevírá řadu příležitostí, jak zapojit návštěvníky webu. Například jeden dotaz může přinést více výsledků souvisejících se zadaným výrazem, například kategorie produktů nebo top značky. To snižuje námahu a urychluje Product Discovery.
Autocomplete poskytuje uživatelům rychlou zpětnou vazbu na jejich dotazy
Okamžitě uživatele ujistí, že se nacházejí na správném místě, tedy ve vašem e-shopu, a že dělají správné kroky k nalezení požadovaného produktu, který nabízíte a máte skladem. Velmi často se používá také jako rychlá navigace, která umožňuje přímo přejít do správné kategorie produktů ve vaší kategorizační struktuře. Jeho rychlost je zásadní, protože zákazníci jej využívají také k rychlému upravování vyhledávacích dotazů, než přejdou do plného vyhledávání s pokročilým filtrováním a řazením.
Michal Barla
CPO & Co-Founder, Luigi's Box
5. Přidejte obrázky do výsledků
Zobrazení obrázků produktů může zvýšit prodeje, protože zákazníci často mají vizuální představu o tom, co hledají. Když zákazník ve výsledcích vyhledávání uvidí obrázek produktu, který odpovídá jeho představě, je pravděpodobnější, že nákup dokončí.
6. Použijte placeholder text
Dobrý placeholder text nastavuje jasná očekávání. Místo obecného textu použijte formulaci, která naznačí, co mohou uživatelé vyhledávat, například typy produktů, značky nebo akce.
Abyste uživatelům pomohli pochopit, jaké typy vyhledávacích dotazů mohou použít, zvažte přidání ukázkového vyhledávacího výrazu jako placeholderu do vstupního pole. To je zvláště užitečné v případě, že mohou vyhledávat podle různých parametrů. HTML5 umožňuje snadno přidat placeholder text do vstupních polí.
7. Ponechte klíčové slovo ve vyhledávacím poli
Klíčové slovo vyhledávání by mělo zůstat viditelné ve vyhledávacím poli i po načtení výsledků.
Kromě toho by vyhledávací pole mělo vždy uchovat a zobrazovat poslední zadané klíčové slovo uživatele. To umožňuje uživatelům upravit nebo zpřesnit svůj původní dotaz, vyhledat znovu a najít ideální produkt.
Klíčové slovo ve vyhledávacím poli, arcade demo.
Jaké jsou osvědčené postupy pro UX design vyhledávacího pole?
UX design vyhledávacího pole jde dál než jen k tomu, jak vyhledávací pole vypadá. Záleží na tom, jak dobře zkušenost s vyhledáváním podporuje reálné chování zákazníků.
Zde jsou osvědčené postupy, které mohou vyhledávání zefektivnit.
1. Rychlost
Lidé jsou zaneprázdnění. Nechtějí dlouho čekat, než se na vašem webu načtou výsledky vyhledávání. Platí to zejména u funkce Autocomplete.
Rychlost je pro uživatelskou zkušenost zásadní. Pokud návštěvníci nedostanou výsledky okamžitě, zavřou okno a nakoupí jinde.
2. Kvalita shody
Uživatel vám nemusí vždy zadat přesně odpovídající dotaz. Může obsahovat překlep, chybějící záměr vyhledávání nebo kontext.
Algoritmus vyhledávacího nástroje by měl být dostatečně sofistikovaný, aby zohlednil všechny faktory, rozpoznal, co uživatel skutečně hledá, a následně poskytl přesné výsledky vyhledávání. Vyhledávací pole, které toleruje drobné chyby a dokáže se s nimi vypořádat, zvyšuje úspěšnost vyhledávání a snižuje počet stránek bez výsledků.
Někteří uživatelé nemusí používat stejný jazyk jako váš produktový katalog. Synonyma a porozumění přirozenému jazyku pomáhají převést výrazy zákazníků a spárovat jejich dotazy s relevantními výsledky.
3. Hlasové vyhledávání
Hlasové vyhledávání je pohodlný způsob, jak mohou uživatelé najít produkty, zejména na mobilních zařízeních, kde může být psaní pomalé nebo nepohodlné. Pokud víte, že vaši zákazníci často vyhledávají na cestách, může jim funkce hlasového vyhledávání pomoci.
Aby byla snadno rozpoznatelná, přidejte do vyhledávacího pole nebo vedle něj ikonu mikrofonu, která bude reprezentovat hlasové vyhledávání.
Zároveň zlepšuje funkčnost vyhledávání pro uživatele, kteří mohou mít kvůli fyzickým omezením potíže s používáním klávesnice.
4. Dynamické filtry
Dynamické filtry pomáhají zákazníkům zúžit výsledky, aniž by museli začínat znovu, zejména u velkých katalogů. Zvyšují pohodlí tím, že automaticky zobrazují relevantní filtry přizpůsobené jednotlivým kategoriím produktů.
Například basové kytary lze filtrovat podle počtu strun, zatímco bicí soupravy nabízejí zcela jiné možnosti filtrování.
Dynamické filtry se také mění podle kontextu.
Dynamické filtry Luigi’s Box, arcade demo.
5. Mobilní vyhledávací pole
Jak m-commerce nadále roste, funkce vyhledávání by měly fungovat stejně dobře na smartphonech jako na desktopu.
Plnohodnotné vyhledávací formuláře dostupné na mobilních webových stránkách výrazně zlepšují zkušenost pro všechny uživatele tím, že naplňují jejich očekávání. Implementace pokročilých funkcí, jako je oprava překlepů, lematizace nebo autofill, může přinést výrazný rozdíl a zvýšit vaše šance na prodej více produktů.
6. UX výsledků vyhledávání
Kategorie
Přidejte kategorie, které pomohou zúžit výsledky vyhledávání a zlepší celkovou uživatelskou zkušenost. Například boty, oblečení, doplňky a další podobné produkty lze rozdělit do kategorií podle pohlaví. Díky tomu lidé snáze najdou požadované produkty.
Výsledky na stránku
Ideální je dvacet výsledků na stránku. To vám umožní zobrazit dostatečný počet produktů, aniž byste návštěvníky zahltili příliš mnoha možnostmi.
Popisy
Místo pouhého výčtu parametrů uveďte jednu nebo dvě věty, které popisují výpis produktů. To poskytuje příležitost použít působivý jazyk a přimět návštěvníky ke kliknutí.
Značky
Filtrování výsledků podle značek vám umožní využít již vybudovanou loajalitu ke značce a podpořit prodej na vašich webových stránkách.
7. Personalizace na základě předchozího chování
I když nákupní cesta často začíná vyhledáváním, ne vždy končí nákupem. Personalizace může zefektivnit interakce s vyhledávacím polem tím, že přizpůsobí návrhy a výsledky předchozímu chování každého zákazníka.
S pokročilým vyhledávacím softwarem můžete využít předchozí dotazy návštěvníků k personalizaci jejich zkušenosti. Vyhledávací algoritmus využívá data z historie prohlížení, nákupů nebo chování k optimalizaci procesu a zobrazuje uživatelům produkty, které si s největší pravděpodobností koupí.
Zvyšte míru konverze svého e-shopu pomocí personalizovaného vyhledávání na stránce Luigi's Box poháněného AI.
Pět příkladů dobrého designu vyhledávacího pole
V této části se podíváme na pět e-commerce webů, které v praxi ukazují kvalitní design vyhledávacího pole. Každý příklad ukazuje, jak promyšlená rozhodnutí v oblasti UX a UI mohou urychlit Product Discovery a učinit ho pro zákazníky intuitivnějším.
1. Škoda Auto
E-shop Škoda Auto nemá problém zpracovat dotaz obsahující velikost požadovaného produktu a bez problémů najde 16″ disky Karoq.
Vyhledávání disků Karoq o velikosti 16 v oficiálním e-shopu Škoda.
2. Acer
Obchod Acer nabízí široké vyhledávací pole, kterého si zákazníci okamžitě všimnou. Autocomplete zobrazuje populární dotazy a produkty a nabízí návrhy ještě předtím, než uživatelé dokončí zadání vyhledávání.
Vyhledávání s Autocomplete a populárními dotazy v e-shopu Acer.
3. 11teamsports
Další vyhledávací pole s okamžitými návrhy Autocomplete pro populární produkty a dotazy. Po napsání „ars“ uživatel uvidí dresy a merchandise fotbalového klubu Arsenal.
Autocomplete zobrazující populární produkty fotbalového klubu Arsenal.
4. Kik
Vyhledávací panel na webových stránkách Kik zobrazuje zástupný text, který návštěvníka vyzývá, aby použil vyhledávání k nalezení požadovaných produktů.
Vyhledávání výrazu „socks“ v e-shopu kik.de.
5. Bobcat
Vyhledávání v Bobcat poskytuje návrhy našeptávače jednodušším a srozumitelnějším způsobem. Obsahuje rotující dotazy, které uživateli poskytují nápady, co hledat.
Vyhledávací pole s Autocomplete na webu Bobcat Europe.
Nejlepší nástroje pro vyhledávací pole
- Luigi’s Box
Luigi’s Box vznikl jako řešení výzev spojených s vyhledáváním na stránce pro e-commerce firmy. V průběhu let si získal uznání na evropském trhu díky svému inovativnímu přístupu. - Algolia
Společnost Algolia byla založena v roce 2012 v Paříži a rychle rozšířila své působení do San Francisca a dalších globálních lokalit. Je známá svým přístupem orientovaným na vývojáře a získala silnou pozici na trhu search-as-a-service. - Elasticsearch
Elasticsearch vznikl v roce 2010 jako vedlejší projekt Shay Banaona. Později se stal hlavním produktem společnosti Elastic, která byla založena v Amsterdamu. Od té doby patří mezi přední open-source technologie pro vyhledávání. - SearchSpring
SearchSpring byl založen v roce 2007 v Colorado Springs jako reakce na rostoucí potřebu pokročilých řešení vyhledávání pro e-commerce. Od té doby poskytuje služby mnoha značkám a maloobchodním společnostem. - FactFinder
FactFinder má kořeny v Německu a v oblasti e-commerce vyhledávání působí od počátku 2000. let. Na evropském trhu je známý svými robustními řešeními pro vyhledávání a navigaci. - Klevu
Klevu pochází z Finska a byl založen v roce 2013. Společnost se zaměřuje na řešení řízená AI a postupně rozšířila své působení v Evropě i Severní Americe. - Doofinder
Doofinder byl založen ve Španělsku v roce 2011 s cílem zlepšit zkušenost s e-commerce vyhledáváním pro firmy v celé Evropě. Od té doby rozšířil svou zákaznickou základnu i nabídku služeb. - Loop54
Loop54 se sídlem ve Stockholmu ve Švédsku začal svou cestu v roce 2011. Zaměření společnosti na řešení řízená AI ji odlišuje na severském e-commerce trhu.
Závěr
Silný design vyhledávacího pole spočívá v důsledném uplatňování správných osvědčených postupů. Jasné umístění, promyšlená rozhodnutí v oblasti UI a podpůrné UX funkce, jako jsou Autocomplete, tolerance překlepů a personalizace, společně pomáhají zákazníkům vyhledávat s jistotou a rychleji nacházet relevantní produkty.
Věnujte pozornost detailům, protože tyto designové prvky jsou zásadní a mohou rozhodnout o kvalitě uživatelské zkušenosti na vašem webu.
Často kladené otázky
Proč bych měl mít na svých webových stránkách řešení pro vyhledávání?
Kvalitní vyhledávání pomáhá zákazníkům rychleji najít produkty a snižuje míru opuštění stránky. Efektivní design vyhledávacího pole je klíčovou součástí vyhledávací zkušenosti. Poskytuje návštěvníkům webu pokročilé funkce vyhledávání, které využívají uživatelský vstup i historická data k poskytování přesných a personalizovaných shod produktů. Vzniká tak plynulá nákupní zkušenost, která snižuje bounce rate, zlepšuje průměrnou dobu relace a zvyšuje konverze.
Jak navrhnout efektivní vyhledávací pole?
Dobrý design vyhledávacího pole by měl být přizpůsobený mobilním zařízením, dobře viditelný a konzistentní napříč celým webem. Funkčnost vyhledávacího pole by měla být rychlá a měla by nabízet silné funkce, jako jsou Autocomplete, faceted search, hlasové vyhledávání, dynamické filtrování, personalizované výsledky vyhledávání a další. Zaměřte se především na to, aby byl proces vyhledávání pro uživatele co nejjednodušší.
Mohu vytvořit vlastní vyhledávací pole?
Ano, je možné vytvořit řešení vyhledávacího pole pro váš web. Ve skutečnosti máte několik možností. Můžete například využít veřejné knihovny, open-source technologie, Elasticsearch, plug-iny a podobně. Pokud však chcete pokročilý a výkonný vyhledávací nástroj, který nabízí řadu moderních funkcí, Luigi’s Box patří mezi nejlepší možnosti.
