Мэтью Стрём поделился рекомендациями по оформлению таблиц.

— Зачем нужны табличные цифры (есть в бесплатном шрифте Work Sans) и моноширинные шрифты;
— Правила выравнивания;
— Как не повторять единицы измерения в строках таблицы;
— И так далее.

In English. #table

Кейт Мейер рассказала, как делать сравнительные таблицы. Например:

— Пусть шапка прилипает и всегда будет на виду;
— Показывайте отличающиеся значения;
— Не отображайте параметры, по которым нет значений хотя бы у одного товара;
— Помогайте понять числовые значения. Например, Амазон показывает: вес 2,7 унции (яйцо), габариты 3,5×0,9×0,9 дюймов (помада).

In English. Копия перевода в Вебархиве. #table

Эндрю Койл написал об интерфейсных приёмах, с помощью которых можно упростить работу с большими таблицами.

— Закрепление заголовка;
— Закрепление столбца с параметрами и отдельных столбцов;
— Возможность изменить ширину столбца;
— Чередование фона в строках (зебра);
— Отображение сводки по табличным данным;
— Появление управляющих кнопок при наведении курсора на строку;
— Возможность редактирования данных в строке;
— Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
— Сортировка и фильтрация (разные способы);
— Настройка отображаемых столбцов и их порядка следования.

In English. #table

Энтони Ценг написал об адаптации таблиц под маленькие экраны.

— Чтобы найти подходящее решение, надо понять назначение таблицы и разобраться в её структуре;
— Таблица помогает сравнивать объекты по параметрам. Первый столбец — идентификаторы объектов. Остальные столбцы — значения параметров этих объектов;
— Можно зафиксировать первый столбец на экране и дать возможность прокручивать или переключать столбцы с параметрами. Шапка таблицы тоже должна быть зафиксирована;
— Все параметры объекта (для комплексного анализа) можно показывать по нажатию на строку с этим объектом. Энтони предлагает модальное окно, но аккордеон тоже подойдёт;
— На возможность нажатия на строку может указывать иконка глаза (или шеврон, если там аккордеон);
— Если параметров немного и пользователям надо сопоставлять несколько параметров одновременно, вместо таблицы можно использовать карточки. Минусы: 1) названия параметров повторяются во всех карточках, 2) карточки занимают больше места по вертикали.

In English. #adaptive #table

Костя Кислейко написал об оформлении таблиц.

— Чем больше визуального шума, тем тяжелее через него прорваться и выделить нужную информацию. Начать стоит с того, чтобы убрать весь шум (заливку, обводку ячеек и так далее);
— Используйте моноширинный шрифт для цифр (например, Courier, PT Mono). В этом случае у них будет одинаковая ширина, и число 999999 не будет выглядеть больше, чем 1111111;
— Числа выравнивайте по правому краю или по запятой, отделяющей десятые доли. Так легче считывать разрядность и сравнивать значения;
— Текст — по левому краю. Ровный левый край сформирует столбец, и можно отказаться от вертикальных линий в таблице;
— Удерживать строку помогают линии и чересполосица, но надо подобрать такие цвет и яркость, чтобы они не шумели и не мешали воспринимать данные;
— Расстояние между столбцами не должно быть большим (на растягивайте таблицу на всю ширину формата), иначе будет сложно сравнивать и группировать информацию;
— Названия столбцов обычно менее важны, чем данные. Их можно сделать менее заметными и отчертить чуть более толстой линией. Также постарайтесь сделать названия лаконичными.

#table

Герман Герасимов показал анимированные способы адаптации таблиц под экран телефона.

— Прокрутка таблицы с фиксацией шапки и первого столбца;
— То же самое, только остальные столбцы не прокручиваются свободно, а переключаются по одному свайпом. Полезна возможность выбрать нужный столбец в списке, чтобы быстро к нему перейти;
— Можно превратить строки таблицы в карточки;
— Карточки по умолчанию могут быть свёрнуты и показывать только основные данные, и разворачиваться при необходимости;
— Также полное содержимое карточки может открываться на отдельном экране;
— Неочевидный вариант: слайдер карточек. Автор предлагает необычный способ выбора нескольких карточек.

#table

Андрей Маркелов написал о дизайне сложных таблиц.

— Шрифты с моноширинными цифрами можно использовать, если в таблице числа не смешаны с буквами (рядом с числом может стоять единица измерения);
— Но лучше использовать полностью моноширинные шрифты, например, очень компактный Ubuntu Mono;
— Числа выравнивайте по правому краю, но текстовые заголовки столбцов с числами — по левому;
— Чтобы повысить читаемость, можно выделить визуальные границы колонок, разорвав разделительную линию;
— Если колонки стоят очень плотно, для отделения разрядов вместо обычного пробела лучше использовать тонкий («thin space», U+2009);
— Единицы измерения обычно пишут в названиях колонок через запятую, но тогда колонка становится шире. Можно располагать их под названием на отдельной строке и выделять цветом;
— Иногда группы колонок полезно сворачивать: для экономии места, для показа результирующей колонки;
— Базовую числовую таблицу можно обогатить инфографикой, цветами и диаграммами. Например, в дополнение к начальной и конечной цене можно показать график её колебания. Вклад каждой облигации в стоимость портфеля можно подсветить градацией зеленого и красного;
— Стоит ввести двойные строки. Например, полезно видеть не только стоимость облигации, но и процент, который она занимает в портфеле.

#table

Александра Савельева написала об обновлении устаревших таблиц в большом продукте.

— Проведите презентацию, какие проблемы можно решить обновлением. Подсветите несуразности в текущей работе элемента. Покажите красивый макет, каким всё станет. Заручитесь поддержкой руководства;
— Конкретные дизайн-решения могут сделать таблицы удобнее (ссылки на материалы с рекомендациями есть в статье и здесь: #table). Перевод их на компоненты повысит консистентность и увеличит скорость разработки новых таблиц;
— Сделайте хорошую новую таблицу на какой-нибудь одной странице (например, при создании новой функции);
— Итерационно, небольшими шагами замените старые таблицы на новые во всём продукте. Это позволит сильно не задерживать выпуск новой функциональности;
— В начале не будет никакого результата. Чтобы не сдаться, ищите поддержки у других дизайнеров;
— Если говорят «работает — не трогай» (в новом дизайне можно не учесть все нюансы предыдущего решения), можно предложить чисто визуальное обновление (фейслифтинг).

#table #process

Маргарита Романова показала, как без больших трудозатрат повысить интерактивность прототипов в Фигме.

— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.

#figma #prototype #table

Евгений Бондковски написал, как упростить восприятие и увеличить скорость работы с таблицей, оформив её содержимое.

— Показатели динамики можно покрасить в красный и зелёный;
— Если в столбце много нулевых значений, можно сделать их серыми, чтобы выделить ненулевые;
— Цветовое кодирование статусов ускорит их считывание;
— Если таблица состоит из однотипных цифровых показателей, можно залить фон ячеек: чем больше значение, тем темнее оттенок;
— Также фон ячеек можно заливать не полностью, а на процент от максимального значения в столбце. Получится диаграмма, показывающая соотношение значений в разных строках;
— Иногда значения в столбце можно заменить иконками (статусы, наличие документов для скачивания);
— Также можно добавить логотипы брендов и изображения людей, чтобы ускорить восприятие и поиск нужных строк;
— Для передачи динамики можно добавить столбец с небольшими графиками изменения показателя;
— Иногда (но редко) таблицу полностью можно заменить графиком и дать возможность переключаться между форматами отображения;
— Приёмы оформления таблицы в целом.

#table

Кейт Моран и Тейлор Дайкс написали о сравнительных таблицах.

— Когда альтернатив множество, выбирая товар, люди ориентируются на одну основную характеристику. С этим помогают фильтры. Когда товаров 5–7, люди учитывают достоинства каждого конкретного варианта. Здесь хорошо работают сравнительные таблицы;
— Если вы предлагаете не более 5 альтернатив (модели Apple Watch, варианты подписки), подойдёт статическая таблица. В ней можно контролировать отображение информации, редактировать формулировки;
— В динамической таблице пользователь сам выбирает, какие товары сравнить;
— Если в ней может оказаться больше 5 вариантов, предусмотрите способы сократить количество, например, добавив фильтры;
— Главная проблема динамической таблицы — неполнота данных о параметрах товаров;
— Стандартная компоновка: столбцы для товаров, строки для параметров;
— Фиксируйте заголовки столбцов при прокрутке;
— Связывайте абстрактные значения параметров с чем-то понятным: аккумулятор на 3350 мАч — хватит 1,2 раза зарядить iPhone 6;
— Объясняйте термины и непонятные параметры. Можно добавить всплывающие подсказки и ссылки на статьи;
— Если параметров много, дайте пользователю возможность управлять отображением: прятать отдельные группы параметров в аккордеон, отображать только отличающиеся параметры. В статические таблицы можно добавить краткий и полный вариант отображения;
— Сравнительные таблицы неэффективны, если варианты не взаимоисключающие (вместо сравнения двух платьев лучше оба добавить в корзину), простые (мало параметров), дешёвые или заменяемые (нет смысла тратить время на изучение таблицы), уникальные и трудно сравниваемые (разные параметры).

In English. #ecommerce #table