Czy masz Strach, kiedy odkrywasz, że Twój następny projekt ma zaprojektować złożoną i responsywną tabelę z danymi? 😨
Nie jesteś sam, widziałem kilku świetnych projektantów trzęsących się w butach na myśl o rozwiązaniu tego problemu. Ale nie ma się czego obawiać! Niedawno podjąłem się tego wyzwania i teraz jestem tutaj, aby podzielić się kilkoma wskazówkami, które pomogły mi wymyślić projekt, który pokochali nasi użytkownicy.
Istnieje wiele różnych opcji tego, jak projektować tabele, nie mówiąc już o tym, jak uczynić je responsywnymi. Kolumny i wiersze mogą zmieniać położenie, rozmiar, zapadać się, minimalizować, a nawet znikać, gdy okno przeglądarki staje się węższe.
Jak w przypadku wszystkich rozwiązań projektowych, najlepszy projekt zależy od tego, jak Twoi czytelnicy będą korzystać z danych. Na początku tego projektu przeprowadziliśmy pewne badania użytkowników, aby zapewnić pewien kierunek i zidentyfikowaliśmy, że dla naszego projektu:
- Ta informacja tabelaryczna będzie używana w równym stopniu na mieszance komputerów stacjonarnych, tabletów i urządzeń mobilnych.
- Te tabele mogą zawierać wiele kolumn wolnego tekstu, jak również liczby.
- Pewne ważne fragmenty informacji powinny pozostać widoczne przez cały czas.
Dzięki tym spostrzeżeniom naszych użytkowników, oto główne rzeczy, którymi zająłem się podczas opracowywania systemu projektowania tabel z danymi o dużej zawartości tekstu.
Po pierwsze, określ, jakiego rodzaju jest to tabela. Czy jest to tabela porównawcza, w której czytelnik porównuje dane w wielu kolumnach, czy też jest to tabela zawartości, w której zestawy danych są od siebie niezależne?
Moja tabela jest bardziej podobna do tabeli zawartości niż do tabeli porównawczej. Zidentyfikowanie tego na wczesnym etapie pomogło mi zrozumieć, jakie informacje muszą pozostać w bliskiej odległości w wąskim rozmiarze ekranu.
Mobile first
Pierwszą wersją, którą zaprojektowałem, była wersja na wąski ekran. Celowo patrzyłem na to przed wersją szerokoekranową, ponieważ przeglądanie tabel na urządzeniach mobilnych jest ważne dla naszych użytkowników. Dlatego musiałem znaleźć sposób na zmieszczenie złożonych i nieliniowych informacji w pionowym formacie.
Wiedziałem, że o wiele łatwiej będzie przeskalować projekt w górę, gdy jest dużo miejsca w poziomie, niż zaprojektować piękną tabelę dla komputerów stacjonarnych i walczyć o to, aby pozostała czytelna na urządzeniach mobilnych. Oznaczało to również, że od początku miałem na uwadze docelowe rozmiary dotykowe i nie polegałem na akcjach takich jak hover, aby ujawnić informacje.
Postanowiłem traktować zawartość bardziej jak listę w wąskich widokach, aby ważne informacje pozostały bardzo widoczne i możliwe do zeskanowania.
Skonsekwentna stylizacja
Wiersze muszą zmieniać położenie, gdy zmienia się rozmiar ekranu, więc użyłem stylizacji, aby pomóc zachować połączenie między nimi. Na przykład, jeśli nagłówki kolumn są pogrubione z szarym tłem, użyj tego samego stylu również w widoku wąskim. Pomoże to czytelnikom w remapowaniu nowego rozmieszczenia komórek.
Typografia jest twoim przyjacielem
Łatwo jest zapomnieć o swoich zasadach typograficznych, gdy masz dużo ograniczeń, ale podjęcie świadomej decyzji o optymalizacji czytelności będzie ogromną pomocą dla twoich czytelników, szczególnie w projekcie takim jak mój, gdzie tabele mają dużo tekstu.
Typografia istnieje po to, aby uhonorować treść. ~ Robert Bringhurst
Skanowanie
Ułatwiaj szybkie skanowanie, utrzymując prosty i przejrzysty tok czytania. Wybrałem tekst w każdej kolumnie zawieszony na tej samej krawędzi, aby czytelnik mógł skanować tekst w sposób liniowy.
Długość linii
Staraj się nie naruszać długości linii tekstu przez zgniatanie wielu kolumn w wąskiej przestrzeni, w przeciwnym razie spowolni to szybkość czytania. Ustawiam minimalną szerokość dla kolumn tekstu ciągłego.
Etykiety
Zastanów się, gdzie umieścić etykiety, aby nie zajmowały nadmiernej ilości miejsca, ale nadal zapewniały pewien kontekst informacji.
Umieściłem etykiety nad każdym elementem zawartości komórki na mojej liście, gdzie zajmowały mniej miejsca, a nie z boku. Ułatwiło to również skanowanie informacji. Etykiety stylizowałem w różny sposób, aby łatwo można było odróżnić stałą etykietę od zmiennej zawartości.
.