UX-таблицы

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

Ниже прототипы таблиц сервиса Fleхport, но многие идеи можно позаимствовать и для личной работы.

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

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

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

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

Редактируемые колонки

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

Стиль строк

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

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

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

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

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

Нумерация страниц

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

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

Представление дополнительных действий при наведении курсора — снижает визуальный беспорядок.

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

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

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

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

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

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

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

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

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

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

Фильтры колонок

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

Источник: Medium