Вы читаете перевод статьи “Design better data tables”. Над переводом работали: Анастасия Свеженцева, Ольга Жолудова.Данные — это бесчисленные потоки информации, которые стекаются в хранилища. Почему их копят и копят? Потому что данные о потребительском поведении крайне полезны для принятия решений. Только предварительно их, конечно, требуется обработать.Хорошие таблицы данных ускоряют сканирование, анализ, сравнение, выборку, фильтрацию, сортировку и управление информацией — все это помогает добыть ценную информацию и принять решение.Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal.ruВ этой статье вы найдете подходы к дизайну таблиц, паттерны проектирования и проверенные методы, которые помогут вам улучшить UX с таблицами в ваших проектах.1. Закрепленная шапка таблицыЗакрепляйте шапку таблицы при скролле, такой подход поможет держать под рукой навигацию по названиям столбцов.2. Зафиксированная первая колонкаОт горизонтального скролла не убежать особенно на больших датасетах. Поэтому вполне удобно в таком случае закрепить первую колонку с разметкой названий строк. А если вы добавите возможность закреплять и другие колонки, это позволит пользователям сравнивать данные по нескольким параметрам.3. Регулятор ширины столбцовЭта функция позволяет настроить таблицу под себя и посмотреть нужные данные в полном объеме.4. Стиль строкСтиль строк влияет на восприятие данных. Если у вас небольшая табличка три на четыре, бывает, удобно совсем удалить границы и «зебру», чтобы не отвлекали. А вот в больших датасетах, стили помогают быстрее схватывать и анализировать информацию.5. Плотность отображенияРегулятор высоты строк позволяет уместить на экран больше полезной информации. Но так как данные бывают разной размерности, нужен вкл/вкл.6. Дашборд или сводкаВ сводке отображаются ключевые выжимки из данных, представленных в таблице. В идеале, по сводке должно быть сразу понятно, какие шаги стоит предпринять.7. СтраницыПосмотрев сводку, вы можете захотеть отобрать топ-10 или топ-50 строк для анализа. В этом вам поможет разбивка по страницам (так называемая «пагинация»). На некоторых сайтах можно настроить количество строк, отображаемых в рамках одной страницы.Постраничный паттерн часто заменяют постепенной подгрузкой через скролл или кнопкой «Показать еще XXX строк».Для новостных или развлекательных сайтов это работает, но если на вашем сайте пользователи работают с данными (например, сортируют по определенным столбцам), лучше не использовать бесконечную подгрузку, а остановиться на постраничном отображении.8. Опции при наведении курсораТакой подход помогает чуть-чуть снизить визуальный шум, но побуждает пользователей рыться и исследовать. 9. Инлайн-редакторФункция бывает удобна если в таблице находятся объекты, в которых нужно исправить опечатки или устранить другие небольшие неточности. А вот серьезное редактирование, конечно, лучше выполнять в полноценной карточке сущности.10. Быстрая сводка для строкиПомогает шустренько изучать ключевые детали в потоке строк данных.11. ПревьюУдобен как промежуточный шаг перед погружением в редактирование большой сущности или проведения операции, которую не отменить.12. Модальное окноПомогает сосредоточиться на деталях по конкретной сущности, а затем уже взяться за ее редактирование.13. Мультимодальное окноЕсли вам требуется обеспечить некую концепцию рабочего стола, то такой подход может быть полезен пользователям.14. От строки к деталямЕще один подход к погружению в детали.15. Сортировка столбцовПо убыванию и возрастанию. Помогает найти самые приоритетные строки для изучения.16. ФильтрыВсе ключевые операции с обработкой данных вы можете поместить вот в такой паттерн.17. Настройки выборкиЭтот паттерн проектирования поможет пользователям задать параметры фильтрации для интересующих столбцов.18. Столбцы с возможностью поискаПодход помогает пользователям оперативно отыскать конкретное в определенном столбце.19. Добавление столбцовПараметров бесчисленное множество, а в колонках таблицы могут быть заданы только самые популярные. С таким подходом каждый пользователь сможете выбрать для анализа своей ситуации все, что требуется.20. Настройка столбцовЗдесь пользователи могу выбрать столбцы, которые им важны, а также задать порядок.Зачем нужны таблицыДанные — это тоже стратегический ресурс. Энергетика, СМИ, производство, доставка, здравоохранение, ритейл, банки и даже правительство — каждая из отраслей уже во всю собирает огромные массивы данных о потребительском поведении.Однако сами по себе данные не помогают двигать дело вперед, если их предварительно грамотно не обработать, не упаковать и не доставить соответствующе. Все ключевые игроки давно уже осознали, что стали успешными и продолжают ими оставаться именно благодаря наращиванию экспертизы по работе с данными, а также совершенствованию пользовательского опыта с помощью данных.Надеюсь эта статья поможет вам ускорить работу в очередном проекте связанным с дизайном таблиц. Удачи. На связи!Ещё больше статей о дизайне, а также полезные сервисы можно найти в сообществе на Facebook.#таблицы
Есть такой американский стандарт работы с таблицами FAST: https://www.fast-standard.org/
Меня с ним познакомил мой первый начальник, с тех пор уже не задумываясь следую многим принципам из стандарта.
Комментарий недоступен
Добавлю. Подсветка активной строки.
Сколько можно уже эту статью перепечатывать. Третий год уже пошёл
Нужна подсветка активной строки, хyли минусите человека выше?
Был конкретный кейс: человек отредактировал строку, вышел в основную таблицу и потерял строку, которую редактировал.
Второй момент: как сочетать активную строку и выделение галочкой?
И третий момент: что с мобилами?
+ за вопрос, а что с мобилами?
Спасибо, очень вовремя