Úvod
Funkce vyhledávání je klíčovým prvkem designu webových stránek s bohatým obsahem. Uživatelé se spoléhají na funkci vyhledávání, aby našli to, co potřebují, když narazí na obsahově poměrně komplexní web.
Funkce vyhledávání se skládá ze dvou základních prvků: vstupního pole, které umožňuje zadat text, a tlačítka pro odeslání. I když se vyhledávací panely mohou zdát jako jednoduchý nástroj, proces návrhu vyžaduje rozsáhlý výzkum a pozornost.
To, co stojí mezi vámi a vaším úspěchem, může být koneckonců něco tak jednoduchého, jako je design vyhledávacího pole webu.
Poradili jsme se s naším zkušeným produktovým týmem, abychom vám poskytli cenné tipy pro vylepšení funkčnosti vyhledávání na webu. Představíme vám osvědčené postupy pro návrh UX a UI, ukážeme příkladné webové stránky a představíme softwarové nástroje, které vám mohou pomoci optimalizovat vyhledávání na webu.
Co je vyhledávací panel
Vyhledávací panel je součást rozhraní, která umožňuje uživatelům zadávat vyhledávací dotazy a získávat výsledky z databáze, webové stránky nebo aplikace. Obvykle se skládá z textového vstupního pole a tlačítka pro zahájení vyhledávání.
Proč je vyhledávací pole důležité
Podle Forbes Insider, očekává zhruba 61% návštěvníků webu, že najdou, co hledají, do 5 sekund. Pokud to nenajdou, opustí web a půjdou hledat jinam.
Představte si, že navštívíte webové stránky, kde se prodávají tenisky, a vy jste si vyhlédli konkrétní model. Procházeli byste celou webovou stránku, dokud byste tento model nenašli? Pravděpodobně ne. Spíše byste zadali název/typ modelu do vyhledávacího pole, stiskli enter a sláva – našli jste, co hledáte.
Ale co když vyhledávací panel není navržen efektivně? Výzkum společnosti Baymard ukazuje, že 39 % webů e-shopů se potýká s výraznými problémy s funkcí vyhledávání. To poukazuje na důležitost dobře navržené funkce vyhledávání, která je často přehlížena, ale pro bezproblémový uživatelský zážitek je klíčová.
Design a funkčnost vyhledávacích panelů hrají klíčovou roli v úspěchu e-commerce webů. Nejenže pomáhají uživatelům najít přesně to, co hledají, ale také jim pomáhají, když si nejsou jisti tím, co potřebují.
Funkce vyhledávání na webových stránkách je podceňovaným designovým prvkem. Podle našeho průzkumu:
2x
Lidé, kteří používají vyhledávání, nakupují dvakrát častěji než ti, kteří používají navigaci.
50%
Vyhledávání tvoří přibližně 50 % příjmů e-shopu.
73%
E-shopy, kde se optimalizaci vyhledávání věnuje konkrétní osoba, zaznamenávají 73% nárůst tržeb.
58%
58 % e-shopů analyzuje statistiky vyhledávání, ale nečiní z nich žádné opatření.
Nejlepší postupy pro návrh vyhledávacího pole
Tato část se zabývá nejlepšími postupy pro návrh robustního vyhledávacího panelu na webových stránkách.
1. Vytvořte design zaměřený na mobilní zařízení
Mobilní uživatelé tvoří více než 50 % celosvětové návštěvnosti webu a toto číslo meziročně trvale roste. Vzhledem k tomuto trendu je zásadní upřednostnit design vyhledávacího panelu zaměřený na mobilní zařízení.
Design UX vyhledávacího panelu by měl být vyvíjen s ohledem na prostor mobilní obrazovky. Umístění by mělo být viditelné a snadno dostupné při sebemenším pohybu palce. Výbornou funkcí pro mobilní zařízení je také tzv. sticky search bar, který zůstává viditelný v horní nebo dolní části webové stránky, když návštěvníci rolují.
2. Zajistěte viditelnost
Nenuťte návštěvníky webu vyhledávací panel hledat. Někteří designéři dělají tu chybu, že možnost vyhledávání schovají do tlačítka menu nebo nezajistí, aby bylo vyhledávací pole dostatečně viditelné.
Je důležité zobrazit celé pole s otevřeným textem, protože skrytí funkce vyhledávání za ikonu snižuje její viditelnost a zvyšuje náklady na interakci.
Dbejte na to, aby byl vyhledávací panel snadno rozpoznatelný, a to tak, že použijete ikonu lupy a vedle vyhledávacího pole umístíte tlačítko pro zadání vyhledávání. Jeho viditelnost můžete také zvýšit použitím barev pozadí, které kontrastují s tématem webu.
Pro mobilní zařízení použijte lepící vyhledávací panel v horní střední části obrazovky, abyste dosáhli těch nejlepších výsledků.
3. Udržujte konzistentní design napříč celým webem
Dbejte na to, abyste funkci vyhledávání umístili na stejné místo na celém webu.
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 první stránce, kterou navštívili. Pokud není na celém webu konzistentní, může způsobit zmatek a negativně ovlivnit míru konverze.
4. Implementujte našeptávač
Někdy vaši návštěvníci nemusí přesně vědět, co hledají. A některým uživatelům se prostě nechce zadávat dlouhé vyhledávací výrazy.
Našeptávač je efektivní funkce vyhledávacího panelu, která předpovídá dotazy uživatelů a nabízí jim návrhy na základě jejich počátečního zadání, historie vyhledávání, aktuální stránky a dalších údajů.
Tato funkce otevírá řadu příležitostí, jak návštěvníky webu zaujmout. Jediný dotaz může například přinést více výsledků vyhledávání souvisejících se zadáním, jako jsou kategorie produktů a nejlepší značky, což zvyšuje pravděpodobnost většího počtu konverzí.
Našeptávač poskytuje rychlou zpětnou vazbu k vyhledávacím dotazům
Okamžitě uživatele ujistí, že přišli na správné místo – do vašeho e-shopu – a že jdou správným směrem k nalezení požadovaného produktu – který nabízíte a je skladem. Velmi často se také používá jako rychlá navigace pro přímý přechod na správnou kategorii produktů v rámci vaší struktury kategorií. Jeho rychlost je klíčová, protože ho nakupující využívají také k rychlému opakování vyhledávacích dotazů, než přejdou k vyhledávání s pokročilým filtrováním a tříděním.
5. Přidejte do výsledků obrázky
Je třeba se zaměřit na uživatelské rozhraní výsledků vyhledávání. Zobrazování obrázků produktů může přispět ke zvýšení prodeje, protože lidé mají často vizuální představu o tom, co hledají. Když nakupující uvidí ve výsledcích vyhledávání obrázek produktu, který odpovídá jejich představě, zvýší se tím šance na dokončení nákupu.
6. Zařaďte zástupný text
Abyste uživatelům pomohli pochopit, jaké typy vyhledávacích dotazů mohou zadávat, zvažte možnost zahrnout do vstupního pole vzorový vyhledávací výraz jako zástupný text. To je užitečné zejména v případě, že uživatelé mohou vyhledávat pomocí různých parametrů. HTML5 usnadňuje přidávání zástupného textu do vstupních polí.
7. Ponechte klíčové slovo v poli
Klíčové slovo by mělo zůstat viditelné ve vyhledávacím poli i po dokončení vyhledávání. Spotřebitelé tak mohou upravit nebo upřesnit svůj původní dotaz a vyhledávat znovu, což zlepšuje celkový uživatelský zážitek a snižuje míru odchodu z vyhledávání.
Ujistěte se, že si design vyhledávacího řádku pamatuje a zobrazuje klíčové slovo z posledního dotazu.
Osvědčené postupy a tipy pro UX vyhledávání ve vašem e-shopu
Osvědčené postupy UX pro design vyhledávacího panelu
Design vyhledávacího panelu není jen o vizuální estetice. Hodně záleží na funkčnosti vyhledávání na vašem webu. Zde je šest vylepšení souvisejících s technologiemi, která byste měli zvážit, abyste zlepšili design vyhledávacího panelu.
1. Rychlost
Lidé nemají čas. Nechtějí dlouho čekat, než se na vašem webu načtou výsledky vyhledávání. To platí zejména v případě automatického dokončování.
Rychlost je pro uživatelský zážitek naprosto zásadní, a pokud návštěvníci nedostanou výsledky ihned, zavřou okno a nakoupí u někoho jiného.
2. Kvalita shody
Ne vždy uživatel zadá přesnou shodu s klíčovým slovem. Může se jednat o překlep, chybějící záměr hledání nebo kontext, použití synonym a podobně. Algoritmus vyhledávacího nástroje by měl být dostatečně sofistikovaný, aby zohlednil všechny faktory, rozpoznal, co přesně uživatel hledá, a poté poskytl přesné shody.
Schopnost vyhledávacího nástroje poskytovat vynikající kvalitu shody hraje důležitou roli při zajišťování rychlosti růstu vašeho podnikání, proto se ujistěte, že jste se rozhodli pro kvalitní vyhledávací nástroj.
3. Hlasové vyhledávání
Hlasové vyhledávání představuje pro uživatele pohodlný způsob vyhledávání produktů, zejména na mobilních zařízeních.
Je také výhodné pro osoby se zdravotním postižením, pro které může být psaní na klávesnici náročné nebo nemožné.
Aby bylo snadno rozpoznatelné, připojte ikonu mikrofonu, která bude hlasové vyhledávání symbolizovat.
4. Dynamické filtry
Dynamické filtry umožňují zákazníkům bez námahy procházet různé produkty, aniž by se museli složitě probírat tisíci možností.
Dynamické filtry navíc zvyšují pohodlí vyhledávání tím, že automaticky zobrazují relevantní možnosti filtrování přizpůsobené každé kategorii produktů. Zákazníci mohou například filtrovat baskytary podle počtu strun, zatímco bicí soupravy nabízejí zcela jiné možnosti filtrování.
Webové stránky, které optimalizovaly výpisy produktů a filtrování, zaznamenaly téměř čtyřnásobné snížení míry opuštění vyhledávání.
5. Mobilní vyhledávací panel
Vzhledem k tomu, že stále více lidí se při nakupování spoléhá na používání chytrých telefonů, nemělo by být pokročilé vyhledávání omezeno pouze na uživatele počítačů.
Plnohodnotné vyhledávací nástroje přístupné na mobilních webových stránkách výrazně zlepšují zážitek všech uživatelů, protože splňují jejich očekávání. Začlenění pokročilých funkcí, jako je oprava překlepů, lemmatizace nebo automatické vyplňování, může přinést značné výhody a zvýšit vaše šance na prodej většího množství zboží.
6. UX výsledků vyhledávání
Kategorie
Přidáním kategorií zúžíte výsledky vyhledávání a zlepšíte celkový uživatelský zážitek. Například boty, oblečení, doplňky a další podobné produkty lze rozdělit do kategorií podle pohlaví. To lidem usnadní vyhledávání požadovaných produktů.
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čí prodejem.
S pokročilým vyhledávacím nástrojem, jako je Luigi’s Box, můžete využít minulé dotazy návštěvníka k personalizaci jeho zážitku. Algoritmus Luigi’s Boxu využívá data z historie vyhledávání k optimalizaci procesu a uživatelům představuje produkty, které si s největší pravděpodobností koupí.
Bonus: Vytvářejte lepší obsah
Pamatujte, že obsah je rozhodující. Přesvědčivé texty dokáží zázraky a přesvědčí nakupující k nákupu. Ujistěte se, že všechny vaše produkty obsahují podrobné popisy pokrývající podstatné vlastnosti.
Navíc vkládejte kvalitní obrázky produktů s jednotnými rozměry. Neopomíjejte informace o cenách nebo tabulky velikostí. Obsah vašich webových stránek je nedílnou součástí uživatelského zážitku, proto upřednostněte jeho kvalitu a úplnost.
5 příkladů efektivního designu vyhledávacího panelu
V této části se podíváme na pět webů elektronických obchodů s výjimečným designem vyhledávacího panelu.
1. Škoda Auto
E-shop Škoda Auto si bez problémů poradí s dotazem, který obsahuje velikost požadovaného produktu, a bez problémů najde 16″ disky na Karoq.
2. Acer
Obchod Acer nabízí široký vyhledávací panel, kterého si zákazníci okamžitě všimnou. Našeptávač zobrazuje oblíbené dotazy a produkty a nabízí návrhy produktů ještě předtím, než uživatelé zadají svůj dotaz.
3. 11teamsports
Další vyhledávací panel s okamžitými návrhy našeptávače, který nabízí oblíbené produkty a dotazy. Po zadání „ars“ se uživateli zobrazí soupravy a zboží fotbalového klubu Arsenal.
4. KiK
Vyhledávací panel na webových stránkách KiK je vybaven zástupným textem, který návštěvníka vyzývá, aby použil vyhledávání k nalezení požadovaných produktů.
5. Bobcat
Vyhledávání Bobcat poskytuje návrhy našeptávače přímočařejším a srozumitelnějším způsobem. Obsahuje rotující dotazy, které uživateli poskytují nápady, co hledat.
Nejlepší nástroje pro vyhledávací pole
1. Luigi’s Box
Luigi’s Box vznikl s cílem vyřešit problémy s vyhledáváním na webových stránkách pro e-shopy. V průběhu let získal na evropském trhu uznání díky svému inovativnímu přístupu.
2. Algolia
Společnost Algolia byla založena v roce 2012 v Paříži a rychle rozšířila svou působnost do San Francisca a dalších světových lokalit. Je známá svým přístupem zaměřeným na vývojáře a zajistila si silnou pozici na trhu vyhledávání jako služby.
3. Elasticsearch
Služba Elasticsearch vznikla v roce 2010 jako vedlejší projekt Shaye Banona a později se stala hlavním produktem společnosti Elastic, která byla založena v Amsterdamu. Od té doby se stal přední značkou v oblasti open-source vyhledávacích technologií.
4. SearchSpring
Společnost SearchSpring byla založena v roce 2007 v Colorado Springs a začala reagovat na rostoucí potřebu pokročilých řešení vyhledávání v e-commerce. Od té doby slouží mnoha značkám a maloobchodníkům.
5. FactFinder
Společnost FactFinder, jejíž kořeny sahají do Německa, působí v oblasti vyhledávání v e-commerce od počátku roku 2000. Na evropském trhu je uznávána pro svá robustní vyhledávací a navigační řešení.
6. Klevu
Společnost Klevu, pocházející z Finska, byla založena v roce 2013. Společnost se zaměřuje na řešení založená na umělé inteligenci a rozšířila své působení v Evropě a Severní Americe.
7. Doofinder
Společnost Doofinder byla založena ve Španělsku v roce 2011 a jejím cílem bylo zlepšit vyhledávání v e-shopech pro firmy v celé Evropě. Od té doby rozšířila svou zákaznickou základnu a rozšířila svou nabídku.
8. Loop54
Loop54 se sídlem ve švédském Stockholmu zahájil svou činnost v roce 2011. Zaměření společnosti na řešení založená na umělé inteligenci ji vyneslo do popředí na severském trhu elektronického obchodování.
Závěr
Pokud je design vyhledávání na webových stránkách správně navržen, může vést k vyšší míře konverze a podpořit růst firmy. Věnujte pozornost detailům, protože tyto prvky designu jsou klíčové a mohou uživatelský zážitek z webu buď zlepšit, nebo zničit.
Je důležité zaměřit se prioritně na design UX vyhledávacího panelu s přístupem zaměřeným na mobilní zařízení, soustředit se na vynikající funkčnost a zvolit pokrokový a rychlý vyhledávací nástroj, který poskytuje robustní funkce, jako je fasetové vyhledávání, personalizované vyhledávání, našeptávač a další.
Často kladené otázky
Proč bych měl mít na svých webových stránkách řešení pro vyhledávání?
Celkově 73 % e-shopů, které implementovaly funkci vyhledávače, zaznamenalo zvýšení tržeb. Funkce vyhledávače poskytuje návštěvníkům vašich webových stránek pokročilou funkci vyhledávání, která využívá vstupy uživatelů a historii dat a poskytuje přesné a personalizované vyhledávání produktů. To vytváří hladký nákupní zážitek, který snižuje míru okamžitého opuštění, zlepšuje průměrnou dobu relace a zvyšuje konverze.
Jak navrhnout efektivní vyhledávací pole?
Dobrý design vyhledávacího panelu by měl být vhodný pro mobilní zařízení, viditelný a konzistentní na celém webu. Funkce vyhledávacího pole by měla být rychlá a musí nabízet výkonné funkce, jako je našeptávač, fasetové vyhledávání, hlasové vyhledávání, dynamické filtrování, personalizované výsledky vyhledávání a další. Zaměřte se prostě na to, aby byl proces vyhledávání pro uživatele co nejjednodušší a nejpříjemnější.
Mohu vytvořit vlastní vyhledávací pole?
Pro své webové stránky si můžete vyhledávací panel vytvořit. Ve skutečnosti máte několik možností. Můžete se například rozhodnout pro veřejné knihovny, open-source technologie, Elasticsearch, pluginy a podobně. Pokud však chcete pokročilý vysoce funkční vyhledávací nástroj, který nabízí řadu vyspělých funkcí, je Luigi’s Box jednou z nejlepších variant.