July 16, 2022

Дизайн таблиц

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

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

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

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

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

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

Столбцы с изменяемым размером

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

Стиль строки

Полосы зебры, линейные деления, произвольная форма.

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

Отображение плотности

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

Сводка визуальной таблицы

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

Пагинация

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

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

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

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

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

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

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

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

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

Модальный

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

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

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

Строка к деталям

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

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

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

Основная фильтрация

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

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

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

Доступные для поиска столбцы

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

Добавить столбцы

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

Настраиваемые столбцы

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

Почему таблицы имеют значение

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

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

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