Сделать таблицу удобнее для пользователя — подсказки от дизайнера
Эндрю Койл из Flexport о UX-решениях для объёмных таблиц.
Данные бесполезны без возможности их визуализировать и воздействовать на них. Успех будущих отраслей будет сочетать расширенный сбор данных с улучшенным пользовательским опытом, а в таблице данных содержится большая часть этого опыта.
Хорошие таблицы данных позволяют пользователям сканировать, анализировать, сравнивать, фильтровать, сортировать и управлять данными, чтобы получать ценную информацию и совершать действия. В этой статье представлен список структур дизайна, шаблонов взаимодействия и методов, которые помогут разработать качественные таблицы данных.
Фиксированный заголовок
Когда пользователь прокручивает таблицу, фиксация заголовка строки помогает понять, в каком столбце пользователь сейчас находится.
Горизонтальная прокрутка
Горизонтальная прокрутка неизбежна при представлении больших наборов данных. Это хорошая практика для размещения данных в первом столбце. В качестве дополнительной возможности включите индивидуальную блокировку колонок, чтобы пользователи могли сравнивать данные по нескольким идентификаторам привязки.
Возможность изменения ширины столбцов
Изменение размера столбцов позволяет пользователям видеть сокращенные данные в полном объеме.
Стиль строк
Стиль строк помогает пользователям анализировать данные. Уменьшение визуального шума за счет удаления строки или полос зебры хорошо работает для небольших наборов данных. С границами линий с чередующимися строками (также называемых полосами зебры) пользователи сохраняют местоположение при изучении длинных наборов горизонтальных данных. Однако они вызывают проблемы с удобством использования, когда есть небольшое количество строк, потому что пользователи могут приписывать значения выделенным строкам.
Плотность отображения
С меньшей высотой строки пользователь просматривает больше данных без необходимости прокрутки. Однако это может приводить к ошибкам визуального анализа. Вот почему многие успешные дизайны таблиц данных включают в себя возможность управления плотностью отображения.
Визуальная сводка таблицы
Сводка визуальных данных дает обзор прилагаемой таблицы. Так пользователь может определять закономерности и проблемы в совокупности, прежде чем приступить к обобщению итогов.
Разбивка на страницы
Разбивка на страницы отображает заданное количество строк с возможностью перехода к другому количеству строк. В примере выше можно настроить количество строк для каждого представления данных. Этот шаблон часто заменяется бесконечной прокруткой. Бесконечная прокрутка постепенно загружает результаты и хорошо работает для изучения веб-сайтов, но часто катастрофична для определения приоритетности приложений.
Действия при наведении курсора
Представление дополнительных действий при наведении курсора пользователем снижает визуальный беспорядок. Тем не менее, это может вызвать проблемы с обнаружением нужной информации, поскольку пользователю необходимо взаимодействовать с таблицей.
Редактирование в строке
Редактирование в строке позволяет изменять данные без перехода на отдельную страницу.
Расширяемые строки
С расширяемыми строками можно оценивать дополнительную информацию без потери контекста.
Быстрый просмотр
Быстрый просмотр, подобно расширяемым строкам, позволяет просматривать дополнительную информацию, оставаясь в контексте.
Модальное окно
С модальными окнами пользователь дольше остается в таблице, но уделяет больше внимания дополнительной информации и действиям.
Мультимодальные окна
Функция мультимодальных окон — мощное средство для активного использования множества различных функций или сравнения деталей разрозненных элементов.
Детали строки
Нажатие на ссылку строки преобразует таблицу в вид со списком слева и дополнительными деталями справа. Таким образом пользователь может анализировать большие наборы данных, а также ссылаться на многие элементы, не теряя при этом местоположение.
Сортируемые столбцы
Сортировка столбцов позволяет упорядочивать строки в алфавитном и цифровом порядке.
Базовая фильтрация
С базовой фильтрацией пользователь может управлять данными, представленными в таблице.
Фильтрация столбцов
Шаблон проектирования предназначен для присвоения параметров фильтрации определенным столбцам.
Возможность поиска по столбцам
Этот шаблон проектирования позволяет пользователю выполнять поиск конкретных значений в каждом столбце.
Добавление столбцов
Шаблон нужен для добавления столбцов из набора данных. Этот способ ограничивает данные таблицы только необходимой информацией, благодаря чему пользователь может при необходимости добавлять дополнительные столбцы.
Возможность настраивать столбцы
Функция настраиваемых столбцов позволяет пользователям выбирать столбцы, которые они хотят видеть, и сортировать их соответствующим образом. Эта функция может включать в себя возможность сохранения пресетов для последующего использования.
Зачем нужны таблицы
Данные становятся сырьевым материалом мировой экономики. Поиск информации ведет к реорганизации устаревших отраслей: энергетика, СМИ, производство, логистика, здравоохранение, розничная торговля, финансы и даже правительство претерпевают цифровое преобразование.
Однако данные бессмысленны без способности их визуализировать и воздействовать на них. Компании, которые выживут в следующем десятилетии, будут иметь не только превосходные данные, но и превосходный пользовательский опыт.
Хороший дизайн пользовательского интерфейса основан на человеческих целях и поведении. Пользовательский интерфейс, в свою очередь, определяет поведение, на котором основаны дальнейшие дизайнерские решения. Ненавязчиво и неосознанно пользовательский опыт изменяет принцип принятия решений. Важно, чтобы мы принимали дизайн-решения, которые ведут к лучшему миру, по одному проекту таблицы данных за раз.
© vc.ru
