{"id":4711,"title":"\u041f\u043e\u0434\u043a\u0430\u0441\u0442 \u043e\u0442 Mercedes-Benz \u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0441 \u0410\u043d\u0442\u043e\u043d\u043e\u043c \u041a\u043e\u043c\u043e\u043b\u043e\u0432\u044b\u043c","url":"\/redirect?component=advertising&id=4711&url=https:\/\/vc.ru\/promo\/263165-korotko-podkast-o-tehnologiyah-i-innovaciyah-ot-mercedes-benz&hash=c6f93899ff5e0c658ae71a18a81977a3309accf3b2bfd459f77ec74e37ef61d4","isPaidAndBannersEnabled":false}

Руководство по дизайну таблиц — 20 нюансов по представлению датасетов в интерфейсах

Вы читаете перевод статьи “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.

{ "author_name": "Анастасия Свеженцева", "author_type": "self", "tags": ["\u0442\u0430\u0431\u043b\u0438\u0446\u044b"], "comments": 13, "likes": 38, "favorites": 316, "is_advertisement": false, "subsite_label": "design", "id": 135270, "is_wide": true, "is_ugc": true, "date": "Fri, 19 Jun 2020 18:24:03 +0300", "is_special": false }
0
13 комментариев
Популярные
По порядку
Написать комментарий...
5

Есть такой американский стандарт работы с таблицами FAST: https://www.fast-standard.org/
Меня с ним познакомил мой первый начальник, с тех пор уже не задумываясь следую многим принципам из стандарта.

Ответить

Человеческий велосипед

3

Есть такая замечательная вещь, как Microsoft Excel (и иже с ними) - предлагаю изучить и другие его функции/возможности и также транслировать всем их в виде собственных незамутненных идей.

Ответить
2

Сколько можно уже эту статью перепечатывать. Третий год уже пошёл

Ответить
1

Добавлю. Подсветка активной строки.

Ответить
1

Спасибо, очень вовремя 

Ответить
1

Нужна подсветка активной строки, хyли минусите человека выше?

Был конкретный кейс: человек отредактировал строку, вышел в основную таблицу и потерял строку, которую редактировал.

Второй момент: как сочетать активную строку и выделение галочкой?

И третий момент: что с мобилами?

Ответить
0

+ за вопрос, а что с мобилами? 

Ответить
0

1. Закрепленая первая строка
2. Закрепленая вторая строка

Ответить
0
Ответить
0

Спасибо за статью, приятная подача)

Ответить
0

Твою ж дивизию, вы только что изобрели Bootstrap 4.0

Ответить
0

Спасибо кэп

Ответить
Читать все 13 комментариев
«Яндекс.Карты» и «Яндекс.Навигатор» появились в CarPlay и Android Auto Статьи редакции

Как работают обновлённые приложения и какие есть ограничения.

Как продвигать компьютерный сервис без специалистов по рекламе

Владелец компьютерной мастерской «ПеКарня» в Самаре Роман Услонцев рассказал об особенностях продвижения в своей нише и о том, как виртуальный маркетолог Макс помог снизить стоимость заявки в три раза.

Что почитать, чтобы стать digital-профи: восемь главных книг от COO агентства Outside

Постоянная прокачка экспертизы — необходимое требование для любого digital-специалиста в 2021 году. Операционный директор digital-агентства Outside Жамбал Гармажапов составил подборку из восьми мастридов для тимлидов, аккаунт- и проджект-менеджеров.

Источник: издательство МИФ
«Тинькофф» КАСКО — три месяца ожидания ремонта

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

«Россия» начала предлагать бортпроводникам по 25 тысяч рублей за «лояльность» на фоне сообщений о забастовках Статьи редакции

Рейсы авиакомпании задерживаются из-за бортпроводников, которые жалуются на низкие зарплаты и переработки, говорят источники.

Акции китайских компаний в США – «ненастоящие»

За первое полугодие 2021 года китайские компании провели 34 IPO в США и привлекли $12,5 миллиардов. За аналогичный период прошлого года объемы привлеченного капитала на IPO составили скромные $1,9 миллиардов. Но все акции китайских компаний, размещаемых в США — это акции не китайских, а каймановых компаний. Почему так — разбираемся в материале.

Xsolla уволила часть сотрудников пермского офиса после «анализа их активности» в рабочих чатах Статьи редакции

Пользователи Twitter раскритиковали компанию за причину увольнения и тон письма основателя. Сама компания обещала «максимальный уровень поддержки» тем, кто попал под сокращение.

Как устроена drop-off сеть Почты России и как она помогает сокращать время доставки и расходы на логистику

В этом году Почта России открыла крупнейшую в стране сеть пунктов сдачи отправлений для продавцов онлайн-маркетплейсов и интернет-магазинов. Оттуда товары напрямую попадают к клиентам, минуя промежуточный этап — склад маркетплейса. Зачем это нужно и чем будет полезно компаниям?

Ешь, учись, люби

Как студенту устроиться на работу в крупную компанию? Подготовили короткую инструкцию, запоминайте и сохраняйте.

Росфинмониторинг заказал разработку сервиса для отслеживания операций с биткоинами Статьи редакции

Система поможет отследить финансирование оборота наркотиков, терроризма и схемы отмывания доходов.

«БКС Мир инвестиций» объявляет о розыгрыше «умных» часов от Apple и Samsung среди владельцев ИИС

С 1 августа «БКС Мир инвестиций» проводит акцию для клиентов - разыгрываются часы Apple Watch Series 6 и Samsung Galaxy Watch 3. «Умные» часы от Apple и Samsung помимо своих основных функций позволяют также просматривать информацию о фондовом рынке, отслеживать котировки, добавлять ценные бумаги в портфель или удалять их оттуда.

null