До рассвета блочной верстки в 10-11 годах таблицы были средством разметки сайта. Сейчас же таблицы появляются крайне редко, хоть и встречаются как средство верстки, но это скорее исключение. Таблицам теперь отведена подходящая роль — представление данных.
Большие сложности вызывает оформление таблицы с точки зрения правил форматирования и современных реалий: адаптивные таблицы — это чистой воды ад. Что же, будем разбираться.
Общие правила для таблиц
Выравнивание данных в таблицах
В школе учат, что числа читаются справа налево, т. е. сравниваем сначала, смотря на единицы, затем десятки, сотни и тысячи. Соответственно, правильным будет выравнивание числовых значений по правому краю.
Противоположная ситуация с текстом (за исключением стран, пишущих и читающих справа налево). Обычно текст читаем слева направо, поэтому и выравнивание будет соответствующим.
Из вышесказанного следует и правило для заголовков — выравниваем по тому краю, что и представленные в колонке данные.
Но внимательный читатель заметил, что мы ничего не сказали о выравнивании по центру. Многие мои коллеги скажут, что это зло. Но я могу назвать один пример, когда такое выравнивание допустимо:
Такое выравнивание допустимо только для однозначных данных, которые представлены в виде иконок одинакового размера — например, тарифные сетки. Но это скорее исключение из правил и прибегать к нему надо очень аккуратно.
Следуя этим четырем правилам, мы добиваемся чистоты вертикальных линий таблицы и управляем последовательностью чтения данных.
Шрифты и цифры
Золотым правилом представления контента таблиц будет использование моноширинных шрифтов, к примеру, бесплатная гарнитура Roboto Mono. Шрифты этой группы являются гармонизированными, т. е. каждый литер имеет одинаковую высоту и ширину и обладает идентичным с другими литерами вертикальным выравниванием.
Для представления чисел лучше использовать линейные шрифты, вместо старого стиля. Смотрим на пример:
Старый стиль удобно использовать в приложениях или как одиночные представления данных, но точно не в таблицах. Таблицы должны представлять более однородные данные и линейные цифры тут являются лучшим решением, так как укрепляют сеточную структуру таблицы.
Если же говорить о пропорциональных и табличных цифрах, то тут разница не столь очевидна:
С одной стороны, пропорциональные числа разработаны так, чтобы соответствовать размеру и калибровке шрифта, с другой — табличные числа имеют одинаковый размер. Использование второго варианта предпочтительнее, так как это позволяет сохранить вертикальное выравнивание колонок.
Метки
Данные в таблице должны сопровождаться метками, которые выполняют сопроводительный контекст. Злоупотреблять метками не стоит и тут есть несколько вариантов их использования. Так, например, в «Гармонизированном тарифе США» метки используются в первых строках таблиц:
Второй вариант более близкий для российского рынка и стран СНГ — указывать метки в заголовках таблиц.
Для единиц измерений лучше использовать американскую нотацию меток как более удобную, исключив при этом повтор меток в каждой строке.
Названия и заголовки
Краткость сестра таланта. Главная ценность таблиц — данные. Не стоит от них отвлекать внимание пользователей.
Графическое оформление
В таблицах должно быть как можно меньше графики, «чернил» и линий. Хорошей таблицей считается та, которая легко читается без вертикальных линий и цветовых акцентов. Для избавления от линий в вебе появился замечательный вид разметки — «зебра».
Но тут стоит оговориться: если таблица будет иметь формат для печати, то лучше возвращать стандартную разлиновку, так как при печати «зебра» может испортить читаемость таблицы на бумаге. Ну и, соответственно, не стоит злоупотреблять цветами: оставляем максимально нейтральными и не используем цвета токсичной группы.
Использование фона в таблицах допустимо только для индикации разных групп значений. Лучше, если это будет опциональным решением, чем постоянным. Также фон следует использовать только тогда, когда невозможно употребить печатные графические элементы, такие как ✻, † или ▵. Максимально лучший вариант для таблиц — это монохромное представление.
Адаптивность таблиц
Переходим к самому интересному и сложному. Таблицы в мобильных устройствах — головная боль для любого проектировщика, потому что таблицы могут иметь совершенно непредсказуемую структуру и чаще всего наблюдаем нечто подобное:
Для представления простых таблиц Chris Coyier (основатель css-tricks.com) предлагает следующий вариант:
При мобильном просмотре вытягивать данные таблицы в два столбца. Но тут присутствуют очевидные проблемы:
- Данные не всегда умещаются в отведенную ячейку таблицы и наползают на соседнюю.
- Работает с двумерными таблицами, где запись равно значение. Не умеет работать с комбинированными ячейками.
Другой вариант позволяет сохранить табличную структуру и работать с комбинированными данными, как это, например, предлагает zurb. com:
Наиболее интересное решение предлагает Алексей Бычков (статья): предлагается развернуть одну запись таблицы в две строки с изменением направления данных. Так читаемость таблицы не теряется, а все данные представлены гармонично.
Под каждую таблицу в идеале подбирать индивидуальный вариант представления. При правильном проектировании данные, представленные в таблице, будут легко читаться и цитироваться. Проектировщик должен понимать, что это за таблица и какие данные она показывает. Некоторые рекомендуют скрывать таблицы на мобильных и показывать в полном формате по клику на соответствующую ссылку, но тут сразу большой подводный камень — Google Mobile Friendly, который сообщит о том, что есть элемент, не вписывающийся в размеры экрана.
В заключение
Любой UI/UX проектировщик обязан уделять большое внимание таблицам в проектах (если, конечно, в проекте присутствуют таблицы) и не забывать об адаптивности. На каждый тип таблицы должно быть свое представление, также необходимо учитывать, какие данные находятся в таблице. Таблицы могут быть скучными и не надо пытаться их развеселить — они важный элемент данных, за которыми пользователи идут на сайт.