Projektowanie UI: Zadanie domowe #6

0:00No dobrze, ale tradycyjnie na koniec dobrze omówić sobie jeszcze kilka zasad.

0:07Myślenie systemem.

0:09W przypadku tabel i list dobrze jest myśleć o interfejsie jako systemie

0:15mniejszych elementów, które będziemy składać w większe systemy.

0:19Tabele to nic innego jak powtarzające się kolumny i wiersze.

0:24Ich różne wersje i stany musimy

0:25zaprojektować, ale przy dobrym planowaniu projektujemy je raz.

0:30Następny krok to złożenie ich w jeden komponent i wdrożenie.

0:34A nawet multiplikacja w różnych częściach produktu, który projektujemy.

0:39Listy to również zestaw powtarzających się elementów o podobnym układzie treści.

0:45Zmieniamy tylko same treści, wiedząc, że w produkcie będziemy

0:49wielokrotnie wykorzystywać zarówno listy, jak i tabele.

0:52Warto poświęcić czas i zaprojektować po

0:55jednym rodzaju z możliwymi wariantami, co przyspieszy późniejszą pracę projektową.

1:03W związku z tym, że w listach i tabelach znajdziemy często duże zbiory danych,

1:09trzeba zastanowić się, jak je podzielić użytkownikom.

1:13Do wyboru jest kilka opcji

1:15od automatycznego doładowywania się treści, gdy scrollujemy.

1:20Możemy ten mechanizm zaobserwować np.

1:23na Facebooku, przez klasyczne przyciski paginacji

1:28lub przez opcję jednego przycisku, który doładowuje treści na życzenie np.

1:34ma napis załaduj więcej, load more itd.

1:38Każda z tych opcji ma swoje plusy i

1:40minusy, dlatego zachęcam Was do pogłębienia tego tematu.

1:44Jeżeli będziecie zabierać się za projektowanie list i tabel.

1:49Nie zapominajmy też o liczbie wyników, a właściwie o informacji.

1:55To dość kluczowe w przypadku list wyników

1:58wyszukiwania i takich stron jak sklepy internetowe.

2:02Powinniśmy informować użytkowników, ile wyników mają do przeglądania.

2:07Dlaczego to takie ważne?

2:09Bo na tej podstawie mogą między innymi

2:11zadecydować, w jaki sposób będą te wyniki oglądać, czy zdecydują się na filtry.

2:17Jeśli wyników jest zbyt dużo, czy wręcz przeciwnie, będzie dużo łatwiej je

2:22wszystkie przeskrollować i sprawdzić szybko, czy jest coś, co ich interesuje.

2:28Informacja o liczbie wyników powinna być wyświetlana w związku z tym na samej górze

2:34przed listą, a nie na samym dole obok paginacji, jak to często miewa miejsce.

2:39No dobra, teraz czas na małą ciekawostkę z obszaru typografii.

2:44W tabelach i listach, gdzie ważne informacje to dane liczbowe,

2:48które chcemy szybko porównywać, warto stosować tak zwane cyfry tabelaryczne.

2:53To takie cyfry, które mają równe

2:55szerokości, co pozwala na ładne układanie ich w kolumnie.

2:59Dzięki temu łatwiej zeskanować nam kolumnę i zrozumieć różnice między wartościami.

3:04Jeżeli porównamy sobie te dwa przykłady górny i dolny, to zobaczycie, że w

3:10przypadku górnego środkowa wartość wydaje się węższa, więc na pierwszy rzut oka

3:15moglibyśmy stwierdzić, że tamta wartość ta liczba jest mniejsza niż pozostałe,

3:21co nie jest prawdą, bo jest najwyższą wartością spośród podanych.

3:26Wynika to z tego, że nie wszystkie cyfry

3:28mają te same szerokości w zaprojektowanym froncie.

3:31Jedynka jest dużo węższa niż np.

3:34piątka albo dziewiątka.

3:37Jeżeli krój został zaprojektowany w taki sposób, że wszystkie cyfry mają dokładnie

3:42tę samą szerokość, to będziemy mieć sytuację jak podana niżej.

3:46Czyli każdy.

3:47Każda kolumna cyfr układa się równo i

3:50dzięki temu na pierwszy rzut oka widzimy czy są jakieś

3:55wartości, które są dużo większe lub dużo mniejsze niż te pozostałe.

4:05Wiele fontów, web fantów takich fantów, które są przygotowywane do korzystania w sieci.

4:11Już mają zaprojektowane te wersje tabelaryczne, więc warto sprawdzić np.

4:18na stronie Google Fonts albo w jakimś innym serwisie skąd pobieramy

4:24fonty internetowe, jak zachowują się te cyfry i jakie mają szerokości.

4:30Myślę, że nie raz słyszeliście

4:32taką frazę jak obraz zamiast słów czy obraz jest wart tysiąca słów?

4:38Zdarza się, że projektujemy treści, w

4:40których wiele elementów jest powtarzalnych.

4:43Zamiast wielokrotnie używać tych samych fraz.

4:46Można rozważyć użycie dodatkowych elementów, rozróżniając np.

4:51różne statusy zamówień w sklepie użytkowników VIP od zwykłych, piosenek

4:56dodanych do listy ulubionych i całej reszty.

5:00Ikony i kodowanie kolorami potrafią

5:03oszczędzić mnóstwo miejsca w listach i tabelach i warto rozważyć ich stosowanie.

5:07Potrafią także przyspieszyć skanowanie wyników, które oglądamy.

5:12Zwłaszcza jeżeli doskonale już znamy zapis

5:15kolorystyczny i same ikony, które są stosowane w interfejsie.

5:22No właśnie.

5:23Uważajmy jednak, by nie stosować ikon, których użytkownicy mogą nie rozumieć,

5:28bądź zinterpretują w zupełnie inny sposób niż zakładaliśmy.

5:32Stosowanie kolorów również powinniśmy uzupełnić dodatkowym rozróżnieniem ze

5:37względu na osoby, które kolorów mogą nie rozróżniać.

5:43Oczywiście jak wszędzie łatwo przesadzić,

5:46więc pilnujmy, żeby nasze komponenty nie zamieniły się w choinkę.

5:49Zbyt wiele barw i elementów graficznych

5:52może zadziałać przeciwnie do zamierzonego efektu.

5:55Zamiast pomagać użytkownikom, będziemy tylko odwracać ich uwagę.

6:01Porozmawiajmy jeszcze chwilę o kolorach.

6:03W związku z tym, że tabele i listy w małej przestrzeni skupiają często wiele

6:08informacji, patrząc na całość, możemy odnosić wrażenie chaosu i przeładowania.

6:13Wspomniałam o kilku sposobach, jak zaradzić temu problemowi, np.

6:17przez rezygnację z separatorów między kolumnami i wierszami, powiększanie

6:22marginesów, ale nie zawsze mamy taką możliwość, np.

6:26ze względu na wymaganą ilość danych, które trzeba wyświetlić.

6:30To, co może nam jeszcze pomóc, to próba odpowiedniego zagrania kolorem.

6:34Zamiast używać kontrastów czystej bieli i czerni, możemy pokusić się na stosowanie

6:39szarości, jaśniejszych separatorów i odcieni kolorystycznych.

6:43Oczywiście róbmy to z głową i pamiętajmy o

6:45tym, że zbyt jasne elementy mogą być niewidoczne dla niektórych użytkowników.

6:53Tabele często wykorzystywane są w

6:55systemach, w których użytkownicy spędzają czas, by porównywać dane,

6:59analizować je lub poszukują informacji, by móc dalej z nimi pracować.

7:04Wyobraźcie sobie system, w którym macie

7:06dostępną tabelę z listą klientów w sklepie online.

7:09W tabeli znajdziecie mnóstwo informacji,

7:11które mogą kierować do bardziej szczegółowych danych.

7:15Z tej tabeli w różny sposób będą korzystać np.

7:18pracownicy marketingu.

7:20Będą chcieli analizować dane, generować

7:22statystyki i porównywać całe zbiory, a inaczej obsługa klienta, której celem

7:27będzie znalezienie dzwoniącego właśnie klienta i sprawdzenie statusu przesyłki.

7:33Oczywiście w idealnym świecie mielibyśmy

7:35zaprojektowane zupełnie inne widoki dla różnych typów użytkowników.

7:39Ale wyobraźcie sobie po prostu taki przykład w jednej opcji bardziej będą

7:44liczyć się funkcje pozwalające pracować na wielu wierszach jednocześnie.

7:49W innym przypadku głównym celem będzie

7:51szybkie wyszukiwanie, zawężenie wyników, by odnaleźć jedną informację.

7:56Jeżeli wiemy, że w naszych tabelkach z naszych tabelek będą korzystać różne

8:02osoby na różne sposoby i domyślnie ciężko będzie zaprojektować ją tak, żeby była

8:07idealnie dopasowana do wszystkich, możemy dać użytkownikowi możliwość

8:12dopasowania wyświetlanych danych do swoich potrzeb.

8:17To może być np.

8:18funkcja pozwalająca na zaznaczanie i

8:21odznaczanie kolumn, które powinny się wyświetlać.

8:27W ten sposób mamy pewność, że użytkownicy

8:30będą wyświetlać tylko używane przez nich dane.

8:32Będą mieli na nie więcej miejsca i łatwiej będzie im się poruszać po tabelce.

8:38W niektórych tabelach spotkacie się również z opcją zamiany kolejności kolumn.

8:43Jeśli użytkownikowi zależy na tym, by kluczowe dla niego informacje znalazły się

8:46blisko siebie, dzięki tej funkcji może na to sobie pozwolić.

8:51Po prostu sobie to ustawi.

8:55Kolejną funkcją, która może pomóc dostosować wygląd tabeli

9:00do użytkownika jest możliwość zmiany szerokości kolumn.

9:04Czasami, by zmieścić dużo informacji w

9:06małej przestrzeni, skracamy wyświetlane informacje np.

9:11przez wspomniane wcześniej trzy kropki.

9:14Użytkownik może dowolnie sterować szerokością kolumn i sam decydować, które

9:18z informacji będą w związku z tym skracane.

9:23Takie najprostsze zastosowanie tej funkcji znajdziecie w chociażby w arkuszach

9:27kalkulacyjnych, gdzie dowolnie możemy sterować nie tylko

9:31szerokością kolumn, ale również wysokością wiersza.

9:35Takie umożliwianie użytkownikom

9:37dopasowania interfejsu do siebie niesie ze sobą oczywiście wiele pułapek.

9:43Musimy przewidzieć dużo więcej

9:45scenariuszy, które muszą zostać obsłużone np.

9:49najmniejsze i największe możliwe

9:52szerokości tabelki lub co się stanie, gdy użytkownik będzie chciał odznaczyć

9:57wszystkie kolumny w tabeli jako niewidoczne.

10:00To również dużo więcej pracy dla developerów, więc zanim zdecydujemy się na

10:05dodatkowe funkcje, warto dobrze je przetestować.

10:09Czy nasi użytkownicy będą w ogóle z nich

10:11korzystać, a także omówić z całym zespołem odpowiedzialnym za powstawanie produktu?

10:17W wielu przykładach w tym kursie podawałam

10:20takie przykłady dość skomplikowanych struktur pełnych danych.

10:25Głównie dlatego, że to właśnie one będą najtrudniejsze do zaprojektowania.

10:30Nie oznacza to wcale, że nie używamy list i tabel do prostszych przypadków.

10:35Tabele z powodzeniem stosuje się w

10:37elementach, które mają służyć porównywaniu opcji zakupowych.

10:41Te potrafią składać się np.

10:43tylko z trzech kolumn i kładzie się

10:45większy nacisk na wyróżnienie jednej z nich, np.

10:49bardziej atrakcyjnej biznesowo opcji.

10:52Tabelki i listy bywają też małymi elementami na stronach, np.

10:57mogą być częścią dashboardów, które będziemy omawiać w dalszej części kursu.

11:02Zasady ich tworzenia są jednak dość spójne i przede wszystkim w pierwszej kolejności

11:07bierzemy zawsze pod uwagę czytelność danych.