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

— Проведите презентацию, какие проблемы можно решить обновлением. Подсветите несуразности в текущей работе элемента. Покажите красивый макет, каким всё станет. Заручитесь поддержкой руководства;
— Конкретные дизайн-решения могут сделать таблицы удобнее (ссылки на материалы с рекомендациями есть в статье и здесь: #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

Рамазан Нурулаев написал о дизайне таблиц для цеха.

— Тонкие шрифты — мимо. Числа должны читаться даже в маске сварщика. Для цифр — моноширинный шрифт;
— Почти всегда нужна тёмная тема;
— Минимум цветов. Новый цвет — только чтобы привлечь внимание к критичным вещам;
— Системная цветовая индикация, которую нельзя изменить: зелёный — всё хорошо, жёлтый — обратить внимание, красный — что-то случилось;
— Есть дополнительные цвета, которые можно назначить выбранным статусам (или переназначить под себя);
— Рекомендации по выбору цвета есть в сторибуке: «фиолетовый для специальных режимов работы»;
— Пользователи попросили добавить легенду во все формы, где есть цветовая индикация;
— Заголовки столбцов были менее контрастными, чем их содержимое, но они плохо считывались. Сделали их контрастнее, а чтобы отделить от цифр, поменяли шрифт;
— Таблицы почти никогда не прокручивают (особенно, по горизонтали), поэтому они должны быть максимально компактными, но не сливаться в кашу;
— 40 px основная высота строки, 56 px — увеличенная, 32 px — компактная. Надо учитывать, что в них могут быть иконки и кнопки;
— Нужна возможность настраивать их под себя: скрывать столбцы, закреплять, менять их порядок;
— Иногда можно заменить заголовки столбцов на более компактные: «Положение плавки» → «Плавка»;
— Чтобы уменьшить визуальный шум, кнопки действий отображаются при наведении на строку. Пользователь примерно понимает, какие действия ему надо совершить;
— Чтобы было понятно, какие ячейки можно редактировать, в них есть кнопка редактирования. Ячейки с отредактированными данными подсвечиваются жёлтым.

#table #industrial

Дмитрий Сергушкин написал, как сделать таблицы удобнее.

— Америку статья вам не откроет, но Дмитрий написал, как каждая рекомендация поможет повысить производительность, сделать таблицу яснее, учесть персональные потребности пользователя и так далее;
— Можно подобрать лучшие практики, например, по персонализации. Из недавней статьи мы узнали, как это важно для таблиц, используемых в цехах;
— Если есть поиск для быстрого доступа к данным, показывайте последние пользовательские запросы. Это упростит работу с повторяющимися задачами;
— Регулировка ширины столбца (включая изменение под ширину его содержимого двойным кликом) позволит подстроиться под содержащиеся в таблице данные и текущие потребности пользователя;
— Если есть фильтры, позволяйте сохранять их комбинации для повторного использования;
— Давайте возможность закрепить нужные пользователю столбцы и строки, чтобы они всегда были видны при прокрутке таблицы, а также скрыть ненужные столбцы;
— Сохранение настроек отображения и переключение между ними тоже может быть полезным;
— Если есть функция экспорта, давайте экспортировать отфильтрованные данные и выбрать для экспорта конкретные столбцы.

#table