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

G

Gustav

Команда форума
Администратор
Сообщения
26.427
Лайки
51.172
Сделать таблицу удобнее для пользователя — подсказки от дизайнера

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

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

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

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



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

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

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

Возможность изменения ширины столбцов
Скачать Сделать таблицу удобнее для пользователя — подсказки от дизайнера

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

Зачем нужны таблицы

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

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

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