Сделать таблицу удобнее для пользователя — подсказки от дизайнера
Эндрю Койл из Flexport о UX-решениях для объёмных таблиц.
Данные бесполезны без возможности их визуализировать и воздействовать на них. Успех будущих отраслей будет сочетать расширенный сбор данных с улучшенным пользовательским опытом, а в таблице данных содержится большая часть этого опыта.
Хорошие таблицы данных позволяют пользователям сканировать, анализировать, сравнивать, фильтровать, сортировать и управлять данными, чтобы получать ценную информацию и совершать действия. В этой статье представлен список структур дизайна, шаблонов взаимодействия и методов, которые помогут разработать качественные таблицы данных.
Фиксированный заголовок
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/59/99/ce/03ae3886358b6f.gif)
Когда пользователь прокручивает таблицу, фиксация заголовка строки помогает понять, в каком столбце пользователь сейчас находится.
Горизонтальная прокрутка
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/18/1b/d0/dc0a5bab885131.gif)
Горизонтальная прокрутка неизбежна при представлении больших наборов данных. Это хорошая практика для размещения данных в первом столбце. В качестве дополнительной возможности включите индивидуальную блокировку колонок, чтобы пользователи могли сравнивать данные по нескольким идентификаторам привязки.
Возможность изменения ширины столбцов
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/69/97/32/bee057ed30c623.gif)
Изменение размера столбцов позволяет пользователям видеть сокращенные данные в полном объеме.
Стиль строк
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/74/9f/1e/98f403c324d7cf.gif)
Стиль строк помогает пользователям анализировать данные. Уменьшение визуального шума за счет удаления строки или полос зебры хорошо работает для небольших наборов данных. С границами линий с чередующимися строками (также называемых полосами зебры) пользователи сохраняют местоположение при изучении длинных наборов горизонтальных данных. Однако они вызывают проблемы с удобством использования, когда есть небольшое количество строк, потому что пользователи могут приписывать значения выделенным строкам.
Плотность отображения
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/07/dc/2e/bc7cd952efa78c.gif)
С меньшей высотой строки пользователь просматривает больше данных без необходимости прокрутки. Однако это может приводить к ошибкам визуального анализа. Вот почему многие успешные дизайны таблиц данных включают в себя возможность управления плотностью отображения.
Визуальная сводка таблицы
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/8d/8e/38/9b47d37f007163.jpg)
Сводка визуальных данных дает обзор прилагаемой таблицы. Так пользователь может определять закономерности и проблемы в совокупности, прежде чем приступить к обобщению итогов.
Разбивка на страницы
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/ba/04/54/b51c3b02c19fd5.jpg)
Разбивка на страницы отображает заданное количество строк с возможностью перехода к другому количеству строк. В примере выше можно настроить количество строк для каждого представления данных. Этот шаблон часто заменяется бесконечной прокруткой. Бесконечная прокрутка постепенно загружает результаты и хорошо работает для изучения веб-сайтов, но часто катастрофична для определения приоритетности приложений.
Действия при наведении курсора
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/43/8e/6f/d4f0ee6d3a9ace.gif)
Представление дополнительных действий при наведении курсора пользователем снижает визуальный беспорядок. Тем не менее, это может вызвать проблемы с обнаружением нужной информации, поскольку пользователю необходимо взаимодействовать с таблицей.
Редактирование в строке
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/99/73/90/01a487ff77b5b5.gif)
Редактирование в строке позволяет изменять данные без перехода на отдельную страницу.
Расширяемые строки
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/a2/63/dc/fb28880cf359f6.gif)
С расширяемыми строками можно оценивать дополнительную информацию без потери контекста.
Быстрый просмотр
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/dc/a2/98/4436eaee63cf33.gif)
Быстрый просмотр, подобно расширяемым строкам, позволяет просматривать дополнительную информацию, оставаясь в контексте.
Модальное окно
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/4a/60/d0/42071b18debccc.gif)
С модальными окнами пользователь дольше остается в таблице, но уделяет больше внимания дополнительной информации и действиям.
Мультимодальные окна
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/97/d6/a2/05772bec43a124.gif)
Функция мультимодальных окон — мощное средство для активного использования множества различных функций или сравнения деталей разрозненных элементов.
Детали строки
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/fb/f3/ee/9a46f6e8dc7c24.gif)
Нажатие на ссылку строки преобразует таблицу в вид со списком слева и дополнительными деталями справа. Таким образом пользователь может анализировать большие наборы данных, а также ссылаться на многие элементы, не теряя при этом местоположение.
Сортируемые столбцы
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/d7/2d/d4/c37134c702e938.jpg)
Сортировка столбцов позволяет упорядочивать строки в алфавитном и цифровом порядке.
Базовая фильтрация
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/47/10/49/d0aef20a720954.jpg)
С базовой фильтрацией пользователь может управлять данными, представленными в таблице.
Фильтрация столбцов
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/40/06/0c/7fe0ace260198d.gif)
Шаблон проектирования предназначен для присвоения параметров фильтрации определенным столбцам.
Возможность поиска по столбцам
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/e6/e2/54/806045381d24a7.jpg)
Этот шаблон проектирования позволяет пользователю выполнять поиск конкретных значений в каждом столбце.
Добавление столбцов
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/4a/5b/9b/7ccd3c3a31de1c.jpg)
Шаблон нужен для добавления столбцов из набора данных. Этот способ ограничивает данные таблицы только необходимой информацией, благодаря чему пользователь может при необходимости добавлять дополнительные столбцы.
Возможность настраивать столбцы
![Сделать таблицу удобнее для пользователя — подсказки от дизайнера](https://png.cmtt.space/paper-media/3e/d3/1c/171b46ef0a491f.jpg)
Функция настраиваемых столбцов позволяет пользователям выбирать столбцы, которые они хотят видеть, и сортировать их соответствующим образом. Эта функция может включать в себя возможность сохранения пресетов для последующего использования.
Зачем нужны таблицы
Данные становятся сырьевым материалом мировой экономики. Поиск информации ведет к реорганизации устаревших отраслей: энергетика, СМИ, производство, логистика, здравоохранение, розничная торговля, финансы и даже правительство претерпевают цифровое преобразование.
Однако данные бессмысленны без способности их визуализировать и воздействовать на них. Компании, которые выживут в следующем десятилетии, будут иметь не только превосходные данные, но и превосходный пользовательский опыт.
Хороший дизайн пользовательского интерфейса основан на человеческих целях и поведении. Пользовательский интерфейс, в свою очередь, определяет поведение, на котором основаны дальнейшие дизайнерские решения. Ненавязчиво и неосознанно пользовательский опыт изменяет принцип принятия решений. Важно, чтобы мы принимали дизайн-решения, которые ведут к лучшему миру, по одному проекту таблицы данных за раз.
С одного источника брали, только на хабре раньше)
https://habrahabr.ru/post/328220/-uprostit-vid-i-strukturu-tablits--pr/
то-то думаю у меня дежавю
Читал и ждал, будут ли примеры таблиц для мобильных устройств
Вопрос абсолютно не по теме, но надеюсь вы мне подскажите.
Можно ли в телеграме получать главные новости за день? Как это реализовано в ВК? Если да, то как?
Да, можно. Заходишь в настройки, день, новости и нажимаешь "получать". Ваодишь номер телефона, группу крови и девечью фамилию матери соседа. Далее, придет почтальон с кодом подтверждения и галочками отметить надо разделы новостей. Галочек у вас будет столько, сколько вы поймаете днем ранее. Как сделаете, могу написать инструкцию как не получать новости за день в Telegram.
Спасибо, прямо на заметку - таблицы наше все https://mainmine.ru/priyom-platezhej-na-saite
Без сарказма никак?