Pole wyszukiwania jest bardzo użyteczną częścią Twojej przeciętnej witryny. Ale to nie znaczy, że należy go zignorować. Przeciwnie.
Wyszukiwanie zapewnia użytkownikom łatwy sposób na znalezienie tego, czego szukają i może być nieoceniony w witrynach z dużą ilością treści. Warto poświęcić dodatkowy czas, aby upewnić się, że obszar wyszukiwania jest atrakcyjny, niezwykły i łatwy w użyciu.
Mając to na uwadze, oto zbiór fragmentów, które przenoszą skromne pole wyszukiwania na wyższy poziom. Obejmują one od prostych, estetycznych ulepszeń CSS po nasycone JS interfejsy użytkownika, które pomagają stworzyć bardziej wciągające wrażenia.
Ikona morfingu
Animacja transformacji to zawsze przyjemność. Tutaj mamy wszechobecną ikonę szkła powiększającego, która po kliknięciu zmienia się w pełny pasek wyszukiwania. Kliknięcie „X” przywraca wszystko do punktu początkowego. Może to być dobre rozwiązanie dla mniejszych ekranów, ponieważ można po prostu zapisać pole, gdy nie jest używane.
Wystarczy najechać myszką i wyszukać
Ten przykład oferuje funkcjonalność podobną do poprzedniej, ale z jedną ważną różnicą. Zamiast klikać, aby wyświetlić pole wyszukiwania, użytkownik musi po prostu najechać kursorem na ikonę. Może to być stosunkowo niewielka rzecz, ale może zwiększyć wydajność, jeśli chodzi o użyteczność. Po raz kolejny potencjalnie solidna opcja do ciasnych przestrzeni.
Przewijacze również muszą wyszukiwać
Na urządzeniach mobilnych użytkownicy mogą odbywać wiele podróży. Ale jeśli nie mogą znaleźć tego, czego szukają, często oznacza to, że będą musieli wrócić do nagłówka witryny, aby przeprowadzić wyszukiwanie. Tutaj mamy „lepki” pasek wyszukiwania, który będzie dołączany u góry ekranu podczas przewijania strony. Ta przydatna funkcja może znacznie ułatwić życie użytkownikom.
Ekran pełen materiałów
Projektowanie materiałów Google jest obecnie bardzo często używane. Dlatego naturalne jest, że język projektowania ma zastosowanie również do wyszukiwania. Fajnie, że po kliknięciu to pole wyszukiwania zajmuje cały ekran. Pozwala to użytkownikom skupić się wyłącznie na wyszukiwaniu, a przy odrobinie pracy projektanci mogą dodawać do ekranu inne powiązane informacje.
Proste wyszukiwanie niestandardowe
Może się zdarzyć, że użytkownicy będą chcieli przeszukiwać tylko określone obszary witryny. Chociaż niestandardowe wyszukiwanie nie jest dokładnie nową koncepcją, nie zawsze było to atrakcyjne wizualnie. To właśnie sprawia, że ta niestandardowa wersja pola wyszukiwania jest tak stylowa. Zawiera szereg ikon, z których każda reprezentuje inny obszar, w którym można przeprowadzić wyszukiwanie (bardziej przydatne podpowiedzi). Użytkownik po prostu klika obszar, który chce wyszukać, proste!
Animacja kontekstowa
Zapewnienie kontekstu wizualnego podczas wyszukiwania pomaga upewnić się, że użytkownicy są na dobrej drodze. Ten fragment wykorzystuje AJAX do zmiany koloru tła i dodawania informacji tekstowych podczas wyszukiwania przez użytkownika.
Przezroczystość
Jak stworzyć obszar wyszukiwania, który wyróżnia się bez wystającego bólu? Jednym ze sposobów jest użycie przezroczystości. Tutaj mamy półprzezroczyste pole wyszukiwania u góry obrazu pełnoekranowego. Biała ramka jest jednak mocna, co daje niezły efekt wizualny bez wyprzedzania strony.
Wyszukiwanie wielokrotne
W przypadku witryn, które pozwalają użytkownikom wyszukiwać więcej niż jeden zestaw danych, ten przykład może być bardzo przydatny. Skorzystaj z jQuery, aby umożliwić użytkownikowi przełączanie się między różnymi polami wyszukiwania, dzięki czemu wszystkie funkcje wyszukiwania będą znajdować się w jednym miejscu.
Koniec się skończył
Pola wyszukiwania mogą odgrywać istotną rolę w utrzymywaniu użytkowników witryny. A powyższe przykłady są dowodem na to, że możesz wprowadzić przydatne ulepszenia bez większego wysiłku. Jeśli więc zaniedbałeś zwracać baczną uwagę na wygląd i działanie funkcji wyszukiwania w witrynie, będzie to doskonałe miejsce na rozpoczęcie.
