Projektowanie UI: Projektujemy listy

0:00Ok, omówiliśmy sobie podstawowe składowe tabelek, ale to nie wszystko, bo do tej

0:06pory mówiliśmy głównie o tabelach desktopowych.

0:09A co z małymi ekranami mobilnymi?

0:11Mobilne tabelki to dość trudny temat.

0:14No bo jak upchnąć te wszystkie informacje, które czasami ledwo mieszczą się na dużym

0:20ekranie komputera, na dużo mniejszej powierzchni?

0:24Projektanci i deweloperzy znaleźli na to

0:26kilka rozwiązań, które warto poznać, by wiedzieć, jakie mamy opcje.

0:31Pierwsza z nich to tabelka scrollowana przewijania, jakkolwiek ją nazwiemy.

0:38Jest najłatwiejszą z opcji, bo polega na

0:41tym, że umieszczamy tabelkę tak, by mogła być scrollowana w lewo i w prawo.

0:47Użytkownik zobaczy tylko część informacji

0:50jednocześnie i jeśli ma taką potrzebę, gestem swipe dotrze do informacji, których szuka.

0:56Mimo, że udostępniamy użytkownikowi

0:58wszystkie informacje tak jak miałby je dostępne na desktopie.

1:03Zdecydowanie utrudniamy skanowanie treści.

1:07Użytkownik jest zmuszony scrollować w prawo w lewo, w górę i w dół,

1:12by porównywać treści i upewniać się, że zerka na właściwe dane.

1:17Lekkim ulepszeniem poprzedniej wersji jest przypięcie kluczowej kolumny i pozwolenie

1:23na scrollowanie zawartości pozostałych kolumn.

1:28Dzięki temu bazowa informacja, która ma służyć za identyfikację danych.

1:34Upewniam się, że patrzę na informacje w odpowiednim wierszu, jest zawsze pod ręką.

1:39Sprawdzi się w przypadku kolumn, które nie są zbyt szerokie, mają np.

1:43bardzo krótkie frazy w komórkach.

1:46To rozwiązanie również ma minusy.

1:48Musimy wiedzieć, która kolumna powinna

1:50zostać przypięta lub dać wybór użytkownikowi, co niesie za

1:55sobą dodatkowe funkcje do zaprojektowania, wdrożenia i utrzymywania.

2:01OK, to mamy jeszcze skróconą tabelkę.

2:04Zdarza się, że mobilne tabele po prostu ucinają część informacji.

2:09O ile z punktu widzenia projektanta taka opcja może być najwygodniejszym

2:13rozwiązaniem, to z punktu widzenia użytkownika jest jedną ze słabszych opcji.

2:19Dlaczego?

2:20Użytkownicy mobilni nie chcą bowiem

2:22widzieć tylko wycinka informacji i szukać więcej używając innego urządzenia.

2:27Mogą też nie wiedzieć, że jest dostępnych

2:30więcej informacji w wersji desktopowej, bo zawsze korzystali z wersji mobilnej.

2:35Jako projektanci powinniśmy zapewnić więc

2:37doświadczenia, które nie różnią się zależnie od wykorzystywanego urządzenia.

2:43I ostatnia z opcji, o której chciałabym

2:46wspomnieć, to rezygnacja z tabeli w wersji mobilnej.

2:51Nie oznacza to wycięcia całego komponentu wraz z zawartością,

2:55a takie zaprojektowanie go, by treści dostępne w desktopowej tabelce

3:00zaprezentować w innej formie na ekranach mobilnych, np.

3:05w formie listy.

3:07To rozwiązanie spotkacie często w aplikacjach mobilnych banków, gdzie

3:10użytkownikowi serwuje się sporo informacji o historii transakcji.

3:15To data, tytuł, dane zlecającego przelew kwota, ale przy sprytnym rozłożeniu treści

3:23i opcji zwijania i rozwijania szczegółów można osiągnąć ciekawe efekty.

3:30W tym scenariuszu nie mamy jednak opcji do szybkiego porównywania danych.

3:34A przynajmniej nie tak szybkiego jak w klasycznych kolumnach.

3:39Zanim je zastosujemy, warto przemyśleć, czego potrzebują nasi użytkownicy,

3:44a następnie to do nich dopasować mobilne rozwiązanie.

3:48Nikt nie powiedział też, że trzeba wybrać jedno z powyższych.

3:52Często spotkacie się z hybrydami różnych opcji i to też jest ok.

3:57I na koniec warto pamiętać, że projektując mobilne tabelki nie tylko martwimy się o

4:03to, jak wyglądają rozłożone treści, ale również jak zachowują się po interakcji.

4:09W ekranach dotykowych tracimy bowiem opcje stanu po najechaniu kursorem myszy.

4:15Coś, co w desktopowych rozwiązaniach

4:17możemy rozwiązać właśnie przez tę funkcję, w mobilkach może być nieco utrudnione.

4:23Jeżeli więc w wersji desktopowej decydujemy się na używanie tej funkcji,

4:28musimy zapewnić alternatywę dla rozwiązań mobilnych, np.

4:32przez interakcję po tapnięciu lub elementy widoczne od razu.