Jak stworzyć praktyczną wyszukiwarkę na stronie internetowej?

Wszelkie systemy wyszukiwania zależą przede wszystkim od charakterystyki danego projektu, nie ma uniwersalnego, sztywnego wzorca, który sprawdziłby się wszędzie, dlatego poniższy wpis jest jedynie moją propozycją i inspiracją przygotowaną głównie dla początkujących projektantów i programistów front-end’u.

W tej części skupiam się głównie na desktopowej wersji interfejsu, ze względu na dość duże różnice w dynamice i sposobie korzystania w porównaniu do aplikacji mobilnych.

Czy faktycznie potrzebujesz wyszukiwarki?

Na samym początku warto zastanowić się, czy w projekcie potrzebna jest wyszukiwarka. W wielu miejscach możesz znaleźć informację, że wyszukiwarką jest jedną z pierwszych rzeczy, jakie należy wdrożyć. I rzeczywiście ta teoria mogła mieć swoje uzasadnienie, gdyż komponent wyszukiwania był pewnego rodzaju “must have” każdego portalu, serwisu, forum czy bloga. Wynikało to jednak często ze źle zaprojektowanej architektury informacji.

Teraz w okresie, gdy słowo “UX” nie schodzi nikomu z ust, można zauważyć wzrost jakości nowo powstałych aplikacji mobilnych i internetowych. Dlatego warto na samym początku odpowiedzieć sobie na proste pytania:

• Czy możesz uprościć swoją aplikację do tego stopnia, że nie będzie potrzeby implementowania wyszukiwarki?
• Czy posiadasz wystarczająco dużo treści? Wyszukiwarka nie zwracająca wyników za N razem może okazać się kiepskim pomysłem. W sytuacji, gdy content tworzą użytkownicy, może warto byłoby zostawić jej wdrożenie na później.
• Jeżeli główną zawartością Twojego projektu jest tekst, czy zostosowałeś już odpowiednią kategoryzację lub architekturę informacji?

Pole wyszukiwania

Formularz wyszukiwania może przybrać prostą formę jednego pola lub też działać jako oddzielny komponent z własną podstroną. Bez względu na te różnice, pewne mechanizmy pozostają niezmienione.

• Jeżeli wyszukiwanie będzie miało sens tylko wówczas, gdy zakres będzie globalny, umieść pole szukania w widocznym i łatwo dostępnym miejscu. Obecnie najbardziej zalecany i przyjęty zwyczaj to prawa strona głównego nagłówka lub nawigacji.
• Jeżeli szukanie będzie odbywać się w konkretnym zbiorze, rozważ umieszczenie w pobliżu pola wyszukiwania dodatkowego pola wyboru zbioru, w którym fraza będzie wyszukiwana (np. wybór kategorii ).
• W celu uruchomienia szybszej reakcji poznawczej użytkownika, warto, też w pobliżu pola szukania, umieścić ikonę lupy.
• Po wpisaniu treści zapytania, zatwierdzenie powinno nastąpić zarówno po naciśnięciu na przycisk szukania jak i wciśnięciu klawisza enter na klawiaturze.

• Wyświetlaj autosugestie

• Zadbaj o to, aby pole wyszukiwania było odpowiedniej szerokości a czcionka czytelna.
• Warto przemyśleć zaimplementowanie systemu poprawiania literówek.

Wyświetlanie

• Lista zazwyczaj powinna być wyświetlana domyślnie jeżeli w wyświetlonych pozycjach wyszukujemy tekst, lub pozycje zawierają niestandardowe, wprowadzane przez użytkowników dane.

• Siatka sprawdza się w sytuacjach gdy wyświetlamy tylko ściśle określone pola ( aby proporcje siatki były równe, każda pozycja powinna mieć tę samą szerokość i długość ) lub gdy najbardziej istotnym kryterium wyboru elementu jest zdjęcie.
• Jeżeli projekt tego wymaga, warto dać użytkownikowi możliwość przełączania między różnymi trybami wyświetlania wyników.
• Zadbaj o poprawny komunikat w przypadku braku wyników. Postaraj się zawrzeć w nim informację o tym jaka fraza była szukana, naniesione filtry oraz nazwę zbioru elementów wśród którego było przeprowadzone wyszukiwanie. Możesz też wyświetlić podobne wyniki.
• Jeżeli chcesz uczynić całą powierzchnię wyświetlonego wyniku, klikalnym odnośnikiem do niego, utrudnisz nieco mniej zaawansowanym użytkownikom zaznaczenie kursorem treści wewnątrz. Upewnij się najpierw, że biorąc pod uwagę rodzaj treści jakie prezentujesz, taki scenariusz będzie mieć miejsce jak najrzadziej.
• Jeżeli zdjęcia elementów na Twojej liście zawierają dużo istotnych detali, warto umożliwić powiększenie zdjęcia pozycji poprzez najechanie na nie kursorem.
• Wyświetl liczbę wszystkich elementów jakie udało się znaleźć.
• Jeżeli prezentujesz wyniki w formie listy, wyszczególnij w znalezionej pozycji miejsce w którym znajduje się szukana fraza.
• Pozwól użytkownikowi wybrać ilość pozycji do wyświetlenia na jednej stronie.
• Jeżeli używasz infinite scroll’a, wyświetl komunikat, gdy dalsza część wyników jest aktualnie ładowana.

Filtrowanie

• Filtry są kręgosłupem każdego wyszukiwania, dlatego warto też zadbać o ich prawidłowe działanie.

• Jeżeli filtrów jest bardzo dużo, możesz pokazać tylko te najczęściej używane. Te, które są mocno precyzujące lub rzadziej używane, możesz ukryć, np. pod rozwijalną listą “Zaawansowane”.
• Umieść filtry w dobrze widocznym miejscu, dobrym rozwiązaniem jest, gdy “zjeżdżają” one w dół wraz z przewijaną stroną, aby użytkownik nie musiał cofać się na górę, gdy lista wyników jest długa, a chce poprawić nałożony filtr lub dodać nowy.
• Zadbaj o wizualną reprezentację aktualnego stanu filtrów, oznacz te, które są aktywne.
• Jeżeli masz techniczną możliwość przewidywania ilości wyników po nałożeniu danego filtru, użyj jej i umieść tą informację w stosownym miejscu. Zapobiega to skutecznie przed aktywowaniem filtrów, przez które w efekcie użytkownik otrzyma brak wyników.
• Udostępnij możliwość zresetowania wszystkich filtrów.
• Dla wielu możliwości przedziałów liczbowych ( np. cena ), dodaj możliwość wybrania zakresu od i do.

Dzięki rozwojowi technologii internetowych, filtrowanie może się odbywać dynamicznie, czyli wyniki wyszukiwania przeładowywują się automatycznie po wybraniu filtra. W takim przypadku znika potrzeba umieszczania przycisku aktywującego aktualnie wybrane filtry.

Rozwiązanie to potrafi być wygodne, ale też momentami problematyczne, dlatego zanim zdecydujesz się na taką formę filtrowania, upewnij się co najmniej, że optymalizacja skryptu wyszukiwania jak i serwer są na wystarczającym poziomie, aby obsłużyć tego typu interakcje bez dużych opóźnień. Użytkownik może się lekko zirytować gdy będzie musiał czekać dłuższą chwilę za każdym razem podczas dodawania nowego filtra lub poprawiania istniejącego.

Sortowanie

• Przy wyborze wartości, według których sortowane mają być wyniki, umieść informację czy odbywa się ono rosnąco lub malejąco.

• Dla zwiększenia użyteczności, możesz pokazać na wierzchu najczęściej używane wartości, według których użytkownik może sortować, a resztę umieścić w standardowym polu rozwijalnym.