Filtry w sklepie: klient powinien wiedzieć, dlaczego zostały trzy produkty

W katalogu było sto produktów. Po kilku kliknięciach zostały trzy. Klient pamięta wybór koloru, lecz nie pamięta zaznaczonego wcześniej materiału ani tego, czy sklep nadal pokazuje wyłącznie rzeczy dostępne od ręki. Zamknięty panel wygląda niewinnie. Właśnie tam ukrył się powód nagłego skurczenia oferty.

Filtrowanie jest rozmową o warunkach wyboru. Odbiorca mówi: interesuje mnie to, w tym rozmiarze, do tego zastosowania. Sklep odpowiada zbiorem pasujących rzeczy. Dobry projekt pozwala zrozumieć odpowiedź, zmienić zdanie i odzyskać szerszy obraz. Liczba kontrolek ma mniejsze znaczenie niż zgodność między wyborem człowieka a regułą, którą faktycznie stosuje katalog.

Zanim narysujesz panel, ustal znaczenie wyboru

Nie każda informacja o produkcie nadaje się na filtr. Pole powinno pomagać rozdzielać ofertę w sposób użyteczny dla kupującego. Kolor może mieć znaczenie, lecz wewnętrzny kod kolekcji już niekoniecznie. Rozpocznij od pytań klientów i typowych warunków zakupu. W przeciwnym razie filtr stanie się wystawą wszystkich kolumn, które udało się wyeksportować z systemu.

Rozdziel kategorię produktu od jego cechy. „Lampy stojące” może być miejscem w katalogu, a wysokość i kolor sposobem zawężenia tej grupy. Gdy oba porządki pomieszasz, odbiorca nie będzie wiedział, czy właśnie przeniósł się do nowego działu, czy zmienił zbiór na tej samej stronie. Pomaga wcześniejsza architektura informacji.

Sprawdź, co oznacza kilka zaznaczeń w jednej grupie. Wybór czerwonego i zielonego może oznaczać akceptację dowolnego z tych kolorów. Połączenie dwóch cech wyposażenia może natomiast oznaczać, że produkt ma mieć obie. Sprawdź tę relację osobno dla każdej grupy cech. Zapisz regułę słowami i porównaj ją z rzeczywistym zadaniem klienta.

Shopify w dokumentacji Search & Discovery opisuje domyślne łączenie różnych filtrów warunkiem „i”, a wartości jednego filtra warunkiem „lub”; dla części typów można zmienić to zachowanie. Ten przykład pokazuje, dlaczego wygląd zaznaczeń nie wystarcza do odgadnięcia reguły katalogu.

Nie trzeba umieszczać terminów logicznych w interfejsie. Wystarczą zrozumiałe nazwy i konsekwentne zachowanie. Jeśli wybór dwóch rozmiarów rozszerza zbiór, niech odbiorca widzi wynik tej decyzji. Gdy dołącza kolejną cechę wymagającą spełnienia, zmniejszenie liczby produktów powinno być czytelne i zgodne z jego oczekiwaniem, a nie wyglądać jak awaria listy.

Zwróć uwagę na produkty mające warianty. Rodzina może oferować czerwony mały model oraz zielony duży. Klient wybierający czerwony i duży potrzebuje rzeczywistego połączenia, a nie dwóch cech występujących gdziekolwiek w rodzinie. Uzgodnij, jaki wynik strona ma pokazać i do którego wariantu prowadzić. Rzecz formalnie pasująca do ogólnego opisu może nadal nie nadawać się do zakupu w zamierzonej wersji.

Nazwy wartości wynikają z danych. „Grafit”, „antracyt” i „ciemny szary” nie powinny tworzyć przypadkowej mapy poetyckich synonimów. Nie łącz jednak rzeczywistych różnic tylko po to, żeby skrócić listę. Pracę nad modelem katalogu wykonaj przed dopracowywaniem panelu. Wtedy wiesz, co można sensownie grupować i kto zatwierdza zmianę.

Wynik powinien pamiętać, skąd się wziął

Pokaż aktywne ograniczenia obok listy, także wtedy, gdy sam panel jest zamknięty. Odbiorca ma rozpoznać przyczynę aktualnego zbioru bez ponownego otwierania wszystkich grup. Krótkie etykiety z możliwością usunięcia mogą pomagać, o ile zawierają wystarczający kontekst. Samo „duży” niewiele wyjaśnia, jeżeli duży może być rozmiar, zakres pojemności albo format zestawu.

Rozróżnij usunięcie jednej wartości, wyczyszczenie grupy i zresetowanie całości. Te działania mają inne skutki. „Wyczyść” przy filtrze ceny nie powinno przypadkiem kasować wybranej lokalizacji lub kategorii, jeżeli odbiorca traktuje je jako punkt wyjścia. Nazwa działania powinna odpowiadać temu, co rzeczywiście wróci do stanu początkowego.

Domyślne ograniczenia również są ograniczeniami. Jeżeli sklep rozpoczyna od rzeczy dostępnych od ręki, pokaż to wyraźnie. Brak widocznego zaznaczenia sugeruje pełną ofertę. Kupujący może nie wiedzieć, że interesujący produkt został pominięty z powodu terminu realizacji, a nie dlatego, że firma go nie sprzedaje.

Licznik wyników powinien odnosić się do właściwego zbioru. Jeśli lista pozwala później wykonać czynność zbiorczą, sprawdź także zakres polecenia „Zaznacz wszystkie” po filtrowaniu. Wspólnie ustal, czy liczy produkty, warianty czy pozycje możliwe do zamówienia. Trzy rodziny po kilkanaście wersji to inny obraz niż trzy gotowe warianty. Nie musisz pokazywać wszystkich tych liczb jednocześnie. Musisz natomiast wiedzieć, co obiecuje napis „3 produkty” i czy karty pod nim spełniają tę obietnicę.

Przy liczbach obok poszczególnych wartości określ ich znaczenie. Czy liczba mówi, ile produktów otrzymamy po dodaniu tej wartości, czy ile ma ją w obecnym zbiorze? W złożonym katalogu te liczby mogą się różnić. Jeśli nie da się wyjaśnić zachowania prostym przykładem, lepiej uprościć prezentację niż ozdabiać ją pozorną precyzją.

Nie mieszaj sortowania z filtrowaniem. Pierwsze ustala kolejność, drugie warunki przynależności do zbioru. Przycisk „najpopularniejsze” nie powinien bez wyjaśnienia zmniejszać oferty do wybranych hitów. Jeśli promujesz kolekcję redakcyjną, nazwij ją jako taki wybór. Osoba szukająca konkretnego towaru potrzebuje wiedzieć, czy zmieniła widok, czy zakres.

Zachowaj również związek z zapytaniem. Gdy klient wpisał nazwę i potem użył filtrów, pokaż oba warunki. Wyczyszczenie filtra nie musi usuwać tekstu wyszukiwania. Wyszukiwarka wewnętrzna oraz panel zawężania powinny wspólnie objaśniać, dlaczego widoczna lista wygląda właśnie tak, zamiast działać jak dwa niezależne urządzenia.

Jeżeli wynik jest pusty, zachowaj zaznaczenia i daj możliwość cofnięcia wybranego ograniczenia. Komunikat powinien odróżniać „nic nie spełnia tych warunków” od problemu pobrania danych. Pusta lista nie jest błędem 404. Adres i zadanie nadal istnieją; zmiany wymaga zestaw kryteriów lub obsługa chwilowej awarii.

Nie resetuj od razu całego wyboru za klienta. Jedna istotna cecha może pozostać niezmienna, a druga być przedmiotem kompromisu. Osoba dobierająca produkt do wymiaru niekoniecznie może go zmniejszyć, lecz może zaakceptować inny kolor. Projekt powinien ułatwiać taką świadomą korektę, bez proponowania przypadkowych produktów pod hasłem „może to ci się spodoba”.

Przy przedziałach liczbowych nazwij, czego dotyczą granice. „Do 40” bez jednostki i cechy może wyglądać jak cena, rozmiar albo pojemność. Suwak nie zwalnia z podania znaczenia wartości. Jeżeli pozwalasz także wpisać liczbę, sprawdź, czy oba sposoby wyboru pokazują ten sam stan i czy da się poprawić przypadkowe dotknięcie.

Ustal, co dzieje się z niepełnym przedziałem. Osoba może chcieć pokazać wszystkie rzeczy poniżej określonej wysokości, bez dolnej granicy. Puste pole nie musi oznaczać zera. Przemyśl również odwrotne granice i wartość spoza zakresu. Komunikat powinien pomóc poprawić wybór, zachowując drugą, prawidłowo wpisaną liczbę, zamiast zerować całą grupę.

Dwie przesuwane końcówki potrzebują również sposobu rozróżnienia. Nie polegaj wyłącznie na ich położeniu, kiedy zbliżą się do siebie. Sprawdź obsługę klawiaturą i zmianę pojedynczej granicy bez dotyku. Czasem zwykłe dwa opisane pola będą dla danego zadania czytelniejsze niż drobny suwak, który pięknie wygląda tylko przy domyślnym ustawieniu.

Przy zakresie pokaż także regułę zaokrąglenia. Jeżeli klient wybiera wartość 40, nie powinien dopiero z wyników odgadywać, czy obejmuje ona samą granicę i jak traktowane są części jednostki. W projekcie zapisz kilka przykładów spełniających warunek oraz niespełniających go. Dzięki temu warstwa wizualna i mechanizm katalogu dostają tę samą definicję.

Brak parametru w danych produktu nie jest tym samym co brak spełnienia warunku. Ustal, czy taki produkt znika z zawężonego zbioru, czy wymaga osobnej informacji. Bez tej decyzji częściowo opisane pozycje mogą być systematycznie pomijane, a zespół będzie próbował naprawiać filtry, mimo że problem leży w niekompletnym katalogu.

Na telefonie panel staje się osobnym etapem

Mały ekran często wymaga wysuniętej szuflady lub pełnego panelu filtrów. Zanim ją narysujesz, zdecyduj, kiedy lista ma się zmienić: po każdym zaznaczeniu czy dopiero po zastosowaniu całego zestawu. Obie wersje mogą działać. Przycisk, licznik i zamknięcie panelu muszą opisywać ten sam moment decyzji.

Carbon Design System rozróżnia aktualizację po każdym wyborze oraz zbiorcze zastosowanie filtrów. W drugim modelu użytkownik najpierw ustala kilka ograniczeń, a potem osobnym działaniem odświeża zbiór. Własny projekt dobierz do liczby decyzji i czasu odpowiedzi katalogu, zamiast kopiować zachowanie pojedynczej kontrolki.

Jeśli wybór jest jeszcze roboczy, zamknięcie panelu nie może mieć niejasnego skutku. Przycisk krzyżyka może anulować zmiany albo jedynie schować widok. Ustal to jawnie i sprawdź na telefonie. Nie zmuszaj odbiorcy do oglądania listy po każdym powrocie tylko po to, żeby odgadł, czy nowe warunki zostały już przyjęte.

Przy zbiorczym zastosowaniu można pokazać wynik oczekiwany na przycisku, ale musi on odpowiadać aktualnemu stanowi. Gdy liczba jest jeszcze obliczana, nie udawaj gotowej odpowiedzi. Przy szybkich zmianach zabezpiecz się przed pokazaniem spóźnionego wyniku poprzedniego wyboru. Klient nie musi znać mechanizmu pobierania danych; potrzebuje spójnego sygnału.

Panel ma też zachować dostęp do własnych działań. Sprawdź, czy przycisk zastosowania nie ginie pod klawiaturą i czy długa lista wartości nie odcina od resetu. Zasady dla menu mobilnego pomagają ocenić otwarcie, zamknięcie i orientację, lecz filtry dodatkowo potrzebują informacji o aktywnym zestawie.

Wybór ma przetrwać obejrzenie produktu

Po zawężeniu listy klient otwiera produkt, czyta opis i wraca. Jeżeli dostaje początek pełnego katalogu, musi odtworzyć nie tylko filtry, lecz również miejsce przeglądania. Zachowanie warunków, kolejności i sensownej pozycji listy pomaga kontynuować rozpoczęty wybór. Nie powinno wymagać zapamiętania pięciu kontrolek ani robienia zdjęcia ekranu przed każdym przejściem.

To samo dotyczy powrotu po dodaniu rzeczy do koszyka. Klient może nadal dobierać kolejny produkt do tego samego zastosowania. Nie zakładaj, że pierwsze dodanie kończy pracę z katalogiem. Uzgodnij, czy przycisk „kontynuuj zakupy” prowadzi do aktualnej listy, kategorii czy strony głównej i dlaczego.

Przy wyborze lokalizacji pokaż jego zakres. Filtr „dostępne w punkcie” może służyć orientacji przed zakupem, ale nie powinien udawać ostatecznej rezerwacji. Warunki dostawy i odbioru wymagają potwierdzenia dla wybranego wariantu oraz całego zamówienia. Zachowaj tę granicę w nazwie i objaśnieniu filtra.

Adres zawężonego widoku bywa częścią rozmowy. Jeżeli umożliwiasz udostępnianie, otwórz link w nowej sesji i sprawdź jego znaczenie. Odbiorca powinien zobaczyć te same warunki albo czytelną informację, że zależą od jego lokalizacji czy sesji. Nie wystarczy dopisanie parametrów do adresu, jeśli strona nie potrafi odtworzyć ich skutku.

Nie utrzymuj nieaktualnego wyboru bez wyjaśnienia. Wartość mogła zniknąć po aktualizacji katalogu, a filtr dostępności stracić sens dla nowej kategorii. Zachowaj tyle kontekstu, ile jest nadal prawdziwe, i powiedz, co się zmieniło. Ciche wyzerowanie jest wygodne dla systemu, lecz odbiorcy odbiera możliwość zrozumienia różnicy.

Przy odbiorze sprawdź kilka dróg, które naprawdę występują w sklepie: szybki wybór jednej cechy, kilka zależnych warunków, pusty wynik i powrót z produktu. Uwzględnij długie etykiety oraz brak danych. To nie konkurs liczby możliwych zaznaczeń. Pytanie brzmi, czy klient potrafi wyjaśnić, jakie produkty ogląda i jak zmienić zakres.

Aeneia Design łączy projekt treści, interfejsu i uzgodnionego wdrożenia sklepu. Na rozmowę o filtrach przynieś przykładowe produkty oraz kilka rzeczywistych pytań kupujących. Wtedy po trzecim kliknięciu trzy pozostałe produkty będą wynikiem wyboru, a nie zagadką do rozwiązania przed zakupem.