Wyniki wyszukiwania to jeden z tych widoków, które zwykle działają „same”, więc łatwo je zostawić na domyślnych ustawieniach. Problem w tym, że kiedy użytkownik już z tej wyszukiwarki korzysta, to zazwyczaj naprawdę czegoś szuka. I właśnie wtedy domyślny, przypadkowy widok zaczyna boleć.
Bo jeśli ktoś wpisuje frazę w wyszukiwarce na stronie, to nie jest przypadkowym klikaczem. To użytkownik z intencją. A skoro ma intencję, to warto mu pokazać wyniki w sposób czytelny, spójny i normalnie zaprojektowany.
W Divi 5 da się zrobić własny szablon wyników wyszukiwania bez wtyczki i bez traktowania tego widoku jak technicznego dodatku. To bardzo dobry temat do serii „Zrób to w Divi 5”, bo znowu chodzi o jeden konkretny template, który robi jedną konkretną robotę.
W tym poradniku zrobisz prosty szablon Search Results krok po kroku.
Po co w ogóle robić własną stronę wyników wyszukiwania
Bo wyszukiwarka na stronie ma sens tylko wtedy, gdy da się z niej wygodnie korzystać.
Jeśli użytkownik wpisze hasło i trafia na:
-
przypadkowy układ,
-
źle sformatowaną listę,
-
zbyt mało czytelne wyniki,
-
albo stronę, która wygląda jak z innego motywu,
to samo pole wyszukiwania niewiele pomaga.
Dobra strona wyników wyszukiwania robi trzy rzeczy:
-
potwierdza, czego użytkownik szukał,
-
pokazuje wyniki w prosty sposób,
-
daje jasny kierunek, co zrobić dalej, jeśli wyników jest mało albo nie ma ich wcale.
To nie musi być rozbudowany system wyszukiwania. W większości projektów wystarczy porządny template.
Kiedy taki szablon robi największą różnicę
Najbardziej wtedy, gdy:
-
masz blog,
-
masz więcej podstron lub treści,
-
użytkownicy realnie korzystają z wyszukiwarki,
-
chcesz spiąć wyniki z resztą projektu.
Jeśli strona jest bardzo mała, ten widok nie będzie używany często. Ale jeśli masz już blog, archiwa, single posty i content, to wyszukiwarka przestaje być dodatkiem. Staje się kolejną częścią całego systemu.
Zanim wejdziesz do buildera
Najpierw ustal dwie rzeczy:
-
jak mają wyglądać pojedyncze wyniki,
-
co użytkownik ma zobaczyć, gdy wyników nie będzie.
To ważne, bo Search Results to tak naprawdę dwa widoki:
-
są wyniki
-
nie ma wyników
Jeśli nie zaplanujesz obu, połowa roboty zostanie niedomknięta.
Krok 1 — otwórz Theme Builder
Wejdź do:
Divi → Theme Builder
To właśnie tam powinien powstać szablon wyników wyszukiwania. Tak samo jak wcześniej:
-
footer,
-
single post,
-
archiwum kategorii,
-
strona 404.
Tu też nie budujesz zwykłej podstrony, tylko widok systemowy, który ma działać automatycznie dla określonego typu sytuacji.
Krok 2 — dodaj nowy template dla Search Results
Dodaj nowy template i wybierz warunek dla:
Search Results
To najważniejszy moment, bo od tej chwili możesz potraktować stronę wyników wyszukiwania jak normalny, projektowany element serwisu, a nie przypadkowy ekran WordPressa.
Krok 3 — zacznij od prostego nagłówka strony
Na górze szablonu dodaj sekcję z nagłówkiem.
Najprostszy układ:
-
tytuł,
-
krótki opis lub lead.
Dobrze działa coś w stylu:
Wyniki wyszukiwania
Sprawdź, co znaleźliśmy dla Twojego zapytania.
Albo bardziej konkretnie:
Szukasz czegoś konkretnego?
Poniżej znajdziesz pasujące treści z naszej strony.
Nie musisz robić z tego dużego hero. To nadal ma być widok roboczy, tylko po prostu uporządkowany.
Krok 4 — pokaż, czego użytkownik szukał
To bardzo pomaga orientacyjnie.
Jeśli da się wyświetlić wyszukiwaną frazę, warto to zrobić, bo użytkownik od razu widzi:
-
że system zrozumiał jego zapytanie,
-
że jest w dobrym miejscu,
-
czego dotyczą wyniki.
Dobrze działa prosty wariant typu:
Wyniki dla: „fraza”
To drobiazg, ale bardzo porządkuje cały widok.
Krok 5 — dodaj listę wyników
To serce całego template’u.
Na start najlepiej działa prosty układ listy albo kart, podobny do blogowego listingu:
-
tytuł,
-
excerpt lub krótki opis,
-
link do przejścia dalej,
-
opcjonalnie obrazek wyróżniający.
Jeśli chcesz najbezpieczniejszą wersję, zacznij od prostszej listy. Search Results nie musi wyglądać jak rozbudowana strona magazynowa. Ważniejsze jest to, żeby szybko dało się zeskanować wyniki.
Najczęściej użytkownik chce:
-
zobaczyć, czy coś pasuje,
-
kliknąć,
-
przejść dalej.
Nie trzeba mu tego utrudniać zbyt efektownym układem.
Krok 6 — nie przesadzaj z ilością informacji w jednym wyniku
To częsty błąd.
Kusi, żeby w każdym wyniku pokazać:
-
obrazek,
-
autora,
-
datę,
-
kategorię,
-
excerpt,
-
CTA,
-
breadcrumbs,
-
tagi,
-
czas czytania.
Ale wtedy wynik przestaje być wynikiem wyszukiwania, a zaczyna wyglądać jak ciężka karta contentowa.
Na początek spokojnie wystarczy:
-
tytuł,
-
krótki opis,
-
link.
Opcjonalnie miniatura, jeśli naprawdę pomaga.
Im prostszy układ, tym szybciej użytkownik zeskanuje stronę.
Krok 7 — zadbaj o stan „brak wyników”
To bardzo ważne.
Jeśli ktoś nic nie znajduje, nie możesz zostawić go z pustym komunikatem.
Dobra wersja „brak wyników” powinna:
-
powiedzieć jasno, że nic nie znaleziono,
-
zasugerować kolejny krok,
-
dać alternatywę.
Na przykład:
-
spróbuj innej frazy,
-
wróć na blog,
-
przejdź na stronę główną,
-
użyj formularza kontaktowego.
To właśnie tu Search Results mocno łączy się ze stroną 404. W obu przypadkach użytkownik trafia w ślepy zaułek i trzeba mu pokazać prostą drogę wyjścia.
Krok 8 — dodaj wyszukiwarkę także na stronie wyników
To bardzo sensowny ruch.
Jeśli ktoś wpisał złą albo zbyt wąską frazę, warto dać mu możliwość poprawienia zapytania od razu na tej samej stronie.
To jeden z tych małych detali, które realnie poprawiają użyteczność:
-
użytkownik nie musi wracać,
-
nie musi szukać pola wyszukiwania na nowo,
-
może od razu zmienić frazę.
W praktyce to często ważniejsze niż najbardziej dopracowany wygląd samej listy wyników.
Krok 9 — pilnuj spójności z blogiem i resztą strony
Search Results nie musi wyglądać identycznie jak archiwum bloga, ale powinno być z nim spójne.
Sprawdź:
-
typografię,
-
rytm kart albo listy,
-
wygląd linków i przycisków,
-
spacing,
-
szerokość treści.
Jeśli archiwum kategorii i single post już masz dopracowane, to wyniki wyszukiwania powinny naturalnie wejść w ten sam język wizualny.
Krok 10 — sprawdź wyszukiwanie na telefonie
Na mobile wyniki wyszukiwania mają jeszcze większe znaczenie, bo tam użytkownik zwykle skanuje szybciej i mniej cierpliwie.
Sprawdź:
-
czy wyniki nie są zbyt ciężkie,
-
czy tytuły dobrze się łamią,
-
czy excerpt nie jest za długi,
-
czy pole wyszukiwania nadal jest wygodne,
-
czy kliknięcie kolejnych wyników nie sprawia problemu.
Na telefonie bardzo dobrze działa prosty, pionowy układ. Im mniej kombinowania, tym lepiej.
Co powinno znaleźć się na dobrej stronie wyników wyszukiwania
W pierwszej wersji spokojnie wystarczą:
-
prosty nagłówek,
-
informacja o wyszukiwanej frazie,
-
lista wyników,
-
pole wyszukiwania,
-
stan „brak wyników” z podpowiedzią, co dalej.
To już jest dobry template.
Nie trzeba z tego robić rozbudowanego systemu filtrowania, jeśli celem jest po prostu uporządkowany widok wewnętrznej wyszukiwarki.
Najczęstszy błąd przy budowie Search Results w Divi 5
Najczęstszy błąd nie leży w samym builderze.
Polega na tym, że wyniki wyszukiwania są traktowane jak przypadkowy ekran techniczny, który „jakoś sobie poradzi”.
I wtedy:
-
nie ma kontekstu,
-
nie ma sensownego układu,
-
nie ma planu na brak wyników,
-
nie ma spójności z resztą serwisu.
Lepsza zasada:
to nadal jest część strony, a nie awaryjny widok systemowy.
Jak powinna wyglądać dobra pierwsza strona wyników wyszukiwania
Pierwsza wersja powinna być:
-
prosta,
-
czytelna,
-
szybka do przeskanowania,
-
spójna z blogiem i resztą strony,
-
gotowa zarówno na wyniki, jak i na brak wyników.
To wystarczy.
Wyszukiwarka na stronie nie musi być „zaawansowana”, żeby była użyteczna. Wystarczy, że nie przeszkadza i dobrze prowadzi dalej.