Фильтр в каталоге

Кейс с нужностью ограничений хорошо просматривается на примере организации каталогов товаров.
 
 
Хороший пример: Каталог магазина одежды 6pm.com Рассмотрим фильтр в разделе одежды для мужчин:

Одежда для мужчин

Обратите внимание на пункты в левой колонке. Пользователь может включать/выключать чекбоксы, выборка товаров динамически фильтруется. Также обратите внимание на значения количества, указанные справа от каждого пункта. Пользователь сразу понимает, сколько результатов он получит, установив данный чекбокс.

Данный подход к фильтрации преследует ещё одну скрытую цель. Сведение к нулю вероятности получения пользователем пустой выборки. Ситуация, когда пользователь вводит группу параметров, жмёт «Найти» или «Отфильтровать», а на выходе получает пустую выборку совершенно недопустима — две-три пустые выборки и он уходит в другой магазин. При помощи данного фильтра получить пустую выборку невозможно — перечень параметров также динамически меняется в зависимости от уже выбранных пунктов. Супер-пупер. Делали долго, дорого, расчудесно.
 
 
Чуть худший пример: Каталог магазина info39.ru, раздел планшетных компьютеров:

Планшетные компьютеры

На динамическую выборку у создателей денег не хватило, но кое-что в плане минимизации пустых выборок сделано. Обратите внимание, я хочу найти все планшеты стоимостью от 20773 до 29773 рублей марки Asus. Таких планшетов в магазине нет. Есть планшеты указанного ценового диапазона, но асусовских среди них нет. Фильтр честно предупреждает — найдено ноль элементов. Тем не менее, нажать на кнопку «Применить» можно. В результате будет пустая выборка. Ну, не совсем пустая, а с заглушкой:
Заглушка
 
 
Плохой пример: Каталог магазина copicomp.ru, раздел беспроводного оборудования:
Беспроводное оборудование
В этом фильтре плохо всё. На самом деле, в этом разделе нет товаров в выбранном диапазоне, но пользователь может об этом узнать только после нажатия на кнопку «выбрать»:

Заглушка

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

Также обратите внимание на значение по-умолчению в поле «Сортировка». Никакой сортировки «По-умолчанию» не существует. Товары либо отсортированы по определённому критерию, либо расположены в случайном порядке. Было бы более правильно отсортировать товары по цене, от дорогих к дешёвым.

Наконец, «пейджинг». Можно выбрать количество товаров на странице. Корректное решение — подгрузка товаров по мере прокрутки.

Владельцам данного интернет-магазина можно рекомендовать заказать юзабилити-аудит (если вы отслеживаете входящие ссылки и прочли данный пост, звоните), иным заинтересованным читателям — не повторять данный пример.
 
 
Никаких пустых выборок в каталогах. 


Опубликовано

в

от

Если хотите получать новые посты на имейл, подпишитесь на рассылку. Пишу нечасто и по делу. 

Предыдущий пост
Осажденный изголодавшийся Париж (осада Парижа пруссаками началась 16 сентября 1870…