Jak projektować dobre tabele?

Przeczytanie tego artykułu zajmie Ci około 00:05:00

TL;DR - każdy materiał dostępny w serwisie, staramy się aby był maksymalnie konkretny i merytoryczny. Bez lania wody i pitu pitu.

Czytając dowiesz się...

  • jak zaprojektować idealną tabelę
  • jak wyglądają najlepsze wzorce
  • jak nie popełniać popularnych błędów

Internetowe aplikacje biznesowe to miejsce, gdzie zazwyczaj pojawia się szalona ilość informacji. Raporty, zestawienia, wyniki wyszukiwania – wszystkie te skomplikowane zbiory danych są najczęściej prezentowane w formie tabeli, których optymalna szerokość zwykle wykracza poza dostępne miejsce (szerokość ekranu monitora). Jeżeli wpadamy na pomysł rezygnacji z części niepotrzebnych kolumn, szybko okazuje się, że wszystkie są niemal tak samo ważne i pożądane.

Z innej strony mamy problem, polegający na tym, że aplikacje biznesowe zawierają dane poufne dotyczące firmy, klientów, zamówień…

Jednocześnie po Europie rozlała się fala RODO, skutkiem tego jest to, iż projektanci przestali dzielić się przykładami czy dobrymi wzorcami. Inspiracje, jakie można znaleźć to przykłady tabel, które ładnie wyglądają, ale mają zwykle problemy dotyczące użyteczności albo nie uwzględniają kontekstu użycia.

To, co pokazuje niżej to klasyczny przykład tabeli. Na pierwszy rzut oka nie ma problemów z użytecznością. Jednak gdy zaczniesz się zastanawiać i zagłębiać albo po prostu staniesz się użytkownikiem i zaczniesz z takiej tabeli korzystać – okaże się, że jest tu sporo dziwactw…

projektowanie tabel ux

Linki w tabeli

linki w tabeli - user experience

Naciśnięcie w odnośniki z obrazka powyżej prawdopodobnie przerzuci nas do profilu użytkownika. Dobre doświadczenia użytkownika (czyli dobry UX) polegają na tym, że nie wymagamy od użytkownika zastanawiania się w zakresie „a do czego to służy?” albo „co stanie się, gdy w to nacisnę?”.

Czyli problemem w tym wypadku jest to, iż odnośniki w 1 kolumnie nie są jednoznaczne. Zgodzę się na pewno, że w tym wypadku problem jest naciągany, przecież użytkownik jest w stanie się tego domyśleć. Jeżeli spojrzymy na problem z innej strony… jeżeli naciśnięcie w odnośnik w 1 kolumnie spowoduje wyświetlenie profilu użytkownika, to co w takim razie stanie się, gdy naciśniesz tutaj?

Tabele - często popełniane błędy

Ta tabela to przykład z życia gdzie naciśnięcie w komórce z 2 kolumny powodowało skopiowanie kodu do schowka. Takie działanie jest trudne do zrozumienia, nie jest przejrzyste i klarowne – takich wzorców warto unikać.

Odnośniki i przyciski w tabeli

Wykonywanie akcji takich jak usuwanie, kopiowanie, przenoszenie, drukowanie, eksportowanie jest bardzo powszechne. W wielu przypadkach tego typu działania wykonuje się w odniesieniu do większej ilości rekordów jednocześnie.

Przykład:

Chcesz oznaczyć wszystkie wiersze jako „wykonane”.

Znaczna większość aplikacji biznesowych prezentuje błędny wzorzec gdzie ten sam odnośnik/przycisk widnieje w każdym z wierszy tabeli. Poprawnie powinno to wyglądać w ten sposób, że istnieje osobna sekcja, w której znajdują się odnośniki, przyciski, ikony pozwalające wykonać akcję.

takie same przyciski w tabeli

Na powyższym przykładzie w każdym z wierszy znajdziemy odnośnik „usuń”. Spróbuj sobie wyobrazić wygląd tej kolumny, gdyby dla każdej z pozycji można było wykonać np. 4 akcje (oznaczyć jako ukończone, skopiować, dodać komentarz, przenieść do innej kategorii. Taka tabela nie miałaby nic wspólnego z czytelnością.

Dodatkowo w powyższym przykładzie nie możemy 1 kliknięciem usunąć wszystkich widocznych wierszy, czyli jeżeli użytkownik ma potrzebę wykonania akcji zbiorowych to wymuszamy, żeby robił to „mechanicznie” (każda pozycja osobno). Wyobraź sobie sytuację, gdy użytkownik musi usunąć z bazy 6 230 użytkowników :)

jedna ikona rozwijania akcji - usability

Tutaj przykład, nowoczesnej aplikacji, w której dla każdego z wierszy pojawiają się checkboxy. To bardzo dobry przykład rozwiązania problemu. Akcje per wiersz pozostały, ale tym razem są ukryte pod ikoną trzech kropek a wykonywanie akcji zborowych działa w ten sposób, że jeżeli zaznaczymy więcej rekordów, na dole ekranu wyświetla nam się sekcja dotycząca możliwych do wykonania akcji:

zaznaczanie wielu wierszy

Najlepiej zaprojektowane tabele dają dodatkowo możliwość szybkiego zaznaczania z użyciem klawisza SHIFT. Sposób działania, który pewnie doskonale znasz z arkuszy kalkulacyjnych. Dobrym przykładem jak to powinno być obsłużone jest wzorzec aplikacji Google Inbox. W tej aplikacji po zaznaczeniu kilku checkboxów, użytkownik jest informowany o „wskazówką dla zaawansowanych”

wskazówka - ux

Użycie w tabeli ikon, do wykonywania akcji jest ryzykowne. Ikony sprawiają, że użytkownik musi się zastanowić nad działaniem. Zgodnie z zasadami UX, nie powinniśmy kazać użytkownikowi myśleć. Swoją drogą każdemu, kto jeszcze nie zna, polecam lekturę książki „Nie każ mi myśleć” autorstwa Steve Krug’a. Rewelacyjna pozycja, która w skrócie wyjaśnia na przykładach czym jest prawidłowe projektowanie doświadczeń użytkownika, czyli czym tak naprawdę jest użyteczność i ux. Książka do kupienia np. tutaj

Czyli ikony tak – ale wtedy gdy są bardzo jednoznaczne. Jednoznaczne są, wtedy gdy w badaniu 7 na 8 osób bez zastanowienia celnie odgaduje akcję, jaka kryje się za daną ikoną. W przeciwnym wypadku rekomenduje stosowanie odnośników tekstowych. Ciekawym rozwiązaniem zdobywającym ostatnio popularność jest połączenie ikony z tekstem. Ten sposób wydaje się być interesującym wzorcem.

Zerknij na ten przykład:

najlepsze wzorce projektowania tabel - ux

Zauważ bardzo dziwne zestawienie — użytkownik identyfikuje wiersze po kolumnie nr 1, natomiast czynność, którą zamierza wykonać, w odniesieniu do danego rekordu, wykonuje w kolumnie nr 6. Kolumny są od siebie oddalone tak bardzo, jak to tylko możliwe.

Co zdaje się błędem. Dlaczego? Istnieje olbrzymie prawdopodobieństwo pomyłki. Łatwo wyobrazić sobie sytuację, w której usuwamy użytkownika B zamiast A (tak jak zamierzaliśmy). Wydaje się, że w tym przypadku odnośniki powinny znaleźć się w sąsiedztwie kolumny nr 1. Doświadczenie uczy nas, że tego typu założenia powinno traktować się jako hipotezę. Dlatego, zanim potraktujesz moje rekomendacje jak prawdę objawioną – polecam, sprawdź to na własnym przykładzie, kontekście.

Paginacja i wyszukiwanie

Dosyć oczywistą i powtarzalną sytuacją jest taka, w której tabele, mowa o tych z webowych aplikacji biznesowych, mają więcej niż 1 stronę. Czyli pojawia nam się stronicowanie, częściej nazywane z angielskiego paginacją. Projektanci dzielą się na tych, którzy są zwolennikami paginacji i tych, którzy głoszą koncepcję prezentacji wszystkich danych na jednej stronie.

Paginacja tak naprawę nie jest wymysłem projektantów. Dane w tabelach są dzielone z powodów technologicznych. Infrastruktura serwerowa, z jakiej korzystają współczesne aplikacje, nie jest jeszcze na tyle rozwinięta, aby pozwalała na pobranie, analizę, wyświetlenie np. miliona rekordów. Technicznie dałoby radę to zrobić, ale właściciele takiej aplikacji nie unieśliby kosztów takiego hostingu. Dlatego właśnie programiści zaproponowali światu paginację.

W ciągu ostatnich 2 lat dosyć popularna jest jeszcze paginacja dynamiczna. Czyli ukłon w stronę wyświetlania wszystkiego na 1 stronie, polegający na tym, że wyświetlamy np. 100 rekordów i w momencie, gdy użytkownik dociera do końca tabeli, interfejs wczytuje kolejne… i tak aż do końca. Mechanizm pewnie znasz doskonale z Facebook’a – spróbuj na swoim wall’u dotrzeć do stopki :)

W tym wypadku pozostaje pytanie, czy takie wczytywanie ma następować automatycznie, jak to ma miejsce np. na Facebooku, czy po wykonaniu akcji:

W 2016-2017 prowadziłem partyzanckie badania z których wynikało takie zdanie:

Wzorzec projektowania tabeli jest dobry czyt. właściwy, jeżeli nie potrzebuje paginacji

Bardzo dziwne zdanie, ale zastanówmy się, jaka powinna być tabela, która na nie właściwie odpowiada? Taka tabela moim zdaniem powinna mieć świetnie skonstruowane filtry i solidnie stworzony mechanizm wyszukiwania.

W sytuacji, gdy użytkownik używa paginacji, poszukuje czegoś konkretnego. Tak, więc zanim przystąpisz do projektowania dobrej paginacji, powinieneś zadać sobie pytanie:

Jak możemy zrobić, żeby odnajdywanie informacji w tej tabeli stało się łatwiejsze?

Jednym z lepszych rozwiązań są w tej sytuacji filtry kontekstowe. Czyli filtry, których zachowanie zmienia się w zależności od działań użytkownika. W poniższym przykładzie aplikacja wyświetla różne możliwości filtrowania w zależności od etapu, na jakim znajduje się użytkownik.

Taki sposób działania jest oczywiście trudniejszy do wdrożenia i często powoduje kiwanie horyzontalne głową u programistów (frontendowców). Jednak moim zdaniem człowiek ma pierwszeństwo przed technologią, czasochłonnością itd… Jeżeli wdrożenie takich filtrów skutkuje dobrym UX-em dla użytkownika to poniesienie trudów i kosztów ma sens.

filtry kontekstowe - projektowanie tabel

Kiedy paginacja pomaga?

Obraz mówi więcej niż 1000 słów. Dlatego wystarczy że spojrzysz :)

dobra paginacja

Ok, wiemy jak patrzeć na paginację i wyszukiwanie. Problem w tym że w 2018 roku paginacja wygląda zazwyczaj tak:

statystyczna paginacja

Użytkownik widzi w tym wypadku 10 rekordów i ma możliwość obejrzenia 11 dopiero po użyciu paginacji. Dlaczego w tym wypadku algorytm paginacji nie stwierdził, że jeżeli pozostała tylko 1 do 3 pozycji to te wyświetlamy jeszcze w ramach pierwszej strony? Albo jeszcze lepiej… w tym wypadku w ogóle nie powinna pojawić się paginacja. Przykład: Nie pokazuj paginacji, jeżeli elementów jest mniej niż 50.

Taki sposób działania paginacji wymaga więcej pracy programisty, ale zastanówmy się, dlaczego mielibyśmy iść na łatwiznę? Czy właśnie rozwój świata, powstanie Internetu, stworzenie smartfonów nie polegał na tym, że ktoś chciał zrobić coś więcej niż standard? Jeżeli wszystko miałoby być zawsze takie samo i w dodatku realizowane w jak najkrótszym czasie to spokojnie możemy zastąpić programistów robotami. Jednak jeżeli sadzamy przed monitorem człowieka, to dobrze byłoby, aby myślał i pracował w sposób wykraczający poza schematy.

Paginacja a zaznaczanie checkboxów

Jednym z często powtarzających się problemów jest ten widoczny poniżej:

problemy z paginacją

W tym wypadku użytkownik chce przejrzeć wiadomości e-mail i usunąć te niepotrzebne. Widzimy skrzynkę odbiorczą. Aplikacja wg. wskazania paginacji w prawym górnym rogu informuje nas, że aktualnie widzimy 50 pierwszych wiadomości z 3328 dostępnych ogółem. Użytkownik zaznacza 3 pozycje na 1 stronie, przechodzi na kolejną, gdzie zaznacza 4 pozycje. Patrząc od strony logiki, teraz ma zaznaczone 7 pozycji i gdy zechce nacisnąć przycisk „usuń” wszystkie 7 pozycji zostanie usunięte. Jednak w tym wypadku z komunikatu dowiadujemy się, że 4 wiadomości zostały usunięte. A zaznaczone 3 pozycje z pierwszej strony pozostały bez zmian.

Dlaczego tak się dzieje? Dlatego że obsłużenie takiej sytuacji przez programistę jest nieco bardziej skomplikowane. Nie oznacza to, że jest niewykonalne.

Podobna sytuacja występuje, wtedy gdy chcesz zaznaczyć wszystkie wiersze w tabeli, która korzysta z paginacji. Takie tabele dają ci wtedy możliwość zaznaczenia wszystkich wierszy, ale tylko w obrębie danej strony tabeli. Przykład: Tabela wyświetla aktualnie pierwsze 50 wierszy z 25 000 dostępnych ogólnie. Zaznaczając wszystkie – usuniesz tylko 50. W przypadku gdy zechcesz usunąć wszystkie pozycje, aplikacja wymagać będzie od Ciebie powtórzenia tego samego schematu 500 razy! „zaznacz wszystkie > naciśnij usuń > potwierdź usunięcie”.

Dobry przykład jak można ten problem rozwiązać pośrednio:

zaznaczanie wielu pozycji w tabeli

Tutaj użytkownik zaznaczył wszystkie pozycje na stronie i następnie system umożliwił zaznaczenie wszystkich w całej tabeli. Takie rozwiązanie nie jest idealne. Dlaczego? A co w przypadku gdy chcesz zaznaczyć wszystkie pozycje w tabeli oprócz tych ze strony 5 i 14 :)

Dobre praktyki

Dobrze zaprojektowana tabela (pod kątem UX) to taka, która odpowiednio wizualizuje dane, ale jednocześnie pozwala je sprytnie i szybko przetwarzać, operować na nich. Najlepsze wzorce tabel to takie gdzie użytkownik może skanować, analizować, porównywać, filtrować, sortować i manipulować danymi.

Jak projektować lepsze tabele?

Dane stają się bezużyteczne bez możliwości wizualizacji i operowania na nich. Z wielu stron słyszymy, że przyszłość wielu branż związana jest z tzw. Big Data, czyli zaawansowanym gromadzeniem, analizowaniem i przetwarzaniem dużych ilości danych/informacji. Dobre tabele z danymi umożliwiają skanowanie, analizowanie, porównywanie, filtrowanie, sortowania i manipulowanie informacjami. Najlepsze przykłady tabel to takie gdzie każdy użytkownik może dopasować tabelę pod własne preferencje i potrzeby.

W 2017 roku przeanalizowałem ponad 2500 przykładów tabel. Oglądałem tabele w zaawansowanych systemach biznesowych, jak i uniwersalne rozwiązania typu datatables (powszechnie wykorzystywany skrypt, wykorzystywany na dziesiątkach stron). W wyniku mojej analizy powstał zbiór dobrych przykładów, wzorców. Zapraszam w podróż po świecie tabel w Internecie i aplikacjach…

Przyklejony nagłówek

przyklejenie nagłówka w tabeli

Przyklejenie wiersza nagłówka podczas przewijania użytkownika dostarcza kontekstu na temat kolumny użytkownika. Dzięki temu użytkownik w każdym momencie wie, czego dotyczy dana kolumna.

Przewijanie w poziomie

ux - przewijanie w poziomie

Przewijanie tabeli w poziomie jest nieuniknione podczas prezentacji dużych zestawów danych. Dobrą praktyką jest umieszczanie danych identyfikacyjnych w pierwszej kolumnie. Co to są dane identyfikacyjne? To dane, po których identyfikujemy wiersze np. w spisie pracowników firmy, to będzie imię i nazwisko pracownika a w wykazie budynków będzie to adres, przy jakim znajduje się budynek.

W najbardziej zaawansowanych przypadkach warto umożliwić użytkownikowi indywidualne blokowanie kolumn. Dzięki temu użytkownicy będą mogli porównywać dane z wieloma identyfikatorami kotwiczącymi.

Zmienna szerokość kolumn

zmienna szerokość kolumn

Zmiana rozmiaru kolumn, pozwala użytkownikom zobaczyć pełne dane w skrócie.

Styl graficzny wiersza z danymi

wygląd tabeli

W kwestii komfortu korzystania z tabeli dużą wagę mają kwestie wizualne. To, jaką czcionkę mają dane (styl, kolor, rozmiar), czy wierze są naprzemiennie jaśniejsze/ciemniejsze, czy odpowiedni kolor mają linie rozdzielające wiersze, wpływa na użyteczność i user experience tabeli.

Tabela powinna być tak zaprojektowana, aby użytkownicy nie tracili ciągłości, np. czytam wiersz i potem trudno mi przejść do następnego bez zagubienia. Naprzemienne wiersze tzw. paski zebry, pomagają zachować swoje miejsce podczas skanowania długich poziomych zbiorów danych.

Zmienna gęstość danych

zmienianie gęstości tabeli - wzorce ux

Mniejsza wysokość wiersza umożliwia użytkownikowi przeglądanie większej ilości danych bez konieczności przewijania. Wpływa jednak na możliwość skanowania, co prowadzi do błędów analizy. Dlatego wiele udanych projektów tabel danych zawiera możliwość kontrolowania gęstości wyświetlania. Sugeruje stosowanie takiej możliwości w każdym z możliwych przypadków tabel.

Podsumowanie tabeli

podsumowanie tabeli

Podsumowanie tabeli pozwala użytkownikowi na wykrycie wzorców i problemów w agregacji przed wykonaniem podsumowujących analiz.

Paginacja

paginacja - ux

O paginacji pisałem już wcześniej, ale dodam jeszcze, że powyższy przykład zapewnia możliwość dostosowania liczby wyświetlanych wierszy per widok. Coraz częściej paginacja j.w zastępowana jest tzw. infinity scroll (nieskończone przewijanie). Nieskończone przewijanie stopniowo ładuje wyniki, gdy użytkownik przewija. Funkcja nieskończonego przewijania działa dobrze na stronach internetowych z informacjami o wyszukiwaniu, ale zwykle jest katastrofalna w przypadku aplikacji do ustalania priorytetów. Temat paginacji w tabelach nie jest prosty i podjęcie odpowiednich decyzji, wymaga przestudiowania kontekstu.

Najedź na akcję

akcja po najechaniu

Przedstawienie dodatkowej akcji, w sytuacji, gdy użytkownik najeżdża na dany wiersz kursorem, zmniejsza bałagan wizualny. Może to jednak powodować problemy z wykrywaniem, ponieważ użytkownik musi wchodzić w interakcję z tabelą, aby odsłonić prezentację działań. Na razie nie udało mi się w tym zakresie przeprowadzić żadnych sensownych badań. Zamierzam takie przeprowadzić w najbliższym czasie, wtedy z pewnością zaktualizuje ten artykuł.

Edycja danych bezpośrednio w tabeli

edycja inline w tabeli

Edycja bezpośrednia umożliwia użytkownikowi zmianę danych bez przechodzenia do osobnego widoku szczegółów.

Rozwijane wiersze

rozwijane wiersze tabeli

Rozwijane wiersze umożliwiają użytkownikowi ocenę dodatkowych informacji bez utraty ich kontekstu.

Szybki podgląd

szybki podgląd w tabelach

Podobnie jak rozwijane wiersze, szybki widok — umożliwia użytkownikowi, przeglądanie dodatkowych informacji pozostając w kontekście.

Szczegóły multi wierszowe

multiwerszowe

Kliknięcie linku wiersza przekształca tabelę w widok z elementami listy po lewej i dodatkowymi szczegółami po prawej. Takie rozwiązanie umożliwia użytkownikowi analizowanie dużych zbiorów danych, a także odwoływanie się do wielu elementów bez utraty ich miejsca.

Sortowanie

sortowanie w tabeli

Sortowanie kolumn pozwala użytkownikom uporządkować wiersze alfabetycznie i numerycznie.

Filtrowanie

filtrowanie w tabeli

Ten wzór pozwala użytkownikowi wyszukiwać określone wartości w każdej kolumnie.

Dynamiczne pokazywanie/ukrywanie kolumn

pokazywanie i ukrywanie kolumn

Ten wzorzec pozwala użytkownikom pokazywać lub ukrywać kolumny. Jest to sposób na ograniczenie danych tabeli do istotnych informacji i umożliwia użytkownikowi dodawanie kolumn w oparciu o ich przypadek użycia.

Konfigurowanie kolumn

konfiguracja

Możliwość wybierania kolumn, jakie powinny być wyświetlone oraz możliwość ustawienia ich kolejności to kolejny ze wzorców, który powinien stać się standardem. Dodatkowo ta funkcja powinna obejmować zapisywanie ustawień użytkownika w pamięci podręcznej przeglądarki lub w ramach bazy danych aplikacji. Jeżeli ustawiłem sobie odpowiednio zakres kolumn i ich kolejność, to gdy następnym razem będę korzystać z tabeli, chcę aby to, co ustawiłem, było takie samo.

Na zakończenie

Dlaczego w ogóle warto rozczulać się nad tematem tabel? W 2018 roku dane coraz częściej stają się walutą, surowcem globalnej gospodarki. Energetyka, media, produkcja, logistyka, służba zdrowia, informatyka, handel detaliczny, finanse, a nawet administracja publiczna przechodzą cyfrową transformację.

Jednak dane tracą swój sens, jeżeli nie mamy możliwości odpowiedniej ich wizualizacji i operowania na ich podstawie. Dobry projekt interfejsu użytkownika opiera się na ludzkich celach i zachowaniach. Interfejs użytkownika wpływa z kolei na efekty, co wpływa na dalsze decyzje dotyczące projektowania.

W subtelny i nieświadomy sposób doświadczenie użytkownika (ux) zmienia sposób podejmowania decyzji przez ludzi. To, co widać, gdzie jest prezentowane i w jaki sposób dostępne są interakcje, wpływa na działania. Ważne jest, aby podejmować decyzje projektowe, które prowadzą do lepszego świata. Mam nadzieję, że ten artykuł przyczyni się do tego, że przynajmniej jakaś część tabel stanie się bardziej dostępna, użyteczna i z odpowiednimi doświadczeniami użytkownika (ux).



Jak oceniasz ten materiał?

ocena najgorsza
ocena zla
ocena neutralna
ocena dobra
ocena najlepsza