Moim ostatnim wpisem był Brakujący filtr na wszystkich witrynach w kontekście UI/UX: xFilter. Nakreśliłem tam powód, dla którego filtr negatywny powinien być dostępny z punktu widzenia Doświadczenia Użytkownika. Korzystając z portali pracy mogę zawęzić wyniki, które obejmują .net i stos technologii C#, ale nie wykluczają języka Python. Sklepy internetowe z odzieżą, takie jak Zara, Desigual, oferują nam filtr butów. Możemy połączyć filtr butów z kolorami. Nie jest to zbyt przydatne, gdy chcemy wykluczyć czerwone buty. Co jeśli ktoś ma 3 pary czerwonych butów i tym razem chce czegoś innego? Portale zakwaterowania, np. Booking.com? Ten sam problem. Nie ma czegoś takiego jak xFilter, filtra wykluczającego na wspomnianych stronach sklepów. Samo pytanie źródłowe, czyli dlaczego jest w poprzednim artykule, jak wspomniałem na początku powyżej.
Najlepszym rozwiązaniem moim zdaniem jest użycie przycisku z trzema stanami. Jeden przycisk z domyślnym stanem neutralnym, stan środkowy. Lewy przełącznik z zastosowaniem filtra pozytywnego. Prawy przełącznik z opcją filtra negatywnego. Popatrzmy poniżej przykładom Interfejsu Użytkownika (UI), jeden z tekstem, a drugi z ikonami.
 |  |
Powyższe próbowałem osiągnąć za pomocą oprogramowania do projektowania UI/UX Figma. Znalazłem samouczek na YouTube Create a TOGGLE BUTTON (Option Switcher) With a HOVER Functionality (Figma Tutorial). Materiał jest przeznaczony dla projektantów bardziej zaznajomionych z samą Figmą. Na koniec użyłem jedynie Windows Paint, aby osiągnąć powyższy rezultat. Używałem również Balsamiq, tuż przed Figmą. Było to o wiele łatwiejsze dla mnie, nowicjusza, ale nie było to tym o co mi chodziło. Czułem się, jak Tropiciel Rozwiązań, jako Projektant Doświadczeń Użytkownika (UX). Podjąłem tą podróż, jako ciekawe doświadczenie. Zacząłem od prostszego, bardziej prototypowego przypadku. Przyjrzyjmy się poniżej. Najpierw marka odzieżowa Desigual.
 |  |
Przykład inspirowany Desigual przy użyciu Balsamiq. Aby nie wybrać czerwonych butów, mamy przypadek po lewej pokazujący 6 krokową, długą Podróży Użytkownika. Przypadek po prawej rozwiązuje to za pomocą jednego kroku, kliknięcia.
Krótsza podróż UX moim zdaniem jest czymś w rodzaju rozwiązania Problemu paraliżu wyboru użytkownika. Zakupy w supermarkecie zajmują nam zbyt dużo czasu? 10-20 rodzajów masła i marek nas paraliżuje? Poddajemy się, nie wiedząc, co wybrać? W końcu nie kupujemy nic? Sprytnym zabiegiem, trikiem, tzw. Life hack, który nam pomaga, są to żółte lub czerwone etykiety z produktami najczęściej wybieranymi lub etykiety z promocjami. Oszczędza nam to czas i eliminuje pewne dylematy. Podróż Użytkownika jest krótsza! Filtry negatywne pomagają użytkownikom w podobny sposób. Zgadzasz się z tym czy nie? Mam mniej, więcej rację? Myślę, że jednak więcej. Mniej strat z lejka. Każdy krok w procesie to oddzielny poziom lejka. Krótszy lejek oznacza mniej strat użytkowników w ramach naszego celu. Cel zależy od kluczowego wskaźnika efektywności (KPI). W przypadku sklepu internetowego KPI jest bardziej oczywiste – ostatecznym celem jest sprzedaż. Okej, drugim przykładem jest portal z zakwaterowaniem, dobrze znany Booking.com.
 |  |
 |  |
Przykład zainspirowany przez Booking przy użyciu Balsamiq. Lewy górny róg pokazuje, jak to wygląda obecnie. Prawy górny róg to 4-krokowa podróż, celem wyboru zakwaterowania typu wszystko, ale bez jednej gwiazdki. Następnie, lewy dolny róg to 1-krokowa podróż. W tej chwili jesteśmy przy rozwiązaniach operujących na Polach wyboru, tzw. Check box’ach. Łatwe do interpretacji przez użytkownika, ponieważ Pola wyboru są używane powszechnie. Prawy dolny róg to przejście do ostatecznego rozwiązania. Przycisk trzech stanów. Balsamiq nie był w stanie wesprzeć mnie od strony technicznej względem propozycji przycisku umieszczonego na samym początku artykułu. To, tutaj, to rozwiązanie jest rozwiązaniem pośrednim. Używając Figmy widzę, że jestem w stanie to osiągnąć, jednak użyłem prostego Painta, ze względu na wykorzystanie makiet tylko w ramach tego artykułu. Po tym drugim przykładzie przewodnia myśl artykułu powinna być bardziej przejrzysta, ponieważ w pierwszym przypadku Desigual mogło brakować początkowej wizji oraz rozwiązania pośredniego.
Znalazłem jeden przykład, w którym użyto filtra negatywnego. Nie wykorzystuje on moich koncepcji projektowania Interfejsu Użytkownika, UI z przyciskiem trój stanowym. Używa on prostego pola tekstowego. Przykład Cookidoo, platformy kulinarnej dla urządzeń Thormomix o wiele więcej pokazuje znaczenie wykluczania niektórych pozycji w filtrach. Wyobraźmy sobie, że chcemy upiec sobie chleb. Platforma Cookidoo dostarcza nam przepisy oraz instrukcje, jak przygotować ten posiłek. Możemy filtrować wszystkie przepisy za pomocą filtra pozytywnego dla frazy chleb. Załóżmy, że jesteśmy diabetykami z problemami metabolicznymi względem tolerancji cukru. Ktoś może mieć problemy z solą. Czasami oglądamy film i oglądamy sceny po tym, jak postać zjada coś zawierającego składnik orzechów i niebezpieczną reakcję alergiczną. Na szczęście dla platformy Cookidoo zaimplementowano filtr negatywny. Implementacja graficzna rozwiązania z polem tekstowym poniżej.
Przykład pochodzący z https://cookidoo.international
Podsumowanie. Zastanawialiśmy się tutaj nad implementacją UI dla filtra negatywnego. W poprzednim artykule nazwałem go xFilter, Brakujący filtr na wszystkich witrynach w kontekście UI/UX: xFilter. Artrykuł ten to przemyślenia wtórne. To, jak to może wyglądać, nie wpływa na pierwotne koncepcje z poprzedniego pomysłu, artykułu. Jest to mój punkt widzenia na chwilę obecną. Dziękuję.
