Статьи

Улучшаем дизайн таблиц

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

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

Закрепленный заголовок

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

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

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

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

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

Стиль строки

Чересполосица, разделители строк, отсутствие разделителей 

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

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

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

Сводные данные в виде диаграмм и графиков

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

Разбиение на страницы

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

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

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

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

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

Раскрывающиеся строки

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

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

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

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

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

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

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

От строки к деталям

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

Сортировка в столбцах

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

Простая Фильтрация

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

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

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

Поиск в столбцах

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

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

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

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

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

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

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

Однако данные бессмысленны без возможности представить их и действовать на основе этих данных. У компаний, которые выживут в ближайшие 10 лет, будут не только превосходные данные, но и превосходный пользовательский опыт.

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