Projektowanie UI: Filtrowanie i sortowanie

0:00Omówiliśmy już dość obszernie tabelki.

0:02Czas na listy.

0:04Listy potrafią różnić się od siebie dużo bardziej niż tabele.

0:08Wynika to z tego, że w zasadzie trudno mówić tu o stałych elementach.

0:13Tak jak tabelki definiuje rozłożenie danych między wiersze i kolumny.

0:18Takie listy mogą te wiersze i kolumny

0:20również w jakimś stopniu zawierać, ale nie tylko.

0:25To, co jednak jest wspólne dla jest i tabel, to spójność w ramach komponentu.

0:31Choć w jednym produkcie listy mogą przybierać różne formy, w ramach jednej

0:36listy wyniki będą prezentowane w podobny sposób.

0:39Listy pojawiają się prawie wszędzie.

0:41Wystarczy chwycić za telefon i zerknąć na kilka nawet natywnych aplikacji.

0:48Weźmy na przykład listę kontaktów, która

0:50przenosi nas do szczegółowych danych kontaktowych zapisanych w telefonie.

0:56Skrzynka odbiorcza pokazuje ostatnio otrzymane wiadomości.

1:00Jeśli odpalimy przeglądarkę, serwis z

1:03wiadomościami przekaże nam najistotniejsze wydarzenia właśnie w formie list

1:08składających się z tytułów miniaturek, zdjęć i krótkiego opisu.

1:15Wejdźmy na najpopularniejszą wyszukiwarkę na świecie, wyszukując dowolne hasło.

1:20Wyniki wyszukiwania zobaczymy właśnie w formie listy.

1:25Mając na uwadze, jak powszechnie stosowany

1:28jest ten wzorzec, warto przeglądać aplikacje i strony w poszukiwaniu

1:32inspiracji i wyszukiwaniu dobrych i złych rozwiązań.

1:38No dobrze, ale z czego składają się te listy?

1:41Na to pytanie mogłabym odpowiedzieć z czego tylko sobie wymyślicie?

1:46Bo no cóż, nie ma konkretnej definicji

1:48tego, co uważamy za komponent listy, a czego nie.

1:52Patrząc na dowolną listę kontaktów w telefonie, np.

1:56w aplikacjach, które pozwalają na zapraszanie znajomych

1:59lub śledzenia innych użytkowników, zobaczymy, że lista składa się z

2:04powtarzających się elementów ułożonych jeden pod drugim.

2:08Wierszy, których zawartość to nazwa kontaktu, zdjęcie, dodatkowe informacje,

2:14przycisk i separator, który ma oddzielać kontakt od kolejnego.

2:20Inny zakres i typ informacji znajdziemy w aplikacji mobilnej dysku Google.

2:25Przeglądając pliki w folderach lub

2:27korzystając z wyszukiwarki zobaczymy, że wyniki pojawiają się w

2:31formie ikony, która ma ułatwić szybkie rozpoznanie formatu pliku, nazwy

2:37informacji o ostatniej edycji, a także ikonie rozwijającej dodatkowe funkcje.

2:46No dobra, ale przejdźmy do bardziej

2:48skomplikowanych widoków list zerkając na sklepy internetowe.

2:53Widok listy to często domyślny widok produktów w sklepie.

2:57Do wyboru mamy również często opcję siatki, która świetnie sprowadzi się przy

3:02produktach, w których duże znaczenie ma wizualna strona, np.

3:06ubrania, gadżety i biżuteria.

3:09Listy w sklepach potrafią przytłoczyć ilością informacji.

3:13To ceny, rabaty, dodatkowe promocje, oceny

3:17użytkowników, nazwy, a także opisane najważniejsze cechy produktu.

3:22Wszystko to ma jednak bardzo konkretny cel.

3:25Pozwala użytkownikom już z poziomu listy

3:28podejmować pewne decyzje i zachęcać lub zniechęcać do klikania dalej.

3:35Gdybym miała podzielić listę na jakieś typy

3:38to prawdopodobnie podeszła bym do tego w ten sposób.

3:42Mamy proste listy, które składają się z kilku elementów.

3:46Najczęściej to tekst z jakimś drobnym elementem graficznym.

3:50Często ich projekt ma wspierać

3:52wyszukiwanie bardzo konkretnego elementu, dlatego są maksymalnie uproszczone.

3:59Drugi typ jak i wydaje mi się, że jest dość

4:03charakterystyczny dla list. To listy z kartami

4:06to z kolei z reguły bardziej rozbudowane

4:09listy, których celem jest raczej prezentacja różnych treści.

4:15Tu raczej scrollujemy.

4:16Przeglądamy i wybieramy interesujące

4:19pozycje na podstawie prezentowanych informacji.

4:23To mogą być listingi z wpisami na blogu albo produktami w sklepie internetowym.

4:30Karty są często opisywane jako osobne

4:32komponenty interfejsu, bo mogą mieć szerokie zastosowanie.

4:36Mogą pojawiać się nie tylko na listach, ale także w widokach siatek grid'ów.

4:41I tu znów wszystko będzie zależało od

4:43design systemu, na który będziecie zerkać i z którego będziecie korzystać.

4:49Poza samym formatowaniem pojedynczych elementów dobrze pamiętać o nazwie listy.

4:55Niektóre z nich będą być może łatwe do

4:57wnioskowania dla użytkownika, ale w samych sklepach internetowych

5:01rodzajów list potrafi być naprawdę całkiem sporo.

5:06Mamy na przykład listy różnych kategorii,

5:08listy z promocjami lub wyniki wyszukiwania w aplikacji z muzyką do słuchania

5:14mogą to być różne tytuły playlist, albumów lub utwory polubione przez znajomych.

5:21Choć pojawiają się często zdjęcia, nie są obowiązkowym elementem listy.

5:27Widzieliśmy to na przykładzie listy kontaktów lub skrzynki odbiorczej.

5:32Kiedy w takim razie powinniśmy je stosować?

5:35Zawsze wtedy, gdy dadzą użytkownikowi jakąś wartość np.

5:39w sklepie

5:40na podstawie wyglądu produktu wybierzemy np.

5:44sweter, który nam odpowiada.

5:46Gdy szukamy mieszkania w serwisie z ogłoszeniami, to jak wygląda miniaturka

5:51może zachęcić lub zniechęcić do klikania dalej.

5:56Jeżeli zdecydujemy się na stosowanie

5:59zdjęć, powinniśmy ustalić ich rozmiar podobny na wszystkich elementach listy.

6:06To, jaki rozmiar wybierzemy

6:08powinno być podyktowane tym, jak ważne jest zdjęcie dla użytkownika.

6:15Im ważniejsze, tym powinno być bardziej wyeksponowane.

6:20Oczywiście wielkość ma znaczenie w stosunku do pozostałych elementów.

6:24Im większe zdjęcie, tym pewnie mniej

6:26miejsca do zagospodarowania na teksty i pozostałe elementy interaktywne.

6:32Z kolei zbyt małe zdjęcie może sprawić, że będą nieczytelne.

6:37Same zdjęcia i tak naprawdę nie dadzą zbyt dużej wartości użytkownikowi.

6:42Będą po prostu niezbędnym elementem, bo użytkownik i tak będzie musiał przejść

6:46dalej, żeby zobaczyć, co tam na tym zdjęciu w ogóle jest.

6:50Pamiętajcie też, że marginesy pomiędzy zdjęciem a innymi elementami powinny być

6:56spójne, żeby kilka ułożonych pod sobą elementów tworzyło uporządkowaną listę.

7:03Zdjęcia najczęściej umieszczamy po lewej stronie od tekstu.

7:06Dla języków, gdzie czytamy od lewej do prawej.

7:09Chyba, że zdjęcie jest tylko dodatkiem, dekoracją.

7:13Jest szansa, że nie zawsze pojawi się na liście.

7:17Przykładem mogą być serwisy informacyjne,

7:19dla których zdjęcie jest ilustracją do tekstu.

7:23No dobrze, to jeszcze powiedzmy sobie o interakcjach na listach.

7:28Zwłaszcza w aplikacjach mobilnych i mobilnych stronach internetowych można

7:33zauważyć, że listy potrafią być bardzo interaktywnymi komponentami.

7:38Możemy zamieniać elementy na liście, kolejnością, usuwać je np.

7:43w skrzynce mailowej, dodawać do ulubionych, zmieniając ich status np.

7:48w Spotify albo w jakimś sklepie internetowym.

7:51Zwijać i rozwijać ich zawartość albo

7:54oznaczać kilka elementów, by móc dalej na nich pracować, np.

7:59wyeksportować jakiś zakres informacji albo usunąć lub opublikować elementy.

8:08W związku z tym, planując jak będą wyglądać elementy na liście,

8:12warto wziąć pod uwagę od razu, jak będą zachowywać się po interakcji,

8:18czy będzie zmieniał się kolor tła, a może będziemy mogli przesuwać całą

8:23kartę, Czy pojawi się wtedy cień, a może będzie przezroczysta?

8:28Te dodatkowe zabiegi będą miały wpływ na pozostałe elementy, więc by utrzymać

8:33spójność i nie przesadzać z efektami, trzeba sprawdzać je odpowiednio wcześniej.

8:41Na screenach widzicie aplikację XCOM'u i stronę internetową Morela.net

8:48Tam w bardzo ciekawy sposób pokazane jest,

8:50jak projektanci postanowili poinformować użytkowników o na pierwszy rzut oka

8:57niewidocznych dla nich interakcjach właśnie na na kartach listy.

9:02Więc zachęcam Was do tego, żeby skorzystać

9:05z tych aplikacji stron, żeby sprawdzić jak to wszystko sprawnie działa.