Perfektní design vyhledávacího pole: jak na UI/UX

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

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:

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

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í

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