Wstęp
Funkcja wyszukiwania jest najważniejszym elementem projektu witryn mających dużą ilością treści. Dla użytkowników korzystających z rozbudowanych witryn, bardzo pomocna jest dobra wyszukiwarka, która pomaga im znaleźć to, czego potrzebują.
Funkcja wyszukiwania składa się z dwóch podstawowych elementów: pola, które umożliwia wprowadzanie tekstu oraz przycisku zatwierdzającego. Paski wyszukiwania mogą wydawać się czymś banalnie prostym, w rzeczywistości proces ich projektowania wymaga wielkiego wysiłku i pracy.
To, co stoi między tobą a twoim sukcesem, może być czymś tak prostym, jak projekt okienka wyszukiwania w witrynie.
Skonsultowaliśmy się z naszym doświadczonym zespołem ds. produktów, by uzyskać cenne wskazówki dotyczące ulepszania funkcji wyszukiwania w witrynie. Omówimy najlepsze praktyki w zakresie projektowania UX i UI, zaprezentujemy przykładowe strony internetowe i przedstawimy narzędzia programowe, które mogą pomóc w optymalizacji wyszukiwania w witrynie.
Co to jest pasek wyszukiwania?
Pasek wyszukiwania to element interfejsu, który umożliwia użytkownikom wprowadzanie zapytań i pobieranie wyników z bazy danych, strony internetowej lub aplikacji. Zazwyczaj składa się z pola tekstowego i przycisku inicjującego wyszukiwanie.
Pasek wyszukiwania jest ważny
Według Forbes Insiderokoło 61% osób korzystających ze stron internetowych oczekuje, że znajdzie to, czego szuka w ciągu pięciu sekund. Jeśli nie mogą tego znaleźć, opuszczają stronę i idą na inną.
Wyobraź sobie, że odwiedzasz stronę internetową sprzedającą tenisówki i chcesz kupić konkretny model. Czy przeglądałbyś całą witrynę, by znaleźć ten model? Prawdopodobnie nie. Bardziej prawdopodobne jest, że wpiszesz nazwę/typ modelu w polu wyszukiwania, naciśniesz enter i voila – znalazłeś to, czego szukałeś.
Ale co, jeśli pasek wyszukiwania nie jest zaprojektowany efektywnie? Badania przeprowadzone przez Baymard pokazują, że 39% witryn e-commerce ma poważne problemy z funkcjonalnością wyszukiwania. Podkreśla to znaczenie dobrze zaprojektowanej funkcji wyszukiwania, która jest często pomijana, ale ma kluczowe znaczenie dla płynnego doświadczenia użytkownika.
Projekt i funkcjonalność pasków wyszukiwania odgrywa kluczową rolę w osiągnięciu sukcesu przez witryny e-commerce. Paski nie tylko pomagają użytkownikom znaleźć dokładnie to, czego szukają, ale także inspirują w sytuacji, gdy klienci nie mają konkretnych planów zakupowych.
Funkcja wyszukiwania na stronie internetowej jest niedocenianym elementem designu. Według naszych badań:
2x
Osoby korzystające z wyszukiwania są dwukrotnie bardziej skłonne do dokonania zakupu niż osoby korzystające z nawigacji.
50%
Wyszukiwanie odpowiada za około 50% przychodów sklepu internetowego.
73%
Sklepy internetowe mające pracownika zajmującego się optymalizacją wyszukiwania odnotowują 73% wzrost przychodów.
58%
58% sprzedawców e-commerce analizuje swoje statystyki wyszukiwania, ale nie podejmuje na ich podstawie żadnych działań.
Najlepsze praktyki UI w projektowaniu paska wyszukiania
W tej sekcji są omówione najlepsze praktyki dotyczące projektowania dobrej jakości paska wyszukiwania w witrynie.
1. Stwórz design zorientowany na urządzenia mobilne
Użytkownicy mobilni stanowią ponad 50% ruchu internetowego na całym świecie, a liczba ta stale rośnie z roku na rok. Biorąc pod uwagę ten trend, priorytetowe znaczenie ma projektowanie paska wyszukiwania z myślą o urządzeniach mobilnych.
Projekt UX paska wyszukiwania powinien być opracowany z uwzględnieniem wielkości ekranu mobilnego. Umieszczenie paska powinno być widoczne i łatwo dostępne przy najmniejszym ruchu kciuka. Przyklejony pasek wyszukiwania, który pozostaje widoczny na górze lub na dole strony internetowej, gdy odwiedzający przewijają stronę jest również doskonałą funkcją dla urządzeń mobilnych.
2. Zapewnij widoczność
Nie zmuszaj odwiedzających Twoją stronę do szukania paska wyszukiwania. Niektórzy projektanci popełniają błąd polegający na ukrywaniu opcji wyszukiwania w przycisku menu lub powodują, że pole wyszukiwania nie jest wystarczająco widoczne.
Ważne jest, aby pokazać całe pole do wpisania tekstu, ponieważ ukrywanie funkcji wyszukiwania za obrazkiem lub logo zmniejsza jej widoczność i zwiększa koszty interakcji.
Upewnij się, że pasek wyszukiwania jest łatwo rozpoznawalny dzięki używaniu ikonki lupy i umieszczeniu przycisku wyszukiwania obok pola wyszukiwania. Możesz również poprawić jego widoczność, używając kolorów tła kontrastujących z motywem witryny.
W przypadku urządzeń mobilnych, użyj przyklejonego paska wyszukiwania w górnej, środkowej części ekranu, aby uzyskać najlepsze wyniki.
3. Zachowaj spójny wygląd całej witryny
Upewnij się, że funkcja wyszukiwania znajduje się w tym samym miejscu w całej witrynie.
Odwiedzający oczekują, że pole wyszukiwania będzie znajdować się w tym samym miejscu i mieć taki sam wygląd, jak na pierwszej odwiedzonej stronie. Jeśli nie jest ono spójne w całej witrynie, może powodować zamieszanie i negatywnie wpływać na współczynniki konwersji.
4. Wprowadź funkcję Autouzupełniania
Czasami odwiedzający mogą nie wiedzieć, czego dokładnie szukają. A niektórzy użytkownicy po prostu nie mają ochoty wpisywać długich terminów wyszukiwania.
Autouzupełnianie to zaawansowana funkcja paska wyszukiwania, która przewiduje zapytania użytkowników i oferuje podpowiedzi na podstawie początkowych danych wejściowych, historii wyszukiwania, bieżącej strony i nie tylko.
Funkcja ta zwiększa zaangażowanie odwiedzających witrynę. Na przykład pojedyncze zapytanie może przynieść wiele wyników wyszukiwania związanych z danymi wejściowymi, takimi jak kategorie produktów i najlepsze marki, czym zwiększa się prawdopodobieństwo konwersji.
Autouzupełnianie oferuje szybką odpowiedź na zapytania użytkowników
Natychmiast informuje użytkowników, że znaleźli się we właściwym miejscu – w Twoim sklepie internetowym – i podejmują właściwe kroki w celu znalezienia pożądanego produktu, który oferujesz i który jest na stanie. Pasek jest też często używany jako szybka nawigacja, aby bezpośrednio przejść do właściwej kategorii produktów w ramach Twojej struktury kategorii. Jego szybkość jest kluczowa, ponieważ kupujący używają go również do ponownego, szybkiego wprowadzania danych do wyszukiwania, zanim przejdą do pełnego procesu wyszukiwania z użyciem filtrowania i sortowania.
5. Dodaj grafiki do wyników
Ważne jest, aby skupić się na interfejsie użytkownika wyników wyszukiwania. Wyświetlanie zdjęć produktów może prowadzić do zwiększenia sprzedaży, ponieważ ludzie często mają wizualne wyobrażenie tego, czego szukają. Gdy kupujący widzą obraz produktu w wynikach wyszukiwania, który pasuje do ich mentalnego obrazu, zwiększa to szanse na sfinalizowanie zakupu.
6. Dołącz tekst zastępczy
Aby pomóc użytkownikom zrozumieć rodzaje zapytań, jakie mogą wprowadzić, warto rozważyć umieszczenie przykładowego wyszukiwanego terminu jako zastępczego w polu wpisywania. Jest to szczególnie przydatne, jeśli użytkownicy mogą wyszukiwać przy użyciu różnych parametrów. HTML5 ułatwia dodawanie tekstu zastępczego do pól wejściowych.
7. Pozostaw słowo kluczowe w polu wyszukiwania
Wyszukiwane słowo kluczowe powinno pozostać widoczne na pasku wyszukiwania po zakończeniu wyszukiwania. Umożliwia to konsumentom edycję lub doprecyzowanie pierwotnego zapytania i ponowne wyszukiwanie, poprawiając ogólne wrażenia użytkownika i zmniejszając współczynnik odrzuceń.
Upewnij się, że pasek wyszukiwania zapamiętuje i wyświetla słowo kluczowe z ostatniego zapytania.
Najlepsze praktyki i wskazówki dotyczące UX wyszukiwania
Skuteczne projektowanie wyszukiwania UX to nie tylko estetyka. Wiele zależy od faktycznej funkcjonalności w witrynie. Oto kilka najlepszych praktyk związanych z technologią wyszukiwania, które pomogą Ci poprawić UX paska wyszukiwania i uzyskać pożądane wyniki.
1. Szybkość
Nikt nie ma czasu, aby czekać, aż strona załaduje wyniki wyszukiwania. Jest to szczególnie ważne w przypadku autouzupełniania.
Szybkość jest najważniejsza by uzyskać dobre doświadczenie, a jeśli odwiedzający nie otrzymają wyników od razu, zamkną okno i dokonają zakupu u konkurencji.
2. Jakość dopasowania
Użytkownik nie zawsze poda właściwe słowo kluczowe. Może popełnić błąd, nie zrozumie kontekstu, użyje synonimów itp. Algorytm narzędzia wyszukiwania powinien być wystarczająco zaawansowany, aby uwzględnić wszystkie czynniki, rozpoznać dokładnie to, czego szuka użytkownik, a następnie zaproponować dopasowane wyszukiwania.
Zdolność wyszukiwarki do zapewnienia doskonałej jakości dopasowania może zdeterminować szybkość, z jaką Twoja firma będzie się rozwijać. Upewnij się więc, że wybierasz wysokiej jakości narzędzie.
3. Wyszukiwanie głosowe
Wyszukiwanie głosowe szybko staje się standardem w branży i jest niezwykle popularne na urządzeniach mobilnych. Zapewnia wygodny sposób pracy dla użytkowników mobilnych.
Ułatwia wyszukiwanie osobom niepełnosprawnym, które nie mogą lub nie są w stanie wpisać zapytania. Wyszukiwanie głosowe jest jedną z najbardziej przydatnych funkcji ułatwiających dostęp, a włączając ją do okna wyszukiwania, udostępniasz swoją firmę większej liczbie odbiorców.
Jesli chcesz włączyć możliwość wyszukiwania głosowego do paska, skorzystaj z ikony mikrofonu zamiast lupy, ponieważ jest ona synonimem funkcji wyszukiwania głosowego.
4. Filtry dynamiczne
Dynamiczne filtry umożliwiają klientom łatwe przeglądanie różnych produktów bez konieczności przeszukiwania tysięcy opcji.
Co więcej, dynamiczne filtry wyszukiwania zwiększają wygodę, automatycznie wyświetlając odpowiednie opcje filtrowania dostosowane do każdej kategorii produktów. Przykładowo, kupujący mogą filtrować gitary basowe według liczby strun, podczas gdy zestawy perkusyjne oferują zupełnie inne opcje filtrowania.
Strony internetowe, które zoptymalizowały swoje listy produktów i filtrowanie, odnotowały prawie czterokrotny spadek współczynnika porzuceń zakupów.
5. Pasek wyszukiwania dla urządzeń mobilnych
Ze względu na to, że coraz więcej osób korzysta ze smartfonów do robienia zakupów, zaawansowane opcje wyszukiwania nie powinny być ograniczone do użytkowników komputerów.
W pełni funkcjonalne formularze wyszukiwania dostępne na stronach urządzeń mobilnych znacznie poprawiają wrażenia wszystkich użytkowników, spełniając ich oczekiwania. Włączenie zaawansowanych funkcji, takich jak korekta literówek, lematyzacja czy autouzupełnianie, może mieć duże znaczenie i zwiększyć szanse na sprzedaż większej liczby produktów.
6. UX wyników wyszukiwania
Kategorie
Dodaj kategorie, aby zawęzić wyniki wyszukiwania i poprawić ogólne wrażenia użytkownika. Na przykład buty, ubrania, akcesoria i inne podobne produkty można podzielić na kategorie według płci. Ułatwi to ludziom znalezienie pożądanych produktów.
Liczba wyników wyświetlanych na stronie
Dwadzieścia wyników na stronę to idealne rozwiązanie. Pozwala to wyświetlić znaczną liczbę produktów bez przytłaczania odwiedzających zbyt wieloma opcjami.
Opisy
Zamiast tylko prezentować parametry produktów, dopisz zdanie lub dwa opisujące listing produktów. Daje to możliwość użycia atrakcyjnego języka i zachęcenia odwiedzających do kliknięcia.
Marki
Filtrowanie wyników oparte na marce pozwala wykorzystać już ustaloną lojalność wobec marki do zwiększenia sprzedaży w witrynie.
7. Personalizacja oparta na wcześniejszym zachowaniu
Mimo że podróż zakupowa często zaczyna się od wyszukiwania, nie zawsze kończy się sprzedażą.
Dzięki zaawansowanemu narzędziu wyszukiwania, takiemu jak Luigi’s Box, możesz wykorzystać wcześniejsze zapytania odwiedzających Twoją stronę, aby spersonalizować ich doświadczenia. Algorytm Luigi’s Box wykorzystuje dane z historii wyszukiwania do optymalizacji procesu, prezentując użytkownikom produkty, które najprawdopodobniej kupią.
Bonus: Twórz lepsze treści
Pamiętaj, że treść jest królem. Atrakcyjna treść może zdziałać cuda w przekonywaniu kupujących do dokonania zakupu. Upewnij się, że wszystkie Twoje produkty zawierają szczegółowe opisy obejmujące najważniejsze funkcje.
Dodatkowo dołącz wysokiej jakości zdjęcia produktów o jednolitych wymiarach. Nie pomijaj informacji o cenach ani tabel rozmiarów. Zawartość witryny jest integralną częścią doświadczenia użytkownika, dlatego priorytetem jest jej jakość i kompletność.
5 przykładów efektywnych projektów paska wyszukiwania
W tej części, przyjrzymy się pięciu witrynom e-commerce o wyjątkowym wyglądzie paska wyszukiwania.
1. Škoda Auto
Sklep internetowy Škoda Auto bez problemu radzi sobie z zapytaniami o rozmiar potrzebnego produktu szybko znajdując felgi Karoq 16″.
2. Acer
Sklep Acer oferuje szeroki pasek wyszukiwania, który klienci natychmiast zauważają. Autouzupełnianie wyświetla popularne zapytania i produkty, pokazując sugestie produktów, zanim użytkownicy wpiszą swoje zapytania.
3. 11teamsports
Kolejny pasek wyszukiwania z natychmiastowymi sugestiami autouzupełniania popularnych produktów i zapytań. Po wpisaniu „ars” użytkownik zobaczy stroje i produkty klubu piłkarskiego Arsenal.
4. KiK
Pasek wyszukiwania na stronie internetowej KiK zawiera tekst zastępczy zachęcający odwiedzającego do skorzystania z wyszukiwania w celu znalezienia pożądanych produktów.
5. Bobcat
Wyszukiwanie Bobcat oferuje prostsze i łatwiejsze do zrozumienia autouzupełnianie sugestii. Zawiera rotacyjne zapytania, dając użytkownikowi pomysły na to, czego mogą szukać.
Najlepsze narzędzia paska wyszukiwania
1. Luigi’s Box
Luigi’s Box powstało jako rozwiązanie mające na celu sprostanie wyzwaniom związanym z wyszukiwaniem w witrynie dla firm zajmujących się handlem elektronicznym. Z biegiem lat zyskał uznanie na rynku europejskim za swoje nowatorskie podejście.
2. Algolia
Założona w 2012 roku w Paryżu, Algolia szybko rozszerzyła swoją działalność na San Francisco i inne lokalizacje na całym świecie. Jest znana ze swojego podejścia zorientowanego na deweloperów i zapewniła sobie silną pozycję na rynku usług wyszukiwania.
3. Elasticsearch
Powstały jako projekt poboczny w 2010 roku przez Shaya Banona, Elasticsearch stał się później głównym produktem Elastic, firmy założonej w Amsterdamie. Od tego czasu stał się wiodącą marką w dziedzinie technologii wyszukiwania open source.
4. SearchSpring
Założona w 2007 roku w Colorado Springs firma SearchSpring powstała w odpowiedzi na rosnące zapotrzebowanie na zaawansowane technologie wyszukiwania w e-commerce. Od tego czasu obsługuje wiele marek i sprzedawców detalicznych.
5. FactFinder
Wywodząca się z Niemiec firma FactFinder działa w branży wyszukiwania e-commerce od początku XXI wieku. Jest rozpoznawalna na rynku europejskim dzięki sprawdzonym rozwiązaniom wyszukiwania i nawigacji.
6. Klevu
Pochodząca z Finlandii firma Klevu została założona w 2013 roku. Koncentrując się na rozwiązaniach opartych na sztucznej inteligencji, firma rozszerzyła swoją obecność w Europie i Ameryce Północnej.
7. Doofinder
Założona w Hiszpanii w 2011 r. firma Doofinder miała na celu poprawę jakości wyszukiwania w handlu elektronicznym dla firm w całej Europie. Od tego czasu firma powiększyła swoją bazę klientów i rozszerzyła ofertę.
8. Loop54
Loop54 z siedzibą w Sztokholmie w Szwecji rozpoczęła swoją działalność w 2011 roku. Firma koncentruje się na rozwiązaniach opartych na sztucznej inteligencji, co wyróżnia ją na skandynawskim rynku e-commerce.
Wnioski
Zaprojektowanie paska wyszukiwania na stronie internetowej to sztuka, ale jeśli zostanie wykonane prawidłowo, może zwiększyć współczynnik konwersji i pomóc w rozwoju firmy. Nie ignoruj takich drobiazgów, ponieważ są one niezbędne i mogą wpłynąć na wrażenia użytkownika.
Projekt UX paska wyszukiwania powinien być wykonany z uwzględnieniem urządzeń mobilnych i powinien traktować priorytetowo wyjątkową funkcjonalność urządzenia. Upewnij się więc, że wybierasz przyszłościowe i szybkie narzędzie wyszukiwania, które oferuje zaawansowane funkcje, takie jak wyszukiwanie fasetowe, wyszukiwanie spersonalizowane, autouzupełnianie i inne.
Najczęściej zadawane pytania
Dlaczego powinienem mieć wyszukiwarkę w mojej witrynie?
Ogólnie rzecz biorąc, 73% sklepów internetowych, które wdrożyły funkcję wyszukiwarki, odnotowało wzrost przychodów. Dzięki niej, odwiedzający witrynę mogą korzystać z zaawansowanych funkcji wyszukiwania, które uwzględniają dane wejściowe użytkownika i dane archiwalne oraz zapewniają dokładne i spersonalizowane dopasowanie produktów. Tworzy to płynne doświadczenie zakupowe, które zmniejsza współczynnik odrzuceń, poprawia średni czas sesji i zwiększa konwersje.
Jak zaprojektować efektywną wyszukiwarkę?
Dobry projekt paska wyszukiwania powinien być przyjazny dla urządzeń mobilnych, widoczny i spójny w całej witrynie. Funkcjonowanie pola wyszukiwania powinno być szybkie i oferować zaawansowane funkcje, takie jak autouzupełnianie, wyszukiwanie fasetowe, wyszukiwanie głosowe, dynamiczne filtrowanie, spersonalizowane wyniki wyszukiwania i inne. Zrób wszystko, by proces wyszukiwania był dla użytkownika jak najprostszy.
Czy mogę utworzyć własny pasek wyszukiwania?
Możliwe jest stworzenie własnego paska wyszukiwania na stronie internetowej. W rzeczywistości masz kilka opcji. Możesz na przykład zdecydować się na biblioteki publiczne, technologie open source, Elasticsearch, wtyczki itp. Jeśli jednak potrzebujesz zaawansowanego, wysoce funkcjonalnego narzędzia wyszukiwania, które oferuje wiele nowoczesnych funkcji, Luigi’s Box jest jednym z najlepszych rozwiązań.