- Статьи
- 4 мин на чтение
- 6
Как упростить сложную сортировку данных
Оптимальный дизайн сортировки
Интерфейс может хорошо отображать данные, но насколько он удобен, если пользователю нужно их отсортировать? Чаще всего дизайнеры не уделяют должного внимания проектированию сортировки, поэтому большинство сортировок работают плохо.
В результате пользователям приходится тратить время на сканирование и фильтрацию большого количества информации. Вместо того чтобы найти нужные данные на первой странице результатов, им приходится возиться с пагинацией.
Сортировка данных должна приводить пользователей к нужной информации в один клик и отображать её на первой же странице. Чтобы этого добиться, при проектировании сортировки данных внесите следующие изменения.
Сделайте названия понятными
Человек, который применяет сортировку, должен сразу понимать суть названий каждого её элемента. Часто дизайнеры используют в названиях сложные для восприятия технические термины. Другими словами, пользователям приходится останавливаться и вникать в смысл названий, прежде чем они начнут действовать.
Неудачный пример слева показывает названия, в которых дизайнеры использовали технический язык, например, в сортировке по приоритету. Лучше выбрать такие названия, как будто один человек описывает данные другому человеку. То есть доступным языком, как в примере справа.
- Название «Наивысшая оценка» можно заменить на более понятное «По рейтингу».
- Название «По дате изменения» можно заменить на более понятное «Сначала новые».
- Название «По дате создания» можно заменить на более понятное «Сначала старые».
- Название «По возрастанию» можно заменить на более понятное «От А до Я».
- Название «По убыванию» можно заменить на более понятное «От Я до А».
- Название «Цена: от высокой до низкой» корректнее заменить на «Сначала дорогие».
- Название «Цена: от низкой до высокой» корректнее заменить на «Сначала дешёвые».
Используйте переключатель
Большинство дизайнеров отображают опции сортировки данных в формате выпадающего списка. Однако такой вид скрывает опции от пользователей, что ухудшает их опыт взаимодействия с интерфейсом. В результате они не знают, что можно сортировать данные по определённым критериям.
Кроме того, если скрывать опции в выпадающем списке, пользователям придётся совершить больше действий, чтобы выбрать нужную опцию. Они должны будут найти выпадающий список, кликнуть, чтобы открыть его, просмотреть перечень вариантов, прокрутить до нужного пункта и кликнуть по нему. Для сортировки данных этапов слишком много.
Переключатель гораздо лучше подходит для сортировки данных, поскольку он решает все вышеперечисленные проблемы юзабилити. Пользователи сразу увидят сортировку данных, поскольку варианты будут отображаться прямо на странице. Больше людей смогут ей воспользоваться, потому что она будет более заметная.
Кроме того, пользователям больше не придётся прилагать усилия, чтобы отсортировать данные. Они смогут быстро просмотреть варианты и выбрать один из них, не открывая и не прокручивая список. В итоге взаимодействие сводится к сканированию и нажатию, а не к сканированию, нажатию, повторному сканированию, прокрутке и ещё одному нажатию.
Переключатель лучше работает, поскольку его основное предназначение — переключение между видами сортировки. Когда вы сортируете данные, вы показываете пользователям различные представления информации. Вы не манипулируете данными, а скорее упорядочиваете их.
Проблемы с пространством экрана
Всем понятно, что переключатель занимает больше места на экране, чем выпадающий список. В десктопных приложениях достаточно пространства по ширине, поэтому размещение переключателя не должно вызывать проблем. Однако для мобильных приложений лучше подходит выпадающий список.
Кроме того, большинство сортировок данных включают всего несколько вариантов, поскольку критерии сортировки ограничены. Поэтому с размещением переключателя в десктопной версии, скорее всего, проблем не возникнет.
Детализируйте критерии сортировки
Ещё один способ улучшить сортировку данных — детализировать критерии сортировки. Большинство сортировок содержат критерии по времени и рейтингу, например, новинки и популярность. Однако эти критерии слишком поверхностные, чтобы пользователи могли получить нужную информацию.
Например, есть несколько уровней популярности, и сложно угадать, какой из них задействуется в сортировке. Популярность может определяться многими критериями: количеством просмотров, комментариев и оценок. Сортировка по популярности требует большей детализации и конкретики.
Время — также важный фактор при сортировке. Пользователи могут захотеть найти популярные данные за определённый промежуток времени, но слишком упрощённая сортировка не сможет учесть такие детальные критерии. Поэтому необходимо предусмотреть вторичную сортировку по времени, чтобы она совпадала с сортировкой по популярности.
Например, когда пользователи выбирают «Самые просматриваемые», рядом с переключателем лучше отобразить дополнительный вариант сортировки по времени. Теперь пользователи смогут сортировать популярные данные по временным периодам. Детализация критериев делает сортировку данных более полезной и эффективной по сравнению с предыдущими версиями.
Обратите внимание, что выпадающий список по времени появляется только тогда, когда пользователь выбирает критерий ранжирования. Если человек выбирает «Новинки», меню не должно появляться, потому что сортировка по времени неприменима к этому параметру.
Вы можете многое сделать, чтобы улучшить пользовательский опыт сортировки данных. Когда людям проще сортировать данные, им легче найти конкретную информацию, не пролистывая множество страниц. Выполните эти дизайн-рекомендации, чтобы упростить сложный интерфейс.
- Источник:
- UX Movement Newsletter
