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

в 18:29, , рубрики: accessibility, usability, веб-дизайн, дизайн данных, дизайн таблиц, интерфейсы, типографика, метки: ,

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

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

 

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

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

image

 

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

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

image

 

Ширина столбцов

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

image

 

Вид строки

Уменьшение визуального шума в виде границы строк помогает при небольшом количестве данных в таблице. Если данных достаточно много, лучше отображать границы или использовать «зебру».

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

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

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

image

 

Подробный просмотр

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

image

 

Сортировка

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

image

 

Общие фильтры

Позволяют отображать только необходимые данные в таблице.

image

 

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

Возможность фильтровать данные в колонке.

image

 

Поиск в колонках

Позволяет быстро совершать поиск непосредственно в заголовке столбца.

image

 

Добавление колонок

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

image

 

Настраиваемые колонки

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

image

 

Почему таблицы важны

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

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

Автор: Кирилл

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js