Составляющие успешных таблиц данных дизайна пользовательского интерфейса

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

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

Фиксированный заголовок

Проектирование и дизайн лучших таблиц данных - Фиксированный заголовок

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

Горизонтальная прокрутка

Проектирование и дизайн лучших таблиц данных - Горизонтальная прокрутка

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

Возможность изменение ширины столбцов

Проектирование и дизайн лучших таблиц данных - Возможность изменение ширины столбцов

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

Стиль строк

Проектирование и дизайн лучших таблиц данных - Стиль строк

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

Плотность отображения

Проектирование и дизайн лучших таблиц данных - Плотность отображения

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

Визуальная сводка таблицы

Проектирование и дизайн лучших таблиц данных - Визуальная сводка таблицы

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

Разбивка на страницы

Проектирование и дизайн лучших таблиц данных - Разбивка на страницы

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

Действия при наведении курсора

Проектирование и дизайн лучших таблиц данных - Действия при наведении курсора

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

Редактирование в строке

Проектирование и дизайн лучших таблиц данных - Редактирование в строке

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

Расширяемые строки

Проектирование и дизайн лучших таблиц данных - Расширяемые строки

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

Быстрый просмотр

Проектирование и дизайн лучших таблиц данных - Быстрый просмотр

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

Модальное окно

Проектирование и дизайн лучших таблиц данных - Модальное окно

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

Мультимодальные окна

Проектирование и дизайн лучших таблиц данных - Мультимодальные окна

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

Детали строки

Проектирование и дизайн лучших таблиц данных - Детали строки

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

Сортируемые столбцы

Проектирование и дизайн лучших таблиц данных - Сортируемые столбцы

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

Базовая фильтрация

Проектирование и дизайн лучших таблиц данных - Базовая фильтрация

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

Фильтрация столбцов

Проектирование и дизайн лучших таблиц данных - Фильтрация столбцов

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

Возможность поиска по столбцам

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

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

Добавление столбцов

Проектирование и дизайн лучших таблиц данных - Добавление столбцов

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

Возможность настраивать столбцы

Проектирование и дизайн лучших таблиц данных - Возможность настраивать столбцы

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

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

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

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

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

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

Если вы считаете эту статью полезной, пожалуйста, нажмите  ниже, чтобы другие пользователи смогли найти эту публикацию.

Найдите меня в Twitter и Dribbble.