Projektowanie UI: Zasady tworzenia list i tabel

0:00Na samym początku wspominałam o funkcjach

0:03filtrowania i sortowania jako wspólnych dla tabelek i list.

0:08Poświęćmy temu tematowi choć chwilę.

0:13Filtrowanie ma za zadanie zawęzić liczbę opcji.

0:19Wchodząc do sklepu internetowego z produktami spożywczymi, a chcąc kupić

0:23jedynie kilka kartonów soku, nie będziemy przeglądać wszystkich

0:28możliwych produktów, aż dotrzemy do poszukiwanych soków.

0:31No chyba, że naprawdę bardzo nam się nudzi i mamy mnóstwo czasu.

0:35Możemy sobie te poszukiwania skrócić.

0:38Wiemy, jakiego typu produktu szukamy.

0:42Możemy od razu zawęzić wyniki jedynie do napojów.

0:47Ale wśród napojów, zwłaszcza w dużych

0:50sklepach, jest jeszcze sporo opcji, które nas nie interesują.

0:55Używając kategorii jeśli zostały dobrze

0:59zaprojektowane, w nawigacji lub właśnie filtrów,

1:04możemy dotrzeć do naszego poszukiwanego produktu dużo szybciej.

1:10Wybieramy więc kategorię soki.

1:16W niektórych sklepach pewnie będziemy

1:17mogli wybrać jeszcze smak, a nawet konkretną markę, która nas interesuje.

1:23A jeśli dla nas to w ogóle istotne, Pod koniec do porównania

1:28i decyzji zostaje właściwie kilka produktów zamiast kilkuset

1:35początkowo wszystkich napojów, które

1:37mieliśmy do wyboru, więc ta decyzja będzie dużo prostsza i szybsza.

1:42W sklepach oprócz filtrowania mamy zazwyczaj

1:44jeszcze sortowanie, czyli dostosowanie listy według takich

1:49opcji jak ułożenie produktów od najtańszych do najdroższych i na odwrót.

1:56Czasami są to alfabetyczne sortowania nazw.

2:02Możemy w niektórych sklepach również sortować według opinii innych klientów.

2:07Jak oceniali dane produkty.

2:11Zarówno filtrowanie, jak i sortowanie są nierozłączną częścią tabeli list,

2:17choć zdarzają się oczywiście rozwiązania, które nie oferują ani jednej z tych opcji.

2:22Jeśli będziemy z nich rezygnować, warto

2:25mieć świadomość, jakie funkcje użytkownicy z nimi tracą.

2:30Funkcja filtrowania jest najczęściej

2:33osobnym komponentem znajdującym się w pobliżu tabeli lub listy.

2:38W przypadku rozwiązań mobilnych to z reguły przycisk, który otwiera dodatkową

2:43warstwę z dostępnymi filtrami, które następnie możemy dowolnie ustawiać.

2:48W przypadku wersji desktopowej

2:50filtry znajdziemy najczęściej nad listami i tabelami lub z boku.

2:55Wiele będzie zależało od założonego szablonu treści na innych podstronach

3:00oraz szerokości samego komponentu listy lub tabelki.

3:06Filtry.

3:07Dużo rzadziej możemy spotkać również wbudowane w nagłówki tabeli.

3:12Otwieramy je albo przez interakcję z tytułem kolumny lub domyślnie wyświetlają

3:17się w formie dodatkowego paska nawigacyjnego pod nagłówkami tabeli.

3:24W przypadków, które właśnie Wam pokazuję na ekranie mamy

3:29po najechaniu kursorem na nagłówek tabeli

3:32pojawiającą się ikonę, która następnie rozwija opcje filtrowania.

3:37Tutaj te filtry są naprawdę zaawansowane.

3:41Z tym rozwiązaniem częściej spotkacie się w skomplikowanych systemach zarządzania

3:47niż w produktach codziennego użytku, głównie ze względu na trudność użycia i

3:52stopień zaawansowania w obsłudze takiego interfejsu.

3:58I choć częściej filtry wydają się być

4:00zupełnie oddzielnym komponentem, projektując filtry i listy czy tabele,

4:05musimy myśleć o tym, jak będą na siebie wpływać.

4:09Filtrując informacje wpływamy na to, jak

4:12zachowują się i wyglądają wyniki tego filtrowania.

4:17Użytkownik musi widzieć, że filtrowanie jest aktywne.

4:21Najlepiej, żeby widział, które typy

4:23filtrów zastosował i dać mu możliwość edytowania tego zakresu.

4:29Na przykład poprzez usuwanie pojedynczych filtrów i dodawanie kolejnych.

4:35Dobrze jest również zapewnić użytkownikowi szybkie usunięcie wszystkich filtrów,

4:40bo okazało się, że wyniki filtrowania nie spełniają jego oczekiwań.

4:46To jak będą wyglądać filtry i z jakich komponentów będziemy korzystać

4:50przy ich tworzeniu powinno być w pełni zależne od funkcji, które spełniają.

4:56Dobieramy komponenty tak, by ułatwiały poruszanie się po filtrach i

5:01dawały dużą elastyczność w wyborze zakresu.

5:05To może być lista wielokrotnego wyboru.

5:08Pola tekstowe do wpisywania wartości np.

5:12maksymalnej ceny, ikony z wizualizacją wzorów i kolorów czy

5:16slidery pozwalające na ustawianie zakresów np.

5:21cen albo jakiś wielkości.

5:24Jednocześnie pamiętajmy o użytkownikach mobilnych i często trudniejszą obsługą

5:30komponentów przy użyciu palca zamiast myszy.

5:34Zdarza się, że opcji filtrowania jest bardzo dużo.

5:38Tu znów możemy zerknąć choćby na sklepy z

5:40elektroniką, które pozwalają filtrować po różnych funkcjach sprzętów.

5:45Pokazanie tak wielu filtrów może być dużym wyzwaniem, ale to co będzie kluczowe to

5:50przede wszystkim zadbanie o odpowiednią hierarchię.

5:54Warto na samej górze układać filtry, które

5:56będą najczęściej wykorzystywane przez użytkowników.

6:00Te, z których korzystać będą specjaliści, możemy grupować w formie filtrów

6:05zaawansowanych lub umieszczać trochę niżej.

6:09Sortowanie jest dużo prostszym tematem, choć nie mniej ważnym.

6:14Na przykład szukając nowego telewizora

6:17i kierując się głównie ceną produktu, użytkownik może chcieć w pierwszej

6:21kolejności wyświetlać te najtańsze na liście wyników.

6:28Dla innych ważniejsze będą najwyższe

6:31opinie użytkowników, a jeszcze inni będą poszukiwać wyłącznie nowości.

6:36Zwłaszcza, gdy wchodzimy na serwis blogowy

6:39i chcemy przejrzeć najnowsze nowinki ze świata technologii.

6:44O ile sortowanie w tabelkach możemy umieścić tuż przy nazwach kolumn,

6:49sortujemy wtedy po dowolnie wybranych wartościach od najniższych do najwyższych

6:53lub alfabetycznie, tak w przypadku list musimy znaleźć

6:57na sortowanie inne miejsce, najczęściej tuż nad listą.

7:04Ostatnio coraz częściej spotykam się też z

7:07łączeniem filtrowania i sortowania jako jednego komponentu,

7:11a w rozwiązaniach mobilnych sortowanie traktuje się jako jeden z filtrów.

7:15Zanim jednak zdecydujemy się na takie rozwiązanie, warto zastanowić się, czy dla

7:20użytkowników wybrane miejsce będzie intuicyjne i łatwe do odnalezienia.

7:27Te wszystkie funkcje wspierają wyszukiwanie treści.

7:32Wyszukujemy na różne sposoby

7:34przez swobodną eksplorację treści, przez zawężanie wyników z użyciem

7:39kategorii filtrów i dostosowując wyniki za pomocą sortowania.

7:44Możemy też skorzystać z klasycznej wyszukiwarki wpisując konkretną frazę.

7:50Dając możliwość wyszukiwania.

7:52Powinniśmy zaprojektować również wyniki

7:54tego wyszukiwania, czyli jak wygląda nasza lista albo tabelka.

7:59Kiedy użytkownik wpisze jakąś frazę?

8:02Jak pokażemy nasze propozycje, jak się ułożą i jakie informacje wyeksponujemy?

8:09Co stanie się, gdy użytkownik zrobi np.

8:12literówkę, której nasza wyszukiwarka nie wspiera?

8:15Pokażemy mu zupełnie pustą stronę.

8:17A może zaproponujemy inne akcje? W wielu produktach

8:22wyniki wyszukiwania nie różnią się bardzo

8:24od zwykłych elementów na listach i tabelach.

8:27Ale warto przyjrzeć się rozwiązaniom na różnych stronach, by wybrać wzorce

8:31odpowiadające najlepiej naszemu produktowi.

8:35Zerknijmy na wyniki wyszukiwania w Google wpisując frazę kotki.

8:39Wyszukiwarka pokaże nam od razu propozycje innego formatu niż

8:46strony internetowe, na przykład wideo,

8:49a dodatkowo na liście zobaczymy pogrubione frazy identyczne lub podobne

8:57do wyszukiwanej tej, którą wpisaliśmy w wyszukiwarkę.

9:02Sklepy internetowy z elektroniką

9:04nie pogrubi wpisanej frazy, po prostu wyświetla informacje o wyszukiwaniu

9:08powyżej listy, dając jednocześnie możliwość zawężenia wyników przez filtry.

9:13Zależności od tego, na jaki typ strony, na jaki typ produktu wpadniemy.

9:17Te zachowania wyszukiwarki wyników wyszukiwania mogą być bardzo różne.

9:23Brak wyników wyszukiwania to często zaniedbywana przez projektantów strona.

9:28Projektowanie pustych stanów jest równie

9:30istotne jak projektowanie pełnych treści stron.

9:34Popatrzmy na trzy różne przypadki.

9:37Na stronie internetowej księgarni dostaję

9:39komunikat, że nie znaleziono poszukiwanej przeze mnie frazy.

9:44I właściwie to tyle.

9:47W jednym ze sklepów z elektroniką.

9:49Projektanci zadbali o edukację klientów, instru, instruując.

9:54Co można poprawić, żeby znaleźć to, czego szukają?

9:58To wartościowa informacja dla osób, które niepewnie poruszają się po stronach

10:03i mogą nie rozumieć jeszcze, z czego wynika ten stan.

10:07Kolejny ze sklepów z kolei nie tylko informuje, co można poprawić, żeby

10:12szybciej znaleźć wyniki, ale również wykorzystuje tę przestrzeń,

10:16żeby przekierować użytkownika na kartę produktu.

10:21Możemy wykorzystać puste wyniki do

10:23pokazywania popularnych produktów, często używanych kategorii, ciekawych wpisów na

10:28blogu albo zaproponować pomoc przez chatbota albo biuro obsługi klienta.