Projektowanie UI: Mobilne tabele

0:01Tabele różnią się wielkością, złożonością,

0:04typem danych, lecz myśląc o tabeli mamy pewnie w głowie

0:08określone składowe, jak kolumny, wiersze i komórki.

0:13Ale jak to w projektowaniu interfejsów

0:15bywa, musimy zwrócić uwagę na najdrobniejsze szczegóły.

0:21Zacznijmy może od kolumn.

0:24Kolumny to pionowe listy, które zawierają podobny typ danych w tabelkach.

0:29Mogą to być imiona, nazwy produktów, ceny, wartości VAT albo kolumny, których głównym

0:35elementem będą interaktywne komponenty, jak checkboksy albo ikony akcji.

0:41Planując kolumnę musimy mieć na uwadze, jak długie treści mają się w niej znaleźć.

0:47Jeżeli będzie to wartość liczbowa nie

0:49przekraczająca dwóch lub trzech cyfr, to kolumna może być bardzo wąska.

0:55Jeżeli mamy natomiast w kolumnie

0:57umieszczać opis czy choćby imię i nazwisko lub adres mailowy, to musimy przewidzieć,

1:03że być może nie wszystkie treści zmieszczą się w zaplanowanej przestrzeni.

1:10Kolumny musimy oddzielić od siebie wizualnie.

1:13Najprościej zrobić to przez wstawienie

1:15cienkich linii pomiędzy lub zadbać o odpowiednie duże marginesy.

1:21Pusta przestrzeń będzie działała w podobny sposób jak kreska.

1:25Co więcej, może wizualnie odciążyć tabelę

1:28i czasami nawet zaoszczędzić sporo miejsca.

1:33Niezależnie od tego, jaki rodzaj przedzielenia wybierzemy, musimy

1:37zaplanować marginesy, które powinny dyktować, gdzie tekst w kolumnie będzie

1:42się zaczynał i do którego momentu maksymalnie się pojawi.

1:46Wartości marginesów musimy uwzględnić w szerokości kolumny.

1:51Jeżeli marginesy będą zbyt małe,

1:53teksty będą zbyt blisko linii lub kolejnych tekstów w kolumnie obok.

1:58W efekcie będziemy mieć dużo treści w

2:00małej przestrzeni, co wpłynie na łatwość wyszukiwania i porównywania informacji.

2:06Oczywiście pilnujemy, by odległości w kolumnach do tekstów były jednakowe.

2:12Ale pilnujmy się też, żeby kolumny

2:16nie były zbyt szerokie i za bardzo oddalone od siebie.

2:20Utrudni to tak samo jak małe przestrzenie, porównywanie informacji i sprawi,

2:25że zaburzy się rytm czytania, a dodatkowo nie wygląda to zbyt atrakcyjnie.

2:31Tego będziemy pilnować zwłaszcza przy projektach dużych rozdzielczości.

2:36Jeżeli nasza tabelka wygląda bardzo

2:39zgrabnie, zgrabnie w małych i średnich szerokościach, to przy pilnujmy, żeby nie

2:45rozciągała się za bardzo na maksymalne szerokości ekranów.

2:49Możemy to zapisać w formie jakiejś

2:52dokumentacji tekstowej przekazując projekt deweloperowi, albo pokazać to na

2:57przykładzie jednej tabelki w projekcie, po prostu pokazując do jakiej

3:02szerokości maksymalnie taka tabela powinna się rozciągnąć.

3:07Myśląc o szerokości kolumny, musimy też zaplanować, co, gdy tekst będzie dłuższy.

3:14W jaki sposób kolumna powinna się zachowywać, np.

3:17skracać frazę trzema kropkami albo zawijać tekst do dołu?

3:23Przemyślenie i dostosowanie tego zachowania do typów danych może wydawać

3:27się wtórne, ale uwierzcie mi, że nie chcecie, by przypadkiem dane skracały się

3:32w taki sposób, że niemożliwe będzie ich odróżnienie.

3:35Na przykład w sytuacji, w której

3:37najczęściej używane numery identyfikacji np.

3:40paczek w systemie to kilka ostatnich cyfr, które akurat się utnie, bo nie mieszczą

3:45się w całości i zostały skrócone do trzech kropek.

3:49W dodatku dochodzi temat tego, jak pokażemy użytkownikom ukrywane np.

3:54pod kropkami treści.

3:56Możemy to zrobić przez pokazanie tooltip'a po najechaniu kursorem na skróconą nazwę.

4:04To, co również musimy przewidzieć to formatowanie tekstu w tabeli.

4:09Standardowo wyrównujemy wszystkie wartości do lewej strony.

4:13Przede wszystkim uporządkuje to wizualnie

4:15tabelę, zwłaszcza gdy rezygnujemy z linii przebiegających kolumnę.

4:20Wyrównanie do prawej strony możemy

4:22stosować przy wartościach liczbowych, które chcemy porównywać np.

4:27liczba odtworzeń, kwotę, liczbę dostępnych produktów itd.

4:32Dzięki temu na pierwszy rzut oka widzimy różnicę w szerokości tej liczby.

4:38Ile tamtych cyferek się w tej liczbie znajduje i te o wyższych wartościach

4:44będą po prostu szersze, więc będą się rzucały bardziej w oczy.

4:48Zasada ta nie musi być zastosowana przy numerach telefonów czy numerach

4:53identyfikacyjnych, bo tam nie dochodzi do tego porównywania wartości.

4:59Wiersze to poziome listy zbierające informacje o jednym elemencie.

5:04Jeżeli mamy tabelkę z danymi osobowymi, to

5:07jeden wiersz będzie odpowiadał jednej osobie w wierszu.

5:10Możemy mieć różne typy treści teksty, liczby, obrazki, ikony czy przyciski.

5:16To, na co będziemy zwracać tu uwagę, to

5:18przede wszystkim ich wysokość, czyli marginesy nad i pod treścią.

5:24Wiersze zbyt blisko siebie będą dawały

5:26wrażenie bardziej zbitych i mniej przyjemnych do czytania.

5:30Zbyt wielkie odległości między wierszami utrudnią porównywanie informacji między

5:35nimi lub wręcz uniemożliwią, bo niewiele z nich zmieści się na ekranie jednocześnie.

5:43Tak jak w przypadku kolumn, musimy wizualnie rozdzielić wiersze między sobą.

5:48Możemy to zrobić separatorami

5:50pustą przestrzenią lub rozróżniając naprzemiennie tła wierszy.

5:56Warto mieć na uwadze, że jeśli używamy już separatorów w kolumnach,

6:00to dodanie i w wierszach sprawi, że utworzy nam się widoczna siatka,

6:04która zamiast pomóc, będzie odwracać uwagę użytkownika od treści.

6:10Takie rozdzielenie poszczególnych komórek

6:12sprawdza się w tabelach, gdzie mamy wiele danych upchnięte w małej przestrzeni.

6:18Nie dalibyśmy rady inaczej rozdzielić kolumn i wierszy od siebie.

6:22Jeśli nasza tabelka jest lżejsza, możemy zdecydować się tylko na

6:27rozdzielanie separatorami wierszy lub samych kolumn.

6:34Układając treści w wierszach, które mają więcej niż jedną linię tekstu, musimy

6:40również ustalić, w jaki sposób wyrównują się teksty w pionie.

6:45Najlepiej jest stosować wyrównanie do góry, co uporządkuje nam wizualnie tabelę.

6:51Jeżeli wydrukujemy treści w pionie, przy dużej ilości ich będziemy mieć efekt

6:55skoków, co negatywnie wpływa na rytm czytania, a tym samym sprawi, że dłużej i

7:01trudniej będzie porównywać zestawianie danych.

7:05Taka tabelka będzie wtedy też wyglądała bardziej chaotycznie.

7:15Możemy zaprojektować tabelę, w której

7:17wiersze można zaznaczać najczęściej przy użyciu checkboxa.

7:23Oprócz zmiany stanu kontrolki

7:26powinniśmy również odróżnić oznaczony wiersz od pozostałych.

7:31Można to zrobić przez zmianę tła

7:34lub podbicie cieniem, tak by wizualnie wiersz wyszedł trochę na wierzch.

7:40Jeżeli dajemy opcję zaznaczania checkboxami,

7:44najlepiej stworzyć dedykowaną kolumnę, która składa się właśnie z nich.

7:49Takie kolumny często pojawiają się na

7:52samym początku tabeli jako pierwsza lub druga kolumna.

7:56Tym samym warto przewidzieć opcję zaznaczania wszystkich wierszy w tabeli.

8:02Możemy to zrobić umieszczając w nagłówku

8:04tabeli checkbox, który będzie zaznaczał i odznaczał wszystkie elementy.

8:13Dodatkowo w niektórych tabelach spotkacie się z możliwością rozwinięcia treści np.

8:19przez użycie ikonki strzałki w dół,

8:22która dodatkowe treści pokaże poniżej, rozciągając wysokość wiersza.

8:28Zobaczcie jak z kolei robi to WordPress.

8:31Tabele w panelu obsługi po najechaniu

8:33kursorem na wiersz odsłaniają dodatkowe opcje pod postacią kilku linków.

8:41Zaprojektowanie stanu po najechaniu

8:44kursorem na wiersz to interakcja, o której nie powinniśmy zapominać, zwłaszcza w

8:49tabelach, gdzie mamy zestawienia dużych ilości danych.

8:54Opcja podświetlania wiersza jest całkiem przydatna i są osoby, które będą używać

8:59jej, by zaznaczać sobie wiersz, który ich interesuje, albo który właśnie oglądają.

9:07Warto wspomnieć jeszcze o nagłówkach tabeli.

9:10To dodatkowy wiersz wyświetlany na samej górze tabeli, który służy do wytłumaczenia

9:16użytkownikowi, czym właściwie są wyświetlane poniżej dane.

9:21Najprościej mówiąc to wiersz z tytułami kolumn.

9:28Sam wiersz najczęściej różni się wizualnie od wierszy niżej.

9:33Chodzi o to, żeby użytkownicy nie mylili go z danymi w tabeli.

9:38Może mieć inną wysokość, tło lub wyróżniającą typografie.

9:43Teksty pisane wielkimi literami, pogrubione fonty lub inne ich rozmiary.

9:49Pilnujmy jednak, by tytuły zaczynały się w tym samym miejscu, w którym zaczynają się

9:54teksty w całej kolumnie i były wyrównane w ten sam sposób.

10:00Jeżeli mamy kolumnę, w której liczby będą wyrównane do prawej, tytuł kolumny również

10:05powinniśmy wtedy wyrównać do prawej strony.

10:08I tak samo, jeżeli mamy kolumny wyrównane

10:11do lewej, porównamy tytuły do lewej strony.

10:14Dodatkową funkcją, która może pojawić się w nagłówkach jest opcja sortowania.

10:20Sortowanie może być oczywiście zupełnie

10:23osobnym elementem wyświetlanym nad tabelą, ale spotkacie się z tabelami, które dodają

10:29ikonę sortowania właśnie tuż obok nagłówków.

10:33O sortowaniu i filtrowaniu będziemy mówić

10:35jeszcze w dalszej części warsztatu, bo to tematy właściwie na osobne kursy.

10:42Przy długich tabelach warto wziąć pod

10:44uwagę również opcję przypinania nagłówka tabeli do górnego okna przeglądarki.

10:51Pozwoli to na stałe kontrolowanie, jakiego

10:54typu treści przeglądamy, zwłaszcza gdy jest ich dużo i łatwo się pomylić.

11:03Tutaj jak widzicie scrollując

11:05cały czas widzę, że podane liczby to rok, data czy wiek.

11:13Na koniec wspomnieć warto również o tle tabeli tak zwanym kontenerze.

11:20Jak już sobie poskładam te wszystkie

11:21kolumny i wiersze i nagłówki tabeli, to ubieramy to wszystko właśnie w tzw.

11:25kontener, który zamyka wszystkie te elementy w ramach jednej tabeli.

11:31Może mieć inne tło niż pozostałe elementy na stronie, ale musimy pamiętać, by było

11:37odpowiednio kontrastowe dla danych w tabeli i nie może utrudniać czytania.

11:42Może mieć dodatkową ramkę lub cień, ale to

11:45powinniśmy dobierać zawsze do stylu elementów na stronie.