Strona główna » Wzorce projektowe

Użyteczność tabel

30 listopada 2010 napisała Iga [ 2 odpowiedzi ] Drukuj wpis

W bardzo rozbudowanych aplikacjach czasem zmuszeni jesteśmy stosować wielkie tabele. Jednak specyfika środowiska webowego nakłada na nas ograniczenia rozmiarów. W efekcie powstaje problem – jak umieścić rozległe informacje, kilkanaście kolumn i kilkadziesiąt wierszy danych tak, aby ich przeglądanie było nadal użyteczne? Pierwszą radą powinno być zawsze: wyrzuć wszystko to, co nie jest absolutnie niezbędne. Jeśli jednak wszystkie informacje są potrzebne, warto sięgnąć do pozostałych technik oswajania wielkich tabel.

Wizualizacja danych

1)      Zebra – podstawowym sposobem poprawy przejrzystości danych w wielkich tabelach jest stosowanie zebry, czyli kolorystyczne odróżnienie od siebie kolejnych rzędów.

2)      Style treści – kolorem (a także wielkością, pogrubieniem czy rodzajem czcionki) można wyróżnić treści, tak aby podkreślić najistotniejsze informacje i ułatwić skanowanie.

3)      Ikonografia – czasem możliwe jest również zastosowanie ikon, zamiast opisów akcji lub danych. Taki mechanizm sprawdza się głównie dla typowych akcji (usuń, edytuj, dodaj) lub oczywistych symboli, ale może także stanowić uzupełnienie tekstu, ułatwiając odnajdywanie konkretnych opisów.

4)      Blokowanie opisów – w przypadku dużych tabel, w których opisy kolumn lub rzędów nie są dla użytkownika oczywiste, warto je zablokować, tak aby przewijanie strony lub tabeli nie chowało potrzebnych etykiet.

1. Zastosowanie zebry na przykładzie freshmail.pl

1. Zastosowanie zebry na przykładzie freshmail.pl

2. Zastosowanie zebry w last.fm

2. Zastosowanie zebry w last.fm

Zastosowanie różnych stylów czcionki (kolor, wielkość) dla wyróżnienia najważniejszych treści na etsy.com

Zastosowanie różnych stylów czcionki (kolor, wielkość) dla wyróżnienia najważniejszych treści na etsy.com

4. Kolorowa zebra, ikony dla oznaczenia występowania funkcji oraz wyróżnienie najważniejszej treści (ceny) na  shopify.com

4. Kolorowa zebra, ikony dla oznaczenia występowania funkcji oraz wyróżnienie najważniejszej treści (ceny) na shopify.com

5. Wykorzystanie ikon jako uzupełnienia pozycji w tabeli na stronie Squarespace

5. Wykorzystanie ikon jako uzupełnienia pozycji w tabeli na stronie Squarespace

Blokowanie pierwszej kolumny z opisami z możliwością przewijania tabeli (strzałkami w pierwszym wierszu) w pulseapp.com

6. Blokowanie pierwszej kolumny z opisami z możliwością przewijania tabeli (strzałkami w pierwszym wierszu) w pulseapp.com

Grupowanie danych i funkcji

1)      Wyróżnienie etykiety grupy – tabelę można podzielić tematycznie, tak aby powiązane ze sobą kategorie znajdowały się pod tą samą, wyróżnioną stylem etykietą. Szybkie przejście do danej etykiety może odbywać się przy pomocy linków nad tabelą.

2)      Rozwijanie grup – etykiety zestawów informacji mogą być rozwijalne, tak aby zamykanie ich chowało niepotrzebne w danej chwili dane.

3)      Zawijanie wierszy – nie wszystkie rodzaje informacji muszą mieć swoją osobną kolumnę, przykładowo – zamiast tworzyć nową kolumnę dla daty edycji pozycji na liście, można takie dane umieścić tuż pod nazwą tej pozycji.

4)      Grupowanie i chowanie akcji – zamiast prezentować wszystkie dostępne akcje dla pozycji na liście, można je schować pod jednym linkiem. Wydłuża to samą czynność, jednak czasem ten koszt może być warty zysku w postaci bardziej przejrzystej tabeli.

5)      Masowe akcje – aby pozbawić tabelę zbyt wielu opcji można również wyodrębnić z niej akcje i umożliwić ich używanie po wybraniu (kilku) pozycji na liście (np. checkboksami).

7. Grupowanie cech i wyróżnienie ich nadrzędnej etykiety na skapiec.pl

7. Grupowanie cech i wyróżnienie ich nadrzędnej etykiety na skapiec.pl

8. Rozwijanie i chowanie grup danych na przykładzie biblioteki Ext JS

8. Rozwijanie i chowanie grup danych na przykładzie biblioteki Ext JS

9. Zawijanie wierszy i prezentacja różnych rodzajów treści w jednej kolumnie na adtaily.pl

9. Zawijanie wierszy i prezentacja różnych rodzajów treści w jednej kolumnie na adtaily.pl

10. Zawijanie wierszy i prezentacja dodatkowych opisów w tej samej kolumnie na domestica.org

10. Zawijanie wierszy i prezentacja dodatkowych opisów w tej samej kolumnie na domestica.org

11. Grupowanie i chowanie kilku akcji dla jednej pozycji na dropbox.com

11. Grupowanie i chowanie kilku akcji dla jednej pozycji na dropbox.com

12. Grupowanie akcji, ikony dla najważniejszych akcji i zróżnicowanie wyglądu treści w survs.com

12. Grupowanie akcji, ikony dla najważniejszych akcji i zróżnicowanie wyglądu treści w survs.com

13. Masowe akcje dla wybranych pozycji w tabeli w WordPressie

13. Masowe akcje dla wybranych pozycji w tabeli w WordPressie

Ukrywanie

1)      Hovery – aby poprawić przejrzystość tabeli, niektóre z informacji można ukryć pod postacią dymków, tooltipów i opisów pojawiających się po najechaniu na element myszką.

2)      Ukrywanie szczegółów – gdy nie musimy prezentować naraz wszystkich informacji, można schować bardziej szczegółowe opisy i umożliwiać ich czytanie dopiero po kliknięciu w daną pozycję.

3)      Stronicowanie – zbyt długie tabele można podzielić na kilka stron poprzez klasyczne stronicowanie.

4)      Edycja inline – zamiast dodawać tabelę z akcją „edytuj” można umożliwić szybką edycję metodą inline, czyli przechodząc do trybu edycji po kliknięciu w dane pole tabeli.

5)      Skróty – długie terminy można zmniejszyć do postaci znanych skrótów (np. nazwy miesięcy lub dni tygodnia).

14. Tooltipy z opisem etykiety na ceneo.pl

14. Tooltipy z opisem etykiety na nokaut.pl

15. Tooltipy ze szczegółowymi informacjami na shape.com

15. Tooltipy ze szczegółowymi informacjami na shape.com

16. Odkrywanie ukrytych, szczegółowych informacji danej pozycji (prawa kolumna) w builditwith.me

16. Odkrywanie ukrytych, szczegółowych informacji danej pozycji (prawa kolumna) w builditwith.me

17. Edycja inline wiersza w aplikacji mint.com

17. Edycja inline wiersza w aplikacji mint.com

18. Edycja wiersza tabeli w bibliotece Ext JS

18. Edycja wiersza tabeli w bibliotece Ext JS

19. Skróty (np. CPC, CTR) w tabeli w Google Adwords

19. Skróty (np. CPC, CTR) w tabeli w Google Adwords

Dostosowanie do potrzeb

1)      Wybór zakresu informacji – jeśli dla różnych użytkowników potrzebne są różne zakresy informacji, warto umożliwić im dopasowanie prezentowanych w tabeli informacji do swoich potrzeb.

2)      Filtrowanie – ograniczanie treści może odbywać się poprzez filtry, które zawężają ilość prezentowanych w tabeli wyników.

3)      Sortowanie – użyteczność rozbudowanej tabeli z całą pewnością poprawi też możliwość sortowania wierszy według wartości wybranej etykiety.

4)      Zmiana kolejności i rozmiarów – dostosowanie tabeli do potrzeb użytkownika to także możliwość zmiany kolejności kolumn czy ich rozmiarów, co pozwala na wyróżnienie treści najistotniejszych w danym momencie dla odbiorcy.

20. Wybór zakresu informacji na przykładzie biblioteki Ext JS

20. Wybór zakresu informacji na przykładzie biblioteki Ext JS

 21. Filtrowanie, sortowanie i zmiana wyglądu tabeli w WordPressie

21. Filtrowanie, sortowanie i zmiana wyglądu tabeli w WordPressie

22. Rozbudowane filtrowanie pozycji w tabeli na cleartrip.com

22. Rozbudowane filtrowanie pozycji w tabeli na cleartrip.com

23. Filtrowanie alfabetyczne w aplikacji BusinessWiki

23. Filtrowanie alfabetyczne w aplikacji BusinessWiki

24. Sortowanie tabeli w Google Analytics

24. Sortowanie tabeli w Google Analytics

25. Sortowanie i zmiana szerokości kolumn w iTunes

25. Sortowanie i zmiana szerokości kolumn w iTunes

Podsumowanie

Powyższa lista stanowi jedynie ściągawkę możliwych technik oswajania wielkich tabel. Odpowiedź na pytanie, które z nich zastosować,  jak zawsze, zaczyna się od „To zależy…” ;)

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: , , ,