Таблицы в интерфейсах

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

Хорошо сверстанная и спроектированная таблица дает пользователю весь объём информации и облегчает способ её подачи.

Рассмотрим на примере таблицы во внутренней системе управления нашего клиента.

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

Цвет

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

Теперь пользователям будет сразу понятен список приоритет заявок. Также мы подсветили дедлайн. Если он сегодня, текст горит красным, чтобы пользователь точно не пропустил эту заявку.

Чересполосица

Чередование серых и белых полос в таблице для разделения контента — распространенная история. Вот, например, экран Apple Music:

Однако серые полосы — инструмент. Если таблица очень длинная и в ней нет большого количества столбцов, то чересполосица поможет упорядочить список и “склеить” данные на одной строке.

В нашем случае мы от них сразу избавились и сначала думали оставить таблицу вообще без разделителей:

Однако данные, несмотря на аккуратную верстку, слегка разваливались. Также внутри каждой строки есть дополнительная информация, которая раскрывается при нажатии на иконку справа. Поэтому мы оставили тонкие разделители:

Плотность информации

Очень непростой пункт. С одной стороны, кажется, что чем меньше данных, тем колонкам свободнее. Однако если колонок, скажем, будет 4, получится такое:

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

Все выглядит достаточно равномерно. Можно уточнить, что справа пусто, но там стоят жирные и насыщенные иконки, поэтому все нормально.

Высота строки

Когда речь идет о представлении данных, всегда всплывает вопрос об их уплотнении. Чтобы на меньшем объеме показать больше информации. Идея увеличить строку в два раза хоть и звучала странно, но в итоге привела к тому, что нам удалось на довольно меньшем объеме показать больше данных: больше текста в комментариях, дедлайн, имена авторов заявок.

Вот так это выглядит с узкой строкой:

Вроде бы большая часть данных сохранилась, но текст в столбцах «Тип», «Дедлайн» и «Комментарий» обрезается. Если начать двигать столбцы влево-вправо, то текст в столбце «Дедлайн» и уместился, но тогда левая часть таблицы останется без воздуха. Поэтому мы увеличили строку, чтобы данные чувствовали себя комфортно (рис. 1).

Приятные мелочи

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

Например, заголовки в таблице набраны прописными буквами:

Вроде бы мелочь, но так заголовок и иконка создает ровный прямоугольник:

Выбор цвета, например, серого для иконок, тоже не случаен. Цвета проверяются на контрастность и доступность. Если есть понимание, что серый цвет будет для кого-то не виден — мы его заменяем.

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