Сделать таблицу удобнее для пользователя — подсказки от дизайнера

Эндрю Койл из Flexport о UX-решениях для объёмных таблиц.

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

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

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

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

Изменение размера столбцов позволяет пользователям видеть сокращенные данные в полном объеме.

Стиль строк помогает пользователям анализировать данные. Уменьшение визуального шума за счет удаления строки или полос зебры хорошо работает для небольших наборов данных. С границами линий с чередующимися строками (также называемых полосами зебры) пользователи сохраняют местоположение при изучении длинных наборов горизонтальных данных. Однако они вызывают проблемы с удобством использования, когда есть небольшое количество строк, потому что пользователи могут приписывать значения выделенным строкам.

С меньшей высотой строки пользователь просматривает больше данных без необходимости прокрутки. Однако это может приводить к ошибкам визуального анализа. Вот почему многие успешные дизайны таблиц данных включают в себя возможность управления плотностью отображения.

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

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

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

Редактирование в строке позволяет изменять данные без перехода на отдельную страницу.

С расширяемыми строками можно оценивать дополнительную информацию без потери контекста.

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

С модальными окнами пользователь дольше остается в таблице, но уделяет больше внимания дополнительной информации и действиям.

Функция мультимодальных окон — мощное средство для активного использования множества различных функций или сравнения деталей разрозненных элементов.

Нажатие на ссылку строки преобразует таблицу в вид со списком слева и дополнительными деталями справа. Таким образом пользователь может анализировать большие наборы данных, а также ссылаться на многие элементы, не теряя при этом местоположение.

Сортировка столбцов позволяет упорядочивать строки в алфавитном и цифровом порядке.

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

Шаблон проектирования предназначен для присвоения параметров фильтрации определенным столбцам.

Этот шаблон проектирования позволяет пользователю выполнять поиск конкретных значений в каждом столбце.

Шаблон нужен для добавления столбцов из набора данных. Этот способ ограничивает данные таблицы только необходимой информацией, благодаря чему пользователь может при необходимости добавлять дополнительные столбцы.

Функция настраиваемых столбцов позволяет пользователям выбирать столбцы, которые они хотят видеть, и сортировать их соответствующим образом. Эта функция может включать в себя возможность сохранения пресетов для последующего использования.

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

Однако данные бессмысленны без способности их визуализировать и воздействовать на них. Компании, которые выживут в следующем десятилетии, будут иметь не только превосходные данные, но и превосходный пользовательский опыт.

Хороший дизайн пользовательского интерфейса основан на человеческих целях и поведении. Пользовательский интерфейс, в свою очередь, определяет поведение, на котором основаны дальнейшие дизайнерские решения. Ненавязчиво и неосознанно пользовательский опыт изменяет принцип принятия решений. Важно, чтобы мы принимали дизайн-решения, которые ведут к лучшему миру, по одному проекту таблицы данных за раз.

#Интерфейсы