UI/UX: дизайн таблиц в современном вебе

До рассвета блочной верстки в 10-11 годах таблицы были средством разметки сайта. Сейчас же таблицы появляются крайне редко, хоть и встречаются как средство верстки, но это скорее исключение. Таблицам теперь отведена подходящая роль — представление данных.

Большие сложности вызывает оформление таблицы с точки зрения правил форматирования и современных реалий: адаптивные таблицы — это чистой воды ад. Что же, будем разбираться.

Общие правила для таблиц

Выравнивание данных в таблицах

В школе учат, что числа читаются справа налево, т. е. сравниваем сначала, смотря на единицы, затем десятки, сотни и тысячи. Соответственно, правильным будет выравнивание числовых значений по правому краю.

Противоположная ситуация с текстом (за исключением стран, пишущих и читающих справа налево). Обычно текст читаем слева направо, поэтому и выравнивание будет соответствующим.

Из вышесказанного следует и правило для заголовков — выравниваем по тому краю, что и представленные в колонке данные.

Пример форматирования чисел и текста в таблице

Но внимательный читатель заметил, что мы ничего не сказали о выравнивании по центру. Многие мои коллеги скажут, что это зло. Но я могу назвать один пример, когда такое выравнивание допустимо:

Пример выравнивания по центру в таблицах для тарифных сеток

Такое выравнивание допустимо только для однозначных данных, которые представлены в виде иконок одинакового размера — например, тарифные сетки. Но это скорее исключение из правил и прибегать к нему надо очень аккуратно.

Следуя этим четырем правилам, мы добиваемся чистоты вертикальных линий таблицы и управляем последовательностью чтения данных.

Шрифты и цифры

Золотым правилом представления контента таблиц будет использование моноширинных шрифтов, к примеру, бесплатная гарнитура Roboto Mono. Шрифты этой группы являются гармонизированными, т. е. каждый литер имеет одинаковую высоту и ширину и обладает идентичным с другими литерами вертикальным выравниванием.

Для представления чисел лучше использовать линейные шрифты, вместо старого стиля. Смотрим на пример:

Цифры в шрифтах со старым начертанием и линейным

Старый стиль удобно использовать в приложениях или как одиночные представления данных, но точно не в таблицах. Таблицы должны представлять более однородные данные и линейные цифры тут являются лучшим решением, так как укрепляют сеточную структуру таблицы.

Если же говорить о пропорциональных и табличных цифрах, то тут разница не столь очевидна:

Пропорциональные и табличные цифры в шрифтах

С одной стороны, пропорциональные числа разработаны так, чтобы соответствовать размеру и калибровке шрифта, с другой — табличные числа имеют одинаковый размер. Использование второго варианта предпочтительнее, так как это позволяет сохранить вертикальное выравнивание колонок.

Метки

Данные в таблице должны сопровождаться метками, которые выполняют сопроводительный контекст. Злоупотреблять метками не стоит и тут есть несколько вариантов их использования. Так, например, в «Гармонизированном тарифе США» метки используются в первых строках таблиц:

Пример меток в Гармонизированном тарифе США

Второй вариант более близкий для российского рынка и стран СНГ — указывать метки в заголовках таблиц.

Для единиц измерений лучше использовать американскую нотацию меток как более удобную, исключив при этом повтор меток в каждой строке.

Названия и заголовки

Краткость сестра таланта. Главная ценность таблиц — данные. Не стоит от них отвлекать внимание пользователей.

Графическое оформление

В таблицах должно быть как можно меньше графики, «чернил» и линий. Хорошей таблицей считается та, которая легко читается без вертикальных линий и цветовых акцентов. Для избавления от линий в вебе появился замечательный вид разметки — «зебра».

Пример отображения таблицы в виде Зебра

Но тут стоит оговориться: если таблица будет иметь формат для печати, то лучше возвращать стандартную разлиновку, так как при печати «зебра» может испортить читаемость таблицы на бумаге. Ну и, соответственно, не стоит злоупотреблять цветами: оставляем максимально нейтральными и не используем цвета токсичной группы.

Использование фона в таблицах допустимо только для индикации разных групп значений. Лучше, если это будет опциональным решением, чем постоянным. Также фон следует использовать только тогда, когда невозможно употребить печатные графические элементы, такие как ✻, † или ▵. Максимально лучший вариант для таблиц — это монохромное представление.

Адаптивность таблиц

Переходим к самому интересному и сложному. Таблицы в мобильных устройствах — головная боль для любого проектировщика, потому что таблицы могут иметь совершенно непредсказуемую структуру и чаще всего наблюдаем нечто подобное:

Ошибка вывода таблицы в мобильной версии сайта

Для представления простых таблиц Chris Coyier (основатель css-tricks.com) предлагает следующий вариант:

Вариант мобильной таблицы

При мобильном просмотре вытягивать данные таблицы в два столбца. Но тут присутствуют очевидные проблемы:

  • Данные не всегда умещаются в отведенную ячейку таблицы и наползают на соседнюю.
  • Работает с двумерными таблицами, где запись равно значение. Не умеет работать с комбинированными ячейками.

Другой вариант позволяет сохранить табличную структуру и работать с комбинированными данными, как это, например, предлагает zurb. com:

Вариант мобильной таблицы 2

Наиболее интересное решение предлагает Алексей Бычков (статья): предлагается развернуть одну запись таблицы в две строки с изменением направления данных. Так читаемость таблицы не теряется, а все данные представлены гармонично.

Под каждую таблицу в идеале подбирать индивидуальный вариант представления. При правильном проектировании данные, представленные в таблице, будут легко читаться и цитироваться. Проектировщик должен понимать, что это за таблица и какие данные она показывает. Некоторые рекомендуют скрывать таблицы на мобильных и показывать в полном формате по клику на соответствующую ссылку, но тут сразу большой подводный камень — Google Mobile Friendly, который сообщит о том, что есть элемент, не вписывающийся в размеры экрана.

В заключение

Любой UI/UX проектировщик обязан уделять большое внимание таблицам в проектах (если, конечно, в проекте присутствуют таблицы) и не забывать об адаптивности. На каждый тип таблицы должно быть свое представление, также необходимо учитывать, какие данные находятся в таблице. Таблицы могут быть скучными и не надо пытаться их развеселить — они важный элемент данных, за которыми пользователи идут на сайт.

Арт-Директор mit
Александр Павлов

Дата: 07.11.2017

Поделитесь статьей со своими друзьями в социальных сетях.


Назад к списку статей