Najpierw sprawdź, czy tabela jest potrzebna
Tabela sprawdza się wtedy, gdy odbiorca ma porównywać wartości w wierszach i kolumnach. Może służyć do zestawienia godzin otwarcia, cech kilku wariantów usługi albo pozycji w prostym katalogu. Jeśli jednak treść składa się z kilku niezależnych opisów, lista lub osobne bloki tekstu mogą być łatwiejsze do przeczytania na telefonie.
Zanim zaczniesz zmieniać wygląd tabeli, ogranicz jej zawartość do informacji potrzebnych do wykonania zadania. Długie opisy można przenieść pod tabelę lub na strony szczegółowe, a podobne kolumny połączyć, jeśli nie zaciera to różnic. Nie usuwaj jednak ważnych danych wyłącznie po to, by wszystko zmieściło się na ekranie. Czytelność oznacza również możliwość pełnego porównania.
Zastanów się, co czytelnik ma znaleźć w pierwszej kolejności. W tabeli godzin będzie to zwykle dzień i godzina; w zestawieniu usług – nazwa wariantu i najważniejsze cechy. Ułóż kolumny w tej kolejności. Dzięki temu nawet osoba widząca tylko fragment szerokiej tabeli szybciej zorientuje się, czego dotyczy.
Nadaj danym jasną strukturę
Pierwszy wiersz powinien jasno nazywać kolumny. Zamiast ogólnego „Informacje” lepiej napisać „Czas realizacji” albo „Dostępność”. Jeżeli wiersze reprezentują konkretne produkty, miejsca lub usługi, ich nazwy także powinny być wyraźnie oznaczone jako nagłówki wierszy. Osoba korzystająca z czytnika ekranu łatwiej powiąże wtedy odczytywaną wartość z właściwą nazwą.
W edytorze strony wybieraj element przeznaczony do tworzenia tabel danych, a nie układ zbudowany ze spacji czy obraz tabeli. Sprawdź, czy edytor pozwala oznaczyć wiersz nagłówkowy; przy bardziej złożonych zestawieniach przydatne jest również oznaczenie nagłówków wierszy. Krótki tytuł nad tabelą pomaga zrozumieć jej temat, zwłaszcza gdy na stronie znajduje się kilka zestawień.
Unikaj łączenia wielu komórek, jeśli nie jest to konieczne. Takie układy bywają trudniejsze do odczytania i do przekształcenia na wąski ekran. W każdej kolumnie stosuj też spójny sposób zapisu: ta sama jednostka przy liczbach i podobne określenia dla tych samych stanów. Sam kolor nie powinien przekazywać znaczenia – zamiast tylko zielonego pola wpisz na przykład „Dostępne”.
Dopasuj sposób wyświetlania do szerokości ekranu
Jeśli tabela ma niewiele kolumn, może wystarczyć krótszy tekst w nagłówkach, rozsądne odstępy w komórkach i łamanie długich wyrazów tam, gdzie nie zmienia to ich znaczenia. Nie zmniejszaj tekstu do rozmiaru, który wymaga przybliżania telefonu. Wygodniej przewinąć fragment tabeli niż odczytywać bardzo drobne litery.
Przy szerszym zestawieniu praktycznym rozwiązaniem jest przewijanie samej tabeli w poziomie, bez poszerzania całej strony. Warto dodać krótką wskazówkę, na przykład „Przesuń tabelę w bok, aby zobaczyć pozostałe kolumny”, bo możliwość przewijania nie zawsze jest oczywista. Zadbaj też o to, by użytkownik nadal wiedział, do którego wiersza należą widoczne wartości.
Inną możliwością jest pokazanie każdego wiersza jako osobnego bloku z parami „nazwa pola – wartość”. Działa to dobrze przy kilku krótkich rekordach, lecz przy dużej tabeli utrudnia porównywanie kolumn. Jeśli wybierasz taki układ, nie ukrywaj nazw pól i sprawdź, czy kolejność informacji pozostaje logiczna. Nie ma jednego rozwiązania dobrego dla każdej tabeli: wybór zależy od tego, czy ważniejsze jest szybkie porównanie, czy odczytanie pojedynczego wpisu.
Sprawdź czytelność, nie tylko wygląd
Otwórz gotową stronę na telefonie lub w wąskim oknie przeglądarki. Sprawdź, czy żaden tekst nie jest ucięty, czy wiadomo, że tabela się przewija, i czy przewijanie nie powoduje przypadkowego przesuwania całej strony na boki. Powiększ widok i zobacz, czy nadal można dotrzeć do wszystkich danych bez utraty ich znaczenia.
Przejdź przez stronę klawiaturą, zwłaszcza jeśli tabela znajduje się w przewijanym obszarze. Użytkownik powinien móc dostać się do jego zawartości i opuścić go bez zgadywania, co zrobić dalej. Przyjrzyj się także kontrastowi tekstu oraz liniom oddzielającym wiersze: subtelne kolory mogą wyglądać estetycznie, ale nie zawsze pomagają śledzić dane.
Po dodaniu nowych kolumn albo zmianie szablonu strony wykonaj taki przegląd ponownie. Tabela, która mieściła się na ekranie przy trzech kolumnach, może stać się niewygodna po dodaniu czwartej. Krótki test po każdej większej zmianie pozwala wychwycić problem, zanim utrudni on korzystanie z całej strony.
