Оптимизация UX для длинных списков фильтров: как не запутать пользователя
Ставим контент на первое место
Каждый уважающий себя веб-дизайнер сталкивается с дилеммой: как красиво и удобно представить пользователю длинный список фильтров? Классический вариант — левая боковая панель. Но именно она часто оказывается проблемной для дизайнеров.
Пользователи часто не замечают боковую панель, так как она находится не в привычном для них месте — не вверху страницы. Если же они ее и видят, то, как правило, фокусируются на фильтрах выше "сгиба" страницы. А те, что ниже, остаются без внимания.
Исследования показывают, что пользователи интуитивно тянутся к верху списка продуктов, чтобы найти фильтры. Сортировка, как правило, размещается именно там. Но если фильтры там отсутствуют, пользователь может просто перепутать сортировку с фильтрацией. В итоге он отсортирует результаты, но не сузит их и останется один на один с огромным количеством товаров.
Еще один минус боковой панели: она занимает четверть экрана, "отъедая" место у контента. Изображения продуктов выглядят сжатыми, а общая эстетика страницы страдает.
В том же исследовании говорится, что пользователи ожидают найти фильтры в верхней части страницы. При этом, разместить 100 фильтров по горизонтали просто невозможно. Решение — скрываемая боковая панель.
Задача дизайнера — создать удобный и интуитивно понятный интерфейс, где пользователь может легко ориентироваться и находить нужную информацию. Контент должен занимать максимум пространства на странице. Именно поэтому скрываемая боковая панель — оптимальное решение.
Для реализации этой идеи, кнопку "Показать фильтры" нужно разместить вверху страницы рядом с функцией сортировки. При нажатии на нее боковая панель выдвигается, а изображения товаров слегка уменьшаются в размерах.
После выбора нужных фильтров, боковую панель можно скрыть с помощью кнопки “Скрыть фильтры”, а изображения возвращаются к исходному размеру.
Вопрос, который часто возникает у дизайнеров: куда размещать боковую панель, слева или справа? Для ответа вернемся к принципу приоритета контента.
Все знают, что мы привыкли читать слева направо, поэтому левая панель может отвлекать от основного контента. А вот справа она будет выглядеть достаточно обособленно.
Также стоит учесть, что правая боковая панель более тесно связана с кнопкой переключения, так как находится ближе. Это делает взаимодействие более интуитивным.
Модальное окно с фильтрами: альтернатива боковой панели
В некоторых случаях модальное окно с фильтрами может быть более подходящим решением. Так они не занимают место на странице, но требуют от пользователя отдельного действия — нажатия кнопки "Применить". Переключаемая боковая панель же работает в режиме реального времени, то есть фильтры применяются мгновенно.
При использовании боковой панели фильтров результаты обновляются по мере того, как пользователь выбирает нужные опции. Вместо групповой фильтрации, где пользователь выбирает все фильтры сразу и ждет обновления, фильтры на боковой панели позволяют делать выбор поэтапно и сразу видеть изменения. Это значительно ускоряет процесс, так как не требует полной перезагрузки страницы.
Боковая панель может помочь, когда необходимо быстро обновлять результаты по большому количеству фильтров. Однако модальный экран может быть более удобным, если пользователи выбирают сразу несколько фильтров и нечасто их меняют. К тому же, им не нужно будет прокручивать длинный список, как в случае с боковой панелью.
Контент важнее элементов управления
Статичная левая боковая панель занимает четверть экрана, и остается незамеченной большинством пользователей. Скрываемая боковая панель работает наоборот. Она уважает пространство контента и занимает часть страницы только временно, пока пользователь не настроит все необходимое. Именно поэтому скрываемая боковая панель — лучшее решение для отображения длинного списка фильтров.