Фильтры

Создание хорошего фильтра

Для создания удобного фильтра важно понимать пользователя. Общаться с пользователем на его языке. 

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

Принципы отображения фильтров

Для отображения выбранных фильтров используется два принципа. 

1. Выбранные параметры отделяются в группу «примененные фильтры».
2. Выбранные значения остаются в общем списке характеристик. 

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

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

Один фильтр - Одна страница

Фильтры должны создавать иллюзию “новой страницы" после обновления результатов поиска и давать пользователю возможность вернуться к прошлым результатам фильтрации кнопкой «Назад» в браузере.

Сортировка или фильтр?

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

Паттерны использования

Десктоп. Обычно фильтры выносят в колонку слева, а сортировку добавляют сверху. Это проверенный временем паттерн. Но автор статьи рекомендует делать фильтры по типу, как делает это AirBnb на своём сайте. Важные и необходимые параметры по сортировке и фильтрации они выносят в одну горизонтальную строку, а все редко используемые опции скрывают в отдельной кнопке «More». 

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

Источник:

How to craft a kickass filtering UX -  https://goo.gl/c4Wru2