Frustrujące wzorce projektowe: zepsute filtry

Filtry są wszędzie . Chociaż często myślimy o tym, że pojawiają się one podczas rezerwacji lotów lub zakupów online, filtry są często używane w prawie każdym interfejsie, który zawiera więcej niż garść punktów danych.

Niekoniecznie jest to jednak tylko sama ilość danych, które są trudne do zrozumienia; to złożoność i brak spójności , które zwykle wiążą się z danymi, wymaga pewnego filtrowania — tak powszechnego scenariusza w siatkach danych, pulpitach korporacyjnych, śledzeniu szczepionek i rejestrach publicznych.

Projektowanie dla wygodnej gamy

Jako klienci używamy filtrów, aby zredukować duży zestaw opcji do łatwiejszego w zarządzaniu i wysoce trafnego wyboru. Może tylko kilkadziesiąt kwitów wpłaty zamiast tysięcy, albo tylko garść bluzek, a nie cała kolekcja.

Mamy konkretne interesujące nas atrybuty, konkretną intencję , które musimy jakoś przekazać interfejsowi. Robimy to, dzieląc naszą intencję na zestaw dostępnych funkcji. Ta intencja może być dość konkretna lub dość ogólna, ale w obu przypadkach projekt powinien minimalizować czas potrzebny klientom na przejście ze stanu domyślnego (gdy nie wybrano żadnych filtrów) do stanu końcowego (gdy wszystkie filtry zostały pomyślnie zastosowane).

To tylko jedna część historii. Stosowanie odpowiednich filtrów to prosta część, ale wyświetlanie wystarczająco trafnych wyników jest nieco trudniejsze. W rzeczywistości dla każdego interfejsu i dla każdego celu mamy na uwadze szczególnie wygodny zakres , czyli preferowaną liczbę opcji, którymi naszym zdaniem możemy zarządzać stosunkowo bez wysiłku.

Ten zakres opcji nie musi mieścić się na jednym ekranie, być wyświetlany na jednej stronie ani ograniczać się do małej krótkiej listy, którą łatwo zapamiętamy. Może to być od dziesiątek do setek elementów rozrzuconych na wielu stronach.

Ważną częścią jest to, że ta gama spełnia nasze oczekiwania, które:

• szukamy bardzo odpowiednich opcji,
• możemy łatwo zrozumieć, co badamy,
• możemy dostrzec różnice między wszystkimi opcjami i
• wszystko możemy przetworzyć w rozsądnych, przewidywalnych ramach czasowych.

W przeciwieństwie do sortowania, które jedynie przestawia wyniki zgodnie z niektórymi preferowanymi atrybutami ( miękkie granice ), filtry zawsze reprezentują twarde granice. Ściśle ograniczają zakres wyników. Za mało odpowiednich filtrów i użytkownicy strzelają daleko poza wygodny zasięg; zbyt wiele filtrów i użytkownicy mają zerowe wyniki i całkowicie opuszczają witrynę.

Wygodny asortyment różni się znacznie w zależności od produktu. Wskazówki dotyczące tego, gdzie leży, można wywnioskować z tego, jak różne są w rzeczywistości opcje. W testach użyteczności widzimy, że ludzie nie mają problemów z badaniem 20–30 rodzajów pojazdów, 40–50 rodzajów trampek, 70–80 bukietów kwiatów, a nawet kartowaniem 100–200 odcinków płatności. Jednak czują się całkowicie przytłoczeni, gdy badają 15 różnych rodzajów Sharpies lub baterii AAA. Zasadniczo wydaje się, że im więcej różnych opcji, tym bardziej komfortowo czujemy się przy nieco większym zestawie opcji.

Ostatecznym pytaniem jest zatem, jak znaleźć tę delikatną równowagę, gdy nasz interfejs pomaga użytkownikom szybko osiągnąć wystarczające wyniki. Jedną z odpowiedzi na to pytanie jest coś, co brzmi strasznie oczywiste: wyeliminowanie wszelkich przeszkód na drodze do osiągnięcia tego wygodnego zasięgu. Łatwiej jest napisać niż zrobić — zwłaszcza, gdy masz dziesiątki, a nawet setki filtrów, które muszą być dostępne na urządzeniach mobilnych, komputerach i wszędzie pomiędzy nimi.

Złożoność filtrowania

Na pierwszy rzut oka filtrowanie nie wydaje się szczególnie skomplikowanym przedsięwzięciem. Oczywiście możemy toczyć długie debaty na temat właściwych elementów formularza dla różnych rodzajów filtrów — autouzupełniania, radia, przełączników, list rozwijanych wyboru, suwaków i przycisków, żeby wymienić tylko kilka — ale w istocie wszystkie elementy formularza są po prostu podstawowe. wejście, prawda?

Jak się okazuje, jest kilka aspektów tego doświadczenia, które sprawiają, że projektowanie filtrów jest dość trudne :

• filtry mogą mieć różne smaki i kształty, takie jak ceny, oceny, kolory, daty, godziny, rozmiar, marka, pojemność, funkcje, poziom doświadczenia, przedział wiekowy, objawy, stan produktu itp.
• filtry zwykle występują w dużych ilościach i muszą być wyświetlane na różnych ekranach,
• filtry często mają różne stany (zaznaczone, niezaznaczone, wyłączone)
• filtry często potrzebują rozsądnych wartości domyślnych i muszą pamiętać dane wprowadzone przez użytkownika,
• filtry mogą być współzależne , a te zależności muszą być oczywiste,
• filtry mogą być trudne do walidacji , np. gdy użytkownicy mogą wpisywać złożone dane, takie jak czas lub daty,
• filtry muszą wspierać i pokazywać znaczące komunikaty o błędach,
• i tak wiele innych.

Filtry nigdy nie istnieją same ; w taki czy inny sposób są zawsze związane z wynikami, na które działają. To połączenie często powoduje, że filtry i pasujące wyniki są nieco synchroniczne , ponieważ te ostatnie zależą od tego, jak szybko interfejs użytkownika rejestruje dane wejściowe i ile czasu potrzebuje na pomyślne ich przetworzenie.

Teraz rozwiązanie wszystkich drobnych zawiłości każdego z tych wyzwań jest niczym innym jak monumentalną pracą, jednak niektóre problemy są nieco bardziej frustrujące niż inne, co sprawia, że ​​ogólne wrażenia są bolesne i irytujące, a tym samym powodują wysokie współczynniki porzuceń i wysokie współczynniki odrzuceń. Przyjrzyjmy się niektórym krytycznym.

Unikaj maleńkich przewijanych okienek

Po zaledwie kilku sesjach użyteczności z klientami, którzy próbują korzystać z filtrów na własnym urządzeniu, można zauważyć pewne powszechne frustracje , które wciąż się powtarzają. Jeden z najbardziej irytujących wzorców pochodzi z długich sekcji filtrów zawierających dziesiątki opcji. Te opcje często są schowane w małym przewijanym okienku, pokazującym 3-4 opcje na raz i wymagającym przewijania w pionie w celu przeglądania opcji.

Te sekcje często powodują, że klienci przewijają się w pionie, powoli, dokładnie, z niezwykłą ostrością i precyzją. Gdy robią to na urządzeniach mobilnych, niektóre filtry są aktywowane przez pomyłkę, co skłania klienta do jeszcze większej koncentracji. Klasycznym przykładem takiego wzorca jest filtr „Marki”, który często zawiera setki opcji posortowanych według popularności lub alfabetu.

Alternatywną opcją byłoby pokazanie aż 7–10 opcji naraz za pomocą akordeonu, który rozwijałby się i wyświetlał wszystkie opcje po dotknięciu/kliknięciu. Te opcje nie muszą być wyświetlane w pełnej wysokości, ale mogą znajdować się w większym przewijanym okienku . Ale wtedy nie powinny być aktywowane przez przewijanie okienka.

Dobrym pomysłem jest również uzupełnienie filtru o autouzupełnianie wyszukiwania i widok alfabetyczny, jeśli niektóre z popularnych opcji są wyróżnione u góry. Dobrym przykładem jest Rozetka.ua, sprzedawca eCommerce z Ukrainy (patrz wyżej).

Zawsze podawaj awaryjne wprowadzanie tekstu dla suwaków

Wszędzie tam, gdzie użytkownicy mogą zdefiniować duży zakres wartości, czy to zakres cen w sklepie detalicznym, maksymalny czas podróży pociągiem, czy zakres min/maks planu ubezpieczeniowego, prawdopodobnie użyjemy pewnego rodzaju suwaka . Wszystkie suwaki mają jedną wspólną cechę: są wspaniałe, gdy chcemy zachęcić klientów do szybkiego zbadania wielu opcji, ale są dość frustrujące, gdy użytkownik ma coś konkretnego na myśli i dlatego musi być nieco bardziej precyzyjny.

Pomyśl tylko o frustracji, której zwykle doświadczamy, podnosząc nieco cenę z 200 USD do 215 USD lub dodając kolejną godzinę na czas lotu. Robienie tego za pomocą suwaka jest trudne, ponieważ wymaga niesamowitej precyzji, a to zawsze powoduje błędy i frustrację.

Omówiliśmy już szczegółowo, jak zaprojektować idealny suwak, ale prawdopodobnie najważniejszą funkcją, której potrzebuje każdy suwak, jest obsługa różnych prędkości interakcji. W rzeczywistości istnieje kilka typowych rodzajów interakcji:

• gdy klienci chcą szybko zapoznać się z wieloma opcjami, stary dobry suwak z ścieżką i kciukiem sprawdza się doskonale;
• gdy klienci chcą być bardziej precyzyjni w eksploracji, możemy pomóc, dodając steppery (+/-) dla ziarnistych skoków do przodu i do tyłu,
• gdy klienci mają na myśli dokładną wartość, możemy pomóc, udostępniając pola wprowadzania tekstu dla wartości min/max, dzięki czemu użytkownicy mogą wpisywać wartości bezpośrednio, bez konieczności używania suwaka,
• we wszystkich tych przypadkach rozwiązania muszą być dostępne i obsługiwać interakcję tylko z klawiaturą.

Spójrz na poniższy przykład Lloydsbank. Osobisty kalkulator kredytowy pięknie wspiera wszystkie rodzaje interakcji. Zwróć także uwagę na style fokusu, gdy aktywowany jest kciuk, oraz zakresy wyświetlane pod suwakiem stopy procentowej u góry, aby wskazać, gdzie aktualnie nawiguje klient. Oprocentowanie zmienia się w zależności od tego, ile pieniędzy klient chciałby pożyczyć.

Kolejny ciekawy przykład dobrze zaprojektowanego slidera pochodzi z Sofasizer firmy Made.com, który pozwala filtrować kanapy na podstawie wymiarów, jakie muszą mieć. Zamiast używać zestawu pól wejściowych, Made.com zdecydowało się na użycie wizualnego interfejsu z ikoną „Zmień rozmiar”. Możesz przeciągnąć uchwyt, aby dostosować rozmiar, lub możesz wpisać dokładne wartości w polach wprowadzania wysokości i szerokości.

Nigdy nie przewijaj automatycznie użytkowników na jednym wejściu

Byłeś tam wcześniej. Być może w przypływie emocji udajesz się do sklepu detalicznego, klikasz wszystkie odpowiednie łącza kategorii, przesuwasz palcem w lewo i prawo przez podnawigację i patrzysz z sokolim wzrokiem na ten jeden lśniący, nowy laptop, na którym w końcu jesteś gotowy się zaangażować. To, czego oczekujesz w następnej kolejności, może nie być takim doświadczeniem, na jakie miałeś nadzieję sobie pozwolić. Spójrz na poniższy przykład. Czy potrafisz dostrzec, co się dzieje?

W tym przykładzie z witryny Dell.com podczas wybierania funkcji laptopa rejestrowane jest tylko jedno wejście. Jeśli zdarzy ci się szybko wybrać wiele opcji, zastosowane zostaną tylko ostatnie dane wejściowe. A gdy dane wejściowe są rejestrowane, strona odświeża się, przeskakując klienta na samą górę paska bocznego filtrowania. Oznacza to, że im więcej filtrów chcesz użyć — i zwykle nawiguj od góry do dołu — tym więcej będziesz musiał przewijać w dół, aby znaleźć odpowiedni filtr.

Powodem, dla którego ta implementacja jest tak powszechna, nie jest to, że chcemy automatycznie przewijać klientów na górę obszaru filtrów , ale raczej dlatego, że chcemy skierować ich na górę wyników produktów z zastosowanymi filtrami. Utknięcie gdzieś w środku listy nie będzie szczególnie przydatne, gdy zastosujesz nowe filtry. I rzeczywiście, lepiej pokazywać szczyt wyników przy każdej aktualizacji filtra, ale nie oznacza to, że musimy także automatycznie przewijać filtry.

W rzeczywistości, nawet jeśli chcesz określić w ten sposób tylko 6–10 funkcji, musisz rozpocząć dość upartą walkę z przewijaniem z automatycznym przewijaniem , z zarejestrowanym tylko jednym filtrem na raz. Możliwe jest dotknięcie lub kliknięcie wielu filtrów naraz, ale w tym przypadku niestety interfejs użytkownika nie zareaguje zgodnie z oczekiwaniami. Ogólne wrażenia są dość frustrujące i dezorientujące, także dlatego, że strona internetowa wydaje się powolna, a dalsze filtrowanie zawsze wymaga coraz więcej wysiłku. Nie najlepszy przykład minimalizacji czasu od stanu domyślnego do stanu końcowego.

Jednym ze sposobów rozwiązania tych problemów byłoby całkowite usunięcie automatycznego przewijania w poszukiwaniu filtrów i znalezienie lepszego sposobu na wskazanie, że w danym momencie można wprowadzić tylko jedno wejście. Na przykład możemy zamrozić cały interfejs i tym samym wyłączyć wszelkie dane wejściowe, dopóki nowe dane nie wrócą z serwera. Następnie musielibyśmy poczekać, aż nowe wyniki zostaną wstrzyknięte do DOM, i dopiero wtedy interfejs użytkownika powróci. Chociaż jest nieco jaśniejsze niż poprzednie rozwiązanie, okazuje się, że sam w sobie ma problemy.

Nigdy nie zamrażaj interfejsu użytkownika na jednym wejściu

Za każdym razem, gdy blokujemy interfejs użytkownika na jednym wejściu, aktywnie spowalniamy naszych klientów w wyrażaniu ich zamiarów. W rzeczywistości sprawiamy, że określenie, czym są zainteresowani, jest dla nich nieco bardziej kłopotliwe, nadając priorytet wyświetlaniu wyników przed danymi wejściowymi. Wydaje się jednak, że to błędna priorytetyzacja. Spójrzmy na poniższy przykład.

W Sears.com za każdym razem, gdy dokonuje się wyboru, nie tylko całkowicie blokowany jest interfejs użytkownika; użytkownicy są również przesuwani na górę strony. Jest to szczególnie frustrujące w przypadku filtrów zawierających akordeony (na przykład link „zobacz więcej” w sekcji „Marka”). Przy każdym nowym filtrze użytkownik musi przewinąć w dół i otworzyć akordeon, aby znaleźć ten konkretny atrybut, który chce wybrać. Walmart (patrz przykład poniżej) postępuje zgodnie z tym samym wzorem.

W takich przypadkach musimy polegać na JavaScript, aby niezawodnie przełączać się między stanami zamrożonymi i roboczymi, nawet jeśli dane nie wróciły z serwera, lub jeśli wracają powoli lub są źle sformułowane. To dość kruche założenie, na którym można polegać.

Teraz oczywiście nie wiemy, kiedy użytkownik zakończył wprowadzanie danych, ale rozsądne jest zapewnienie, aby podczas całej interakcji z filtrami klient nigdy nie musiał czekać na odpowiedź interfejsu . Teraz, jeśli przyjrzymy się nieco bliżej powyższym trzem przykładom, zauważymy jedno podobieństwo. Wszystkie z nich automatycznie stosują każdy filtr po dokonaniu wyboru, wyłączając dalszy wybór, dopóki nie pojawi się nowa strona wyników.

Jednak klienci bardzo często szybko dodają wiele filtrów , czasem w tej samej kategorii. Zachowanie interfejsu użytkownika nie obsługuje dobrze tej intencji.

Czy mamy więc jakieś alternatywy? Oczywistą alternatywą jest przekazanie użytkownikowi decyzji o tym, kiedy wyniki powinny zostać zaktualizowane. Może to oznaczać dodanie przycisku „Zastosuj” i zachęcenie klientów do wybrania wszystkich filtrów przed wyświetleniem jakichkolwiek wyników. Ale niekoniecznie jest to jedyna opcja. Właściwie, jak się okazuje, możemy zrobić jedno i drugie: zobaczyć aktualne wyniki podczas interakcji z filtrem bez żadnych opóźnień. Musimy tylko przejść od synchronicznego wyświetlania wyników do jego asynchronicznego odpowiednika.

Zawsze pokazuj wyniki asynchronicznie

Wspomnieliśmy już, że filtry i wyniki dopasowywania są często nieco synchroniczne. Moglibyśmy jednak podzielić części interfejsu użytkownika i renderować je osobno, asynchronicznie. W takim przypadku na każdym wejściu filtra pasujące wyniki mogą być aktualizowane asynchronicznie, podczas gdy filtry zawsze pozostają dostępne i znajdują się w tym samym miejscu. Przy każdym nowym wejściu filtra użytkownik widziałby błysk nowej treści przesyłanej strumieniowo.

Powyższy przykład BestBuy pokazuje ten wzór w akcji. Gdy wybieramy filtry na lewym pasku bocznym, są one stosowane w tle, podczas gdy my możemy wybierać coraz więcej filtrów, jeśli zdecydujemy się to zrobić. Lista produktów jest aktualizowana asynchronicznie: nigdy nie występuje stan wyłączenia, ponieważ nowa zawartość jest umieszczana na liście pasujących wyników za każdym razem, gdy dane wracają z serwera.

Moglibyśmy uczynić to nieco bardziej oczywistym, pokazując, że nowe produkty są ładowane w miarę stosowania nowych filtrów. Dobrym tego przykładem jest Coolblue, z asynchronicznym interfejsem filtrowania paska bocznego wyświetlanym po lewej stronie.

Warto w tym miejscu podkreślić, że każde wejście w obszarze filtrów musi zostać zarejestrowane, a następnie zastosowane do listy produktów. Zauważyliśmy, że dla wielu klientów jest to oczekiwane zachowanie, chyba że umieścisz pływający przycisk „Zastosuj” w pobliżu obszaru filtrów.

Unikaj przesunięć układu na wejściu filtra

Dopóki interfejs nie blokuje danych wejściowych, klienci oczywiście oczekują, że będą mogli ustawić kilka filtrów jeden po drugim. Jednak w zależności od tego, gdzie znajdują się filtry, czasami mogą napotkać przypadkowe przesunięcia układu , więc muszą ponownie zorientować się na stronie, przewijać w górę i w dół, aby znaleźć miejsce, w którym zostały przerwane, a następnie przejść do następnego wpisu. Spójrz na poniższy przykład. Jaki wydaje się być problem na VictoriaPlum (wyświetlony poniżej)?

Za każdym razem, gdy użytkownicy wchodzą w interakcję z filtrem, po pojawieniu się nowych pozycji produktów, następuje niewielka zmiana w obszarze filtrowania. Zwykle są trzy powody, dla których tak się dzieje:

• na każdym wejściu filtra sekcje filtrów, które zostały rozwinięte przez klienta automatycznie się zwijają,
• dostępne wcześniej filtry stają się niedostępne i zostają ukryte, zmniejszając wysokość obszaru filtrowania,
• przegląd zastosowanych filtrów znajduje się nad obszarem filtrów, więc powiększając się z każdym nowym filtrem, również spycha filtry w dół.

Aby uniknąć pierwszego problemu, musimy utrzymywać stan akordeonów i utrzymywać je otwarte, nawet jeśli użytkownik ustawił nowy filtr lub odświeżył stronę. Musimy również zachować ustawienia filtrowania po odświeżeniu lub nawigacji. W rzeczywistości widzimy klientów, którzy oczekują, że filtry będą nadal stosowane , nawet jeśli wrócą do poprzednich kategorii lub stron (np. za pomocą przycisku „Wstecz”).

W drugim przypadku, jeśli filtry nie są już dostępne, zamiast ukrywać je automatycznie, możemy je wyłączyć, ale także wyjaśnić, dlaczego są wyłączone (przyjazna wskazówka może pomóc) i co należy zrobić, aby je ponownie włączyć . Możemy wtedy również dodać opcję „Ukryj wszystkie niedostępne opcje”.

Na koniec możemy ponownie rozważyć położenie zastosowanych filtrów nad obszarem filtrów. Naprawdę nie ma zbyt wielu opcji, w których mogliby mieszkać, a lepszą opcją wydaje się być obszar nad filtrowaniem wyników.

Wyświetl filtry nad wynikami

Aby całkowicie uniknąć zmian w układzie, możemy wyświetlać zastosowane filtry nad wynikami produktów . Dzięki temu obszar filtrowania byłby stabilny i przewidywalny podczas całej interakcji użytkownika. W rzeczywistości nie musi być cały czas widoczny. Crate & Barrel, w poniższym przykładzie, pozwala klientom ukrywać i wyświetlać filtry na żądanie, podczas gdy zastosowane filtry są dodawane do dedykowanego obszaru nad produktami. Pamiętaj, że dostępna jest również opcja wyczyszczenia wszystkich filtrów. (Strona produktu zmieniła się od czasu nagrania wideo.)

Inną opcją jest przekształcenie wszystkich sekcji filtrów w nakładki i wyświetlenie ich po dotknięciu/kliknięciu nad wynikami. W rzeczywistości możesz nawet użyć filtrów pływających , więc gdy klient przewinie stronę w dół, filtry będą nadal dostępne przez cały czas.

Przykładem tego wzoru jest Adidas (patrz zdjęcie poniżej). Pasek filtrów jest trwały; nawet gdy użytkownicy przewijają stronę, nakładka filtra nie zamknie się automatycznie — wymaga wkładu użytkownika, ponownie przekazując kontrolę użytkownikowi. Jednak zamyka się automatycznie po wybraniu jednego z filtrów. Jeśli użytkownik chce wybrać wiele filtrów, musi wielokrotnie otwierać tę samą grupę filtrów. Lepszym pomysłem może być utrzymywanie trwałych filtrów. Mimo to wynik: brak zmian w układzie, brak frustrującego przewijania w wąskich korytarzach, a filtry są zawsze dostępne.

Nie znaczy to, że wyświetlanie filtrów nad wynikami jest domyślnie zawsze lepsze. W Asos każdy wpis filtra powoduje przeskok na górę strony, więc klienci muszą ręcznie przewijać w dół, aby kontynuować filtrowanie. Zamiast ponownie renderować całą stronę, bardziej sensowne byłoby ponowne renderowanie obszaru filtrów i listy produktów osobno.

Ogólnie rzecz biorąc, dwie pierwsze opcje (Crate & Barrel i Adidas) wydają się działać bardzo dobrze i pozostawiają więcej miejsca na wyświetlanie produktów, jednocześnie unikając wszystkich problemów, o których mówiliśmy wcześniej. To dość niezawodny wzorzec, którego można użyć, gdy chcemy uniknąć blokad na drodze lub zamieszania. Ale nadal możemy zrobić trochę więcej, na przykład za pomocą starego, dobrego przycisku „zastosuj”.

Pokaż liczbę wyników na przycisku „Zastosuj”

Posiadanie przycisku „Zastosuj” dla filtrów w czasach, gdy przyzwyczajamy się do płynnych i płynnych interakcji, wygaszania i animacji czasowych, wydaje się nieco archaiczne. Jeśli jednak chcemy doprowadzić klientów do wygodnego zakresu, nie ma lepszego sposobu na to niż jak najszybsze wyświetlenie liczby wyników .

Ikea oferuje filtry na górze wyników. Czasami filtry pojawiają się w rozwijanej nakładce, a czasami jako pigułka pod filtrami. Jednak przez większość czasu, w przeciwieństwie do poprzednich przykładów, po wybraniu filtra wyświetla się po prawej stronie nakładka mega-filtru na pasku bocznym ze wszystkimi dostępnymi opcjami filtrowania zgrupowanymi tam. Gdy klient przechodzi przez filtry, lista produktów jest aktualizowana w tle asynchronicznie. Co ważniejsze, zwróć uwagę na przycisk „Zastosuj”, którego etykieta zmienia się w zależności od danych wejściowych.

Po każdym wejściu filtra do serwera wysyłane jest nowe żądanie, które pobiera liczbę wyników, a następnie wyświetla tę liczbę w interfejsie użytkownika. To świetny sposób, aby dać użytkownikom bardzo jasne wyobrażenie o tym, jak daleko lub jak blisko znajdują się w ich wygodnym zasięgu.

Innym przykładem jest Galaxus.ch (patrz poniżej), szwajcarski sprzedawca eCommerce, który zapewnia pierwszorzędne wrażenia, jeśli chodzi o filtrowanie. Filtry są wyświetlane nad wynikami produktów; po dotknięciu/kliknięciu pojawi się nakładka filtra. Brak spowolnień, szybkie czasy reakcji i cudowna integracja aktywnych filtrów z obszarem filtrów. Świetny przykład referencyjny , który warto wziąć pod uwagę przy projektowaniu dowolnego rodzaju filtra.

Ogólnie rzecz biorąc, posiadanie przycisku „Zastosuj” wraz z aktualizacjami obszaru zawartości w czasie rzeczywistym wydaje się działać najlepiej. Naprawdę łączy w sobie najlepsze z obu rozwiązań: wyświetlanie wyników natychmiast po ich otrzymaniu, przy jednoczesnym zachowaniu dostępności filtrów przez cały czas.

Unikaj podzielonych ekranów na urządzeniach mobilnych

Zagadnienia, które omówiliśmy w artykule, dotyczą zarówno dużych, jak i małych ekranów. Jednak na małych ekranach, a zwłaszcza na wolnych połączeniach, problemy te stają się jeszcze bardziej krytyczne. Przez większość czasu interfejsy mają tendencję do blokowania całego interfejsu użytkownika na jednym wejściu filtra, powodując ogromne opóźnienia dla klientów będących w ruchu (np. Crutchfield, Walgreens). Z drugiej strony, powszechne jest dzielenie ekranu w celu wyświetlenia nakładki filtrów, przy jednoczesnym wyświetlaniu zaktualizowanej listy produktów w tle (np. Nordstrom).

Ogólnie rzecz biorąc, lepszym pomysłem może być poeksperymentowanie, jeśli nakładka na całą stronę dla filtrów byłaby skuteczniejsza. Daje więcej miejsca na eksperymentowanie z widokiem wielokolumnowym, a może nawet wyświetlanie obszaru przesuwania, aby wybrać filtry bez konieczności przechodzenia między osobnymi stronami. W rzeczywistości dobrym pomysłem może być użycie akordeonów, które mogą zwijać się i rozwijać, zamiast przenosić użytkownika na oddzielną stronę — podobnie jak w przypadku mega rozwijanych.

W przeciwieństwie do komputerów stacjonarnych, posiadanie przycisku „Zastosuj” we wszystkich tych przykładach ma znaczenie i możesz uczynić go nieco bardziej użytecznym, dodając liczbę produktów jako etykietę na przycisku i utrzymując przycisk przyklejony na dole, gdy użytkownik przewija w dół .

Lista kontrolna projektu filtrowania

Jak zwykle, oto wszystkie rzeczy, o których należy pamiętać podczas projektowania wszelkiego rodzaju filtrów — mały pomocnik, aby uniknąć pominięcia ważnych szczegółów przed rozpoczęciem rozmów z innymi projektantami i programistami. Możesz również znaleźć pełną talię list kontrolnych wzorców projektowania inteligentnych interfejsów w swoim naprawdę Smashing Magazine.

1. Czy możemy uniknąć ikony filtra i pokazywać filtry takimi, jakie są?
2. Jeśli nie, jaką ikonę wybieramy, aby wskazać filtrowanie?
3. Czy ikona + wyściółka jest wystarczająco duża, aby wygodnie stukać?
4. Czy umieszczamy ikonę na górze, na dole czy pływająco (urządzenie mobilne/stacjonarne)?
5. Co dokładnie się dzieje, gdy użytkownik kliknie/dotknie ikonę?
6. Jak zmieni się ikona po dotknięciu/kliknięciu?
7. Czy po kliknięciu będziemy mieć jakąś animację lub przejście?
8. Czy filtry będą wyświetlane jako pełna strona/częściowa nakładka czy wsuwane?
9. Czy możemy uniknąć filtrowania paska bocznego, ponieważ zwykle jest powolne?
10. Czy domyślnie udostępniamy popularne lub trafne filtry?
11. Czy wyświetlamy liczbę oczekiwanych wyników dla każdego filtra?
12. Czy możemy używać poziomego swipera do poruszania się między filtrami?
13. Czy możemy uniknąć rozwijania i używać tylko przycisków/żetonów + przełączników?
14. Czy w przypadku złożonych filtrów zapewniamy wyszukiwanie w filtrach?
15. Czy używamy ikon, aby wyjaśnić różnice między różnymi filtrami?
16. Czy stosujemy odpowiednie elementy do filtrów, np. suwaki, przyciski, przełączniki?
17. Czy filtry są stosowane automatycznie (tak, dla wsuwanych)?
18. Czy filtry są stosowane ręcznie po potwierdzeniu („Zastosuj”) (tak, w przypadku nakładek)?
19. Jak komunikujemy się z już wybranymi filtrami?
20. Czy wybrane filtry mogą pojawiać się jako usuwalne pigułki, chipy lub tagi?
21. Czy polecamy odpowiednie filtry na podstawie wyboru?
22. Czy śledzimy niezgodność między wybranymi filtrami?
23. W jaki sposób komunikaty o błędach lub ostrzeżenia pojawiają się w interfejsie użytkownika?
24. Czy umożliwiamy klientom szybkie zresetowanie wszystkich filtrów jednocześnie?
25. Czy filtry (lub przycisk filtrów) unoszą się podczas przewijania na urządzeniu mobilnym/komputerze?
26. Czy użytkownicy mogą dotknąć tego samego miejsca, aby otworzyć/zamknąć filtry?

Zawijanie

Zbyt często filtrowanie w sieci jest zepsute i frustrujące, co sprawia, że ​​klientom niepotrzebnie trudno jest dotrzeć do tego lśniącego, wygodnego zakresu odpowiednich wyników. Projektując kolejny filtr, przyjrzyj się niektórym typowym problemom, których możesz chcieć uniknąć, i miejmy nadzieję, że unikniesz frustracji wynikającej z uszkodzonych i niedostępnych implementacji.

• Projektuj z myślą o wygodnym zakresie opcji, na wypadek, gdy klient chce szybko dodać wiele filtrów — jeden po drugim.
• W przypadku długich grup filtrów unikaj maleńkich, przewijanych okienek i wyświetlaj do 7–10 opcji naraz za pomocą akordeonu, który rozwija się i wyświetla wszystkie opcje po dotknięciu/kliknięciu. Dodaj również autouzupełnianie wyszukiwania i widok alfabetyczny.
• Zawsze dodawaj krokowe (+/-) i pola wprowadzania tekstu podczas korzystania z suwaków,
• Klient często chce ustawić kilka filtrów tego samego typu. Nigdy nie przewijaj automatycznie użytkowników na jednym wejściu i nigdy nie zwijaj automatycznie grupy filtrów.
• Nigdy nie zamrażaj interfejsu użytkownika na jednym wejściu i nigdy nie zmuszaj klienta do czekania na odpowiedź interfejsu podczas ustawiania filtrów.
• Zawsze aktualizuj filtry i wyświetlaj wyniki asynchronicznie , dzięki czemu na każdym wejściu filtra pasujące wyniki mogą być aktualizowane asynchronicznie, a filtry zawsze pozostają dostępne i znajdują się w tym samym miejscu.
• Zawsze unikaj przesunięć układu na wejściu filtra i rozważ wyświetlanie filtrów nad wynikami.
• Na urządzeniu mobilnym przycisk „Zastosuj” może być przyklejony u dołu ekranu. Zaktualizuj liczbę produktów i pokaż je na przycisku.

Artykuły z serii

Jeśli uznasz ten artykuł za przydatny, oto przegląd podobnych artykułów, które publikowaliśmy na przestrzeni lat — a kilka kolejnych wkrótce się pojawi.

• Idealny akordeon
• Idealny responsywny konfigurator
• Idealny wybór urodzin
• Idealny wybór daty i godziny
• Idealne Mega-Rozwijane
• Doskonałe porównanie funkcji
• Idealny suwak
• Książka Wzorów Projektowania Form autorstwa Adama Silvera, opublikowana w SmashingMag
• Zapisz się do naszego biuletynu e-mail, aby nie przegapić następnych.