7 najlepszych praktyk w zakresie projektowania i umieszczania pól wyszukiwania

Pole wyszukiwania jest jednym z najważniejszych elementów na stronie internetowej. Niezależnie od tego, jaki rodzaj działalności prowadzisz, posiadanie dobrze zaprojektowanego pola wyszukiwania jest niezbędne, aby odwiedzający mogli łatwo znaleźć to, czego szukają. Nie oznacza to, że wystarczy po prostu dodać funkcję wyszukiwania, nawet nie zastanawiając się, jak to wygląda.

Musisz wziąć pod uwagę funkcjonalność, łatwość obsługi, estetykę, a nawet umiejscowienie pola wyszukiwania. Wszystko po to, abyś mógł poprawić doświadczenia użytkowników na swojej stronie, co może nawet przełożyć się na wzrost konwersji.

Co więc należy zrobić, projektując pole wyszukiwania? Chociaż dokładne zalecenia mogą być subiektywne w zależności od Twoich potrzeb i celów, istnieje kilka ogólnych wskazówek, które mogą się sprawdzić w przypadku różnych typów witryn. Oto kilka sprawdzonych metod projektowania i umieszczania pól wyszukiwania:

1 Wyeksponuj to

Pierwszą i najważniejszą zasadą projektowania pola wyszukiwania jest sprawienie, aby było łatwo zauważalne. Być może jesteś zbyt skupiony na estetyce projektu, tworząc pole wyszukiwania, które wtapia się w resztę witryny. Należy jednak pamiętać, że dodajesz pole wyszukiwania dla osób, które chcą znaleźć coś w Twojej witrynie. Zmuszanie ich do szukania pola wyszukiwania nie ma sensu, a nawet może mieć negatywny wpływ na ich wrażenia.

Nie oznacza to, że musisz całkowicie zrezygnować z estetyki. Wymyśl projekt, który świetnie wygląda w porównaniu z istniejącym projektem witryny, a jednocześnie jest wystarczająco widoczny, aby ludzie go zauważyli. Rozmiar pudełka powinien być duży, ale nie za duży, aby zajmował zbyt dużo miejsca na stronie. A kolor powinien być kontrastowy, ale wciąż uzupełniający się z resztą kolorów użytych na stronie.

Pole wyszukiwania Best Buy jest dobrym przykładem, ponieważ biel kontrastuje z niebieskim kolorem strony, a jednocześnie pasuje do innych kolorów użytych w projekcie strony. Rozmiar pola wyszukiwania nie jest zbyt duży, a jednocześnie wystarczająco widoczny, aby ludzie mogli go natychmiast zauważyć po wejściu na stronę.

2 Podświetl przycisk Prześlij

Jak wspomniano wcześniej, celem pola wyszukiwania jest ułatwienie użytkownikom witryny. Unikaj nadmiernego komplikowania rzeczy za pomocą maleńkich przycisków przesyłania, na których użytkownicy muszą się skupić, aby kliknąć. Wyróżnienie przycisku przesyłania poprawia widoczność samego pola wyszukiwania, a także ułatwia użytkownikom klikanie.

To, czy użyjesz ikony szkła powiększającego, czy przeliterujesz „Prześlij" w przycisku wysyłania, zależy od Ciebie. Skoncentruj się jednak na rozmiarze i kolorze przycisku, aby użytkownicy nie mieli problemu ze znalezieniem go po wpisaniu pole wyszukiwania. Wyjaśnij im, co mają zrobić po wpisaniu tego, czego szukają.

Niektóre witryny posuwają się nawet do tego, że umieszczają tylko ikonę szkła powiększającego, aby odwiedzający mogli coś wyszukać. Może to okazać się bardzo korzystne dla estetyki serwisu, podobnie jak w przypadku Levi’s Strauss. Nie jest to jednak przykład optymalnego projektu pola wyszukiwania.

Chociaż wygląda to dobrze pod względem projektowym, może być niewygodne dla odwiedzających, ponieważ po kliknięciu ikony szkła powiększającego muszą czekać na załadowanie pola wyszukiwania. Może to być frustrujące, zwłaszcza jeśli uzyskujesz dostęp do witryny z miejsca, w którym połączenie jest wolne. Zamiast ładować go osobno, może lepiej rozszerzyć pole wyszukiwania w tym samym miejscu, w którym znajduje się szkło powiększające.

Gdy utkniesz z ograniczoną przestrzenią, ale wyszukiwanie jest ważne, może być fajnie, jeśli wtopi się w górną nawigację. Właśnie to zrobił shralpin na swojej stronie mobilnej.

Z drugiej strony Xero Shoes w ogóle nie ma przycisku wysyłania. Odwiedzający będą musieli wpisać słowo kluczowe w polu wyszukiwania, a następnie nacisnąć Enter, aby wyszukać coś w witrynie. Teraz możesz pomyśleć, że nie jest tak źle po prostu nacisnąć klawisz Enter, aby rozpocząć wyszukiwanie, ale co z resztą odwiedzających? Niektóre z nich mogą specjalnie szukać przycisku wysyłania i mogą mieć trudności z przeprowadzeniem wyszukiwania przy użyciu tego typu projektu.

Przycisk przesyłania Amazon jest dość widoczny w kolorze pomarańczowym, podczas gdy reszta pola wyszukiwania jest biała. Kolor przycisku przesyłania również kontrastuje z ciemniejszym kolorem nagłówka witryny. Więc chociaż używają tylko ikony szkła powiększającego jako przycisku przesyłania, nadal jest ona wyraźnie widoczna w przeciwieństwie do przykładu Levi’s. Upewnij się, że ikona jest wyściełana, ponieważ zwiększy to widoczność.

3 Umieść go tam, gdzie użytkownicy najczęściej patrzą

Trwa debata na temat najlepszego miejsca na umieszczenie pola wyszukiwania na stronie internetowej. Ale jeśli rozejrzysz się po niektórych najpopularniejszych witrynach internetowych, zauważysz, że pola wyszukiwania są często umieszczane w górnej środkowej części lub w prawym górnym rogu strony. Wynika to jasno z badania opublikowanego przez SLI Systems. Analiza wykazała, że ​​54% sprzedawców detalicznych umieszcza pole wyszukiwania w prawym górnym rogu, 30% na środku, a tylko 16% po lewej stronie.

Oznacza to, że odwiedzający mogą spodziewać się pola wyszukiwania w prawym górnym rogu Twojej witryny. Umieszczenie go w nieoczekiwanym miejscu oznacza, że ​​użytkownicy mogą potrzebować dodatkowego wysiłku, aby znaleźć pole wyszukiwania. Mimo to nadal warto badać aktywność odwiedzających za pomocą mapy termicznej lub narzędzia do śledzenia ruchu gałek ocznych. Pomoże Ci to określić, gdzie najprawdopodobniej będą szukać, co pomoże Ci zrozumieć, gdzie należy umieścić pole wyszukiwania w witrynie.

Niezależnie od tego, czy wybierzesz lewą, prawą czy środkową; upewnij się, że jest to góra strony, ponieważ jest to miejsce, w którym użytkownicy są bardziej skłonni do skanowania w pierwszej kolejności zgodnie z badaniem śledzenia ruchu gałek ocznych NN Group. Dobrze byłoby przeprowadzić test A/B różnych miejsc w polu wyszukiwania, a następnie określić która pozycja wydaje się być dla Ciebie najlepsza.

Oto przykład pola wyszukiwania umieszczonego po prawej stronie strony Get Plus Followers.

Pole wyszukiwania serwisu eBay znajduje się na środku strony, gdzie jest dobrze widoczne i jest jedną z pierwszych rzeczy, które odwiedzający zauważą w witrynie.

4 Połącz autouzupełnianie z grafiką

Twoja witryna może należeć do 62,5% użytkowników korzystających z funkcji automatycznego uzupełniania w polu wyszukiwania. Aby zyskać przewagę konkurencyjną, możesz jeszcze bardziej ulepszyć tę funkcję, dodając podgląd obrazu produktu wraz z sugestiami automatycznego uzupełniania w funkcji wyszukiwania. Dzieje się tak dlatego, że tylko 28,2% uczestniczących stron internetowych wdraża obecnie tę funkcję.

Aby jeszcze bardziej uzasadnić automatyczne uzupełnianie grafiką, możesz rzucić okiem na przypadek LED Hut. Po dodaniu podglądu obrazu do autouzupełniania sugestii, dostawcy oświetlenia LED udało się zwiększyć współczynnik konwersji wyszukiwania o 200%. Oto jak to będzie wyglądać po dodaniu podglądu obrazu do sugestii wyszukiwania.

5 Unikaj izolowania lub przepełniania pola wyszukiwania

W pierwszym punkcie wspomniano, jak ważne jest, aby pole wyszukiwania było widoczne. Oznacza to, że należy unikać przepełnienia okolicznych obszarów ikonami lub innymi elementami, które mogą odwracać uwagę odwiedzających od pola wyszukiwania. Polu wyszukiwania należy nadać priorytet i skoncentrować się na nim.Jednocześnie unikaj przesadzania, ponieważ może to spowodować odizolowanie pola wyszukiwania w takim stopniu, że trudno będzie je znaleźć.

Pole wyszukiwania Snow and Rock jest dobrym przykładem dobrze zaprojektowanego pola wyszukiwania. Jak widać na poniższym obrazku, w miejscu, w którym jest umieszczony, nie ma zbyt wielu elementów. Ale nadal możesz go zobaczyć w środkowej lewej części strony i nie jest umieszczony w miejscu, w którym użytkownicy będą mieli trudności ze znalezieniem. Przycisk przesyłania kontrastuje również z resztą kolorów na stronie, dzięki czemu się wyróżnia.

6 Wybierz rozwijane pole wyszukiwania

Jeśli szukasz sposobów na zaoszczędzenie miejsca, a jednocześnie wyeksponowanie pola wyszukiwania dla użytkowników, możesz zdecydować się na rosnące pole wyszukiwania. Jest to idealny wybór dla witryn, w których wyszukiwanie może nie być zbyt istotne, ale nadal chcesz dać użytkownikom możliwość wyszukiwania czegoś. Zamiast dodawać tylko ikonę szkła powiększającego, dodasz obok niej małe pole wyszukiwania, które będzie stanowić wizualną wskazówkę dla odwiedzających witrynę. Gdy użytkownik kliknie pole, pole się rozwinie i umożliwi użytkownikom wprowadzenie potrzebnego terminu.

Oto dobry przykład z Net-a-Porter. Jeśli spojrzysz na prawy górny róg strony, zobaczysz, że pole wyszukiwania jest widoczne, ale niezbyt duże. Istnieje ikona szkła powiększającego, dzięki której użytkownicy mogą rozpoznać, że jest to opcja wyszukiwania.

Ale kiedy klikniesz pole, pole wyszukiwania rozwinie się i wpiszesz wymagane wyszukiwane hasło. To połączenie estetyki i użyteczności jest doskonałe w przypadku witryny, która musi zawierać wiele elementów na stronie głównej, ponieważ pomaga zaoszczędzić miejsce bez uszczerbku dla widoczności pola wyszukiwania.

7 Rozważ dodanie menu rozwijanego

Pole wyszukiwania istnieje dla osób, które już mają pojęcie, czego szukają. Ale co z tymi, którzy nie są zbyt pewni, czego szukają. Możesz mieć funkcję autouzupełniania sugestii, ale dodanie funkcji rozwijanej tuż obok pola wyszukiwania może być dobrym pomysłem w przypadku niektórych witryn. Daje użytkownikom poczucie kierunku i daje im wskazówki, czego szukać.

Ta taktyka okazała się sukcesem dla Casa Mineira, brazylijskiej firmy zajmującej się nieruchomościami. W studium przypadku przeprowadzonym na stronie internetowej zastąpienie standardowego pola wyszukiwania rozwijanymi menu pomogło w wygenerowaniu większej liczby potencjalnych klientów. W rzeczywistości zmiana zaowocowała o 57,25% większą liczbą potencjalnych klientów niż wcześniej.

Powodem, dla którego ta odmiana okazała się tak dobra, jest to, że odwiedzający otrzymali jasną ścieżkę działania i mogli szybko znaleźć to, czego szukają. W poprzednim projekcie odwiedzający musieli być pewni, czego dokładnie szukają. Aby lepiej poprowadzić odwiedzających, postanowili objąć szeroką gamę lokalizacji i rodzajów zakwaterowania.

Należy jednak pamiętać, że ta opcja może nie być najlepsza dla wszystkich typów witryn. Na przykład sklep internetowy może nie być w stanie zwiększyć funkcjonalności wyszukiwania dla odwiedzających korzystających z tej techniki. Ale dla firm z branży nieruchomości i firm usługowych rozwinięta funkcja wyszukiwania może być idealnym rozwiązaniem.

Dolna linia

Dzięki przykładom i wskazówkom możesz teraz lepiej zrozumieć projekt i rozmieszczenie pól wyszukiwania. Więc czego się z tego nauczyłeś? Być może zauważyłeś, że nacisk kładziony jest na wyeksponowanie i widoczność pola wyszukiwania. Oznacza to, że kontrast kolorów, estetyka i rozmiar pola wyszukiwania to jedne z najważniejszych aspektów.

Skoncentruj się na połączeniu funkcjonalności i estetyki, co może nie być łatwe do wykonania. Najlepszą radą, jaką możesz uzyskać, jest przeprowadzenie testów A/B na różnych projektach i pozycjach, jak wspomniano w poprzednich punktach. Masz pytania dotyczące projektowania pola wyszukiwania? Zostaw komentarz poniżej.