Довольно часто на сайтах е-коммерса нас просят реализовать фильтры. Хороший фильтр — довольно дорогая игрушка. Вообще, они не всегда уместны — пользователю проще посмотреть глазами на список, чем разбираться в логике разработчика фильтра. Конечно, если в этом списке не так много элементов. Скажем, не больше 200 в каждом разделе. Ниже в виде проверочного списка для наших QA, я зафиксировал некоторые требования, которые мы настойчиво внедряем на своих проектах с этого года. Стандартизация, ептэ.
Эти требования разумны. Часть из них трудно реализуема. Часть — очевидна. Часть — зависит от контекста. Но в целом они довольно универсальны. Если будут какие-то вопросы по конкретным пунктам — велкам в комментарии.
[ ] Если фильтр не применен — адресная строка браузера содержит ЧПУ без дополнительных параметров.
[ ] При первом заходе на страницу категории в url-е не должны быть «вопросиков».
Нужно зайти на страницу каталога или категории и убедиться, что использован ЧПУ.
Пример: Zimzum.
[ ] При переходе на товар из каталога — ссылка «назад» в браузере должна работать корректно и восстанавливать параметры.
Пример: Zolotoy-telets.
Почему именно так: Если пользователь что-то выбрал в фильтре, получил выборку, зашел в один из товаров — то кнопка «назад» в браузере должна стать активной (был совершен переход «глубже»). Кроме этого, она должна привести пользователя не просто на страницу со сброшенным фильтром, а именно на страницу с выбранными пользователем параметрами — система не должна заставлять пользователя выбирать параметры каждый раз.
[ ] Для всех полей фильтра убедиться, что загружаются корректные данные из соответствующих справочников.
[ ] Для выпадающих списков и чекбоксов проверить полноту выдаваемой информации.
[ ] Для полей ввода проверить наличие автоподстановок (чузен).
[ ] Для списков и радиобаттонов проверить возможность отмены выбранного значения, после того, как какое-либо значение уже выбрано.
[ ] Проверить, что вывод данных из справочников — отсортирован.
[ ] При открытии ссылки с отфильтрованными данными — состояние фильтра восстанавливается.
[ ] Фильтр динамически изменяет URL при применении параметров фильтрации.
[ ] При открытии ссылки с отфильтрованными данными в отдельном окне в режиме инкогнито состояние фильтра и отфильтрованные данные восстанавливаются, не вызывая редиректов, мигания фильтра или лишних переходов.
[ ] Изменение каждого поля из фильтра сохраняется и восстанавливается в ссылке.
Пример: Trainer.ru.
Почему именно так: Пользователь должен иметь возможность отфильтровать каталог и отправить ссылку на полученную выборку другому пользователю. Другой пользователь при переходе по полученной ссылке должен попадать на отфильтрованную страницу.
[ ] Все поля в фильтре корректно влияют на фильтруемый список.
[ ] Проверить фильтрацию раздельно по каждому полю.
[ ] Проверить фильтрацию по комбинации полей.
Это важно: Часто при разработке множественного фильтра перед разработчиками встает дилемма: использовать логический оператор «и» или оператор «или». Применительно к каталогу это значит: при выбранном параметре «зеленый цвет» и «размер XL» будут показаны только зеленые футболки размера XL или же все зеленые футболки и все с размером XL? Как правило, такие вопросы решаются индивидуально с руководителем проекта.
[ ] Кнопка сброса фильтра корректно работает.
[ ] Сбрасываются как параметры фильтрации, так и URL.
[ ] Перестраивается список товаров.
Пример: Zaitsev.
[ ] Предусмотрена пейджинация для поисковых машин.
Пример: Restlook.
Почему именно так: Товары в каталоге могут подгружаться «бесконечно», с помощью JavaScript. Поисковая машина «не видит» все, что находится внутри JavaScript, однако необходимо, чтобы все товары были проиндексированы. Решение: если у вас пейджинация по прокрутке (или подгрузка по AJAX, по клику на кнопку «Далее») — предусмотрите статическую ссылку, по которой поисковик сможет проиндексировать каталог, как это сделано в примере.
[ ] Robots.txt обеспечивает защиту от дублирования контента при индексации.
[ ] Страницы каталога без фильтра должны быть открыты для индексации (включая индексацию постраничной навигации).
[ ] Страницы с примененным фильтром должны быть закрыты от индексации.
Пример: Sapato — robots.txt.
Почему именно так: Когда к каталогу применяется фильтр — перестраивается страница и меняется адрес. Однако контент остается прежним. Поисковая машина воспринимает страницу отфильтрованной выдачи как отдельную самостоятельную страницу, притом как «плохую», с дублирующимся контентом. Решение: в файле robots.txt разрешить индексацию только страниц категорий и страниц с пейджинацией. Остальные (например, отфильтрованные по цвету, размеру и другим подобным параметрам) — запретить индексировать.
[ ] Фильтр не создает излишних SQL-запросов.
[ ] Работает быстро, нет необоснованных выборок.
Пример: Zappos.
[ ] Списки, чек-листы, деревья и прочие поля должны содержать только те элементы, по которым могут быть найдены позиции.
[ ] Если фильтрация по какому-либо полю или критерию вернет 0 позиций — необходимо убирать ее из фильтра или делать неактивной (в зависимости от дизайна).
Пример: Tiffany.
Это важно: Подобные операции существенно загружают сервер.
[ ] Зависимые поля обновляются синхронно.
[ ] При изменении одного из зависимых полей — остальные обновляют свои данные (обновляют списки данных, меняют активность значений и проч.).
Пример: Ebazaar.
Почему именно так: Такая механика избавляет пользователя от «нулевых» выдач, сокращает количество шагов к поиску нужных товаров. Недоступные зависимые поля можно скрывать, либо делать недоступными.
[ ] Предусмотрен прелоадер на обновление выборки.
Пример: Sapato.
[ ] Предусмотрен прелодер на обновление параметров фильтра.
Замечание: На некоторых сайтах (тот же Sapato) предусмотрен один общий прелоадер для обновления выборки и параметров фильтра. Такое вполне приемлемо, хотя нам кажется, что это не самое изящное решение.
[ ] Предусмотрен и корректно работает предварительный расчёт количества найденных позиций.
Пример: Interno и Яндекс.Маркет.
Почему именно так: В зависимости от дизайна — может быть предусмотрен как на кнопке фильтрации, так и рядом с каждым значением полей фильтра (указывается, сколько будет найдено элементов, если используется фильтр по требуемому критерию).
[ ] Фильтр с подгрузкой каталога по ajax корректно восстанавливает позицию в списке.
Пример: Restlook.
Почему именно так: Если пользователь подгрузил несколько страниц по пейджинации, это должно менять url таким образом, чтобы при переходе по нему он сразу бы попадал на нужную страницу пейджинга. Подгружать либо сразу в html, либо ajax-ом, как договоритесь с руководителем проекта.
[ ] Фильтр излишне не забивает кеширующую систему.
[ ] Для фильтров с большим объемом характеристик и большим каталогов проверить обоснованность кеширования результатов.
[ ] Наличие теггированного кеша.
[ ] Частоту сброса.
Почему именно так: Допустим, пользователь выбрал параметры: цвет «красный», размер «XL», материал «хлопок», модель «Slim», цена: 1500 руб. (цену можно было указать вручную, с клавиатуры). Вероятность повтора именно таких условий в другой выборке мала, соответственно, не стоит кешировать такую выборку. В то же время, выдача по таким параметрам может содержать элементы, которые могут требовать дополнительной выборки. Их кешировать можно.
[ ] Задано поле для сортировки по умолчанию.
[ ] Предусмотрено на дизайн-макете.
[ ] Выбранные параметры сортировки — очевидны.
[ ] Очевидно, по какому полю и в каком направлении применена сортировка сейчас.
[ ] Очевидно, как поменять поле и направление сортировки.
Пример: Ebazaar.
Это важно: Иконка рядом с полем сортировки («стрелка вверх» или «стрелка вниз») должна отражать текущее состояние сортировки.
[ ] Кнопка применения фильтра всегда находится в зоне видимости.
Пример: Bulgary.
Почему именно так: Как правило, кнопка применения фильтра должна всегда присутствовать на экране с фильтром (пользователь должен ее видеть).
[ ] Хлебные крошки при просмотре товара позволяют вернуться к правильно отфильтрованному списку.
Пример: Restlook.
Это важно: Когда пользователь попадает на страницу товара — для удобства навигации часто используют хлебные крошки. При этом, если пользователь пришел на товар из фильтра, крайне желательно по хлебным крошкам вернуть его на результаты с примененным фильтром.
Хранить параметры фильтра в ссылках хлебных крошек нельзя, чтобы обеспечить отсутствие страниц-дублей для поисковых систем. Ссылки по хлебным крошкам должны так же корректно отрабатывать, если пользователь перешел на карточку товара по прямой ссылке (в этом случае фильтр применяться не должен).
Возможное (но не единственное решение и не самое оптимальное) решение — вместо хлебных крошек использовать ссылку «Вернуться к каталогу». В адресе ссылки должен быть указан раздел каталога, к которому осуществляется возврат и дополнительный параметр, сигнализирующий о том, что, если пользователь использовал фильтр, то нужно восстановить его состояние (e.g. http://<product_cateory>?back=true).
Для того, чтобы восстановить состояние фильтра — фильтры предварительно сохраняется в сессию, раздельно для каждой категории.
[ ] При изменении параметров фильтра рядом с полем появляется кнопка «Показать».
Пример: Ebazaar.
Почему именно так: Если предусмотрено дизайном — при изменении параметров фильтра рядом с соответствующим полем сразу же появляется кнопка «Показать» с указанием количества элементов, которые будут найдены. Это позволяет пользователю сориентироваться в том, насколько ему подходят выбранные параметры фильтра до того, как они будут применены.
[ ] Хлебные крошки при просмотре товара формируются с учетом параметров фильтрации.
Пример: 6pm.
Замечание: Спорное, но интересное решение.
[ ] Выбираемые в фильтре параметры появляются в виде перечня с возможностью сброса любого из выбранных параметров.
Пример: Trias.
Почему именно так: Если предусмотрено дизайном — выбранные параметры фильтра попадают на специальную панель. У каждого параметра на панели предусмотрен крестик для отмены фильтрации по этому параметру. В некоторых случаях это удобно для пользователя, но отталкиваться всегда нужно от конкретного случая.
Чеклист в Google-доке.
Пользуйтесь и дополняйте.
А тут видео с холивара про фильтры. С обсуждениями ждем в комментах.
Эти требования разумны. Часть из них трудно реализуема. Часть — очевидна. Часть — зависит от контекста. Но в целом они довольно универсальны. Если будут какие-то вопросы по конкретным пунктам — велкам в комментарии.
Важность: Extra High
[ ] Если фильтр не применен — адресная строка браузера содержит ЧПУ без дополнительных параметров.
[ ] При первом заходе на страницу категории в url-е не должны быть «вопросиков».
Нужно зайти на страницу каталога или категории и убедиться, что использован ЧПУ.
Пример: Zimzum.
[ ] При переходе на товар из каталога — ссылка «назад» в браузере должна работать корректно и восстанавливать параметры.
Пример: Zolotoy-telets.
Почему именно так: Если пользователь что-то выбрал в фильтре, получил выборку, зашел в один из товаров — то кнопка «назад» в браузере должна стать активной (был совершен переход «глубже»). Кроме этого, она должна привести пользователя не просто на страницу со сброшенным фильтром, а именно на страницу с выбранными пользователем параметрами — система не должна заставлять пользователя выбирать параметры каждый раз.
[ ] Для всех полей фильтра убедиться, что загружаются корректные данные из соответствующих справочников.
[ ] Для выпадающих списков и чекбоксов проверить полноту выдаваемой информации.
[ ] Для полей ввода проверить наличие автоподстановок (чузен).
[ ] Для списков и радиобаттонов проверить возможность отмены выбранного значения, после того, как какое-либо значение уже выбрано.
[ ] Проверить, что вывод данных из справочников — отсортирован.
[ ] При открытии ссылки с отфильтрованными данными — состояние фильтра восстанавливается.
[ ] Фильтр динамически изменяет URL при применении параметров фильтрации.
[ ] При открытии ссылки с отфильтрованными данными в отдельном окне в режиме инкогнито состояние фильтра и отфильтрованные данные восстанавливаются, не вызывая редиректов, мигания фильтра или лишних переходов.
[ ] Изменение каждого поля из фильтра сохраняется и восстанавливается в ссылке.
Пример: Trainer.ru.
Почему именно так: Пользователь должен иметь возможность отфильтровать каталог и отправить ссылку на полученную выборку другому пользователю. Другой пользователь при переходе по полученной ссылке должен попадать на отфильтрованную страницу.
[ ] Все поля в фильтре корректно влияют на фильтруемый список.
[ ] Проверить фильтрацию раздельно по каждому полю.
[ ] Проверить фильтрацию по комбинации полей.
Это важно: Часто при разработке множественного фильтра перед разработчиками встает дилемма: использовать логический оператор «и» или оператор «или». Применительно к каталогу это значит: при выбранном параметре «зеленый цвет» и «размер XL» будут показаны только зеленые футболки размера XL или же все зеленые футболки и все с размером XL? Как правило, такие вопросы решаются индивидуально с руководителем проекта.
[ ] Кнопка сброса фильтра корректно работает.
[ ] Сбрасываются как параметры фильтрации, так и URL.
[ ] Перестраивается список товаров.
Пример: Zaitsev.
Важность: High
[ ] Предусмотрена пейджинация для поисковых машин.
Пример: Restlook.
Почему именно так: Товары в каталоге могут подгружаться «бесконечно», с помощью JavaScript. Поисковая машина «не видит» все, что находится внутри JavaScript, однако необходимо, чтобы все товары были проиндексированы. Решение: если у вас пейджинация по прокрутке (или подгрузка по AJAX, по клику на кнопку «Далее») — предусмотрите статическую ссылку, по которой поисковик сможет проиндексировать каталог, как это сделано в примере.
[ ] Robots.txt обеспечивает защиту от дублирования контента при индексации.
[ ] Страницы каталога без фильтра должны быть открыты для индексации (включая индексацию постраничной навигации).
[ ] Страницы с примененным фильтром должны быть закрыты от индексации.
Пример: Sapato — robots.txt.
Почему именно так: Когда к каталогу применяется фильтр — перестраивается страница и меняется адрес. Однако контент остается прежним. Поисковая машина воспринимает страницу отфильтрованной выдачи как отдельную самостоятельную страницу, притом как «плохую», с дублирующимся контентом. Решение: в файле robots.txt разрешить индексацию только страниц категорий и страниц с пейджинацией. Остальные (например, отфильтрованные по цвету, размеру и другим подобным параметрам) — запретить индексировать.
[ ] Фильтр не создает излишних SQL-запросов.
[ ] Работает быстро, нет необоснованных выборок.
Пример: Zappos.
[ ] Списки, чек-листы, деревья и прочие поля должны содержать только те элементы, по которым могут быть найдены позиции.
[ ] Если фильтрация по какому-либо полю или критерию вернет 0 позиций — необходимо убирать ее из фильтра или делать неактивной (в зависимости от дизайна).
Пример: Tiffany.
Это важно: Подобные операции существенно загружают сервер.
[ ] Зависимые поля обновляются синхронно.
[ ] При изменении одного из зависимых полей — остальные обновляют свои данные (обновляют списки данных, меняют активность значений и проч.).
Пример: Ebazaar.
Почему именно так: Такая механика избавляет пользователя от «нулевых» выдач, сокращает количество шагов к поиску нужных товаров. Недоступные зависимые поля можно скрывать, либо делать недоступными.
[ ] Предусмотрен прелоадер на обновление выборки.
Пример: Sapato.
[ ] Предусмотрен прелодер на обновление параметров фильтра.
Замечание: На некоторых сайтах (тот же Sapato) предусмотрен один общий прелоадер для обновления выборки и параметров фильтра. Такое вполне приемлемо, хотя нам кажется, что это не самое изящное решение.
[ ] Предусмотрен и корректно работает предварительный расчёт количества найденных позиций.
Пример: Interno и Яндекс.Маркет.
Почему именно так: В зависимости от дизайна — может быть предусмотрен как на кнопке фильтрации, так и рядом с каждым значением полей фильтра (указывается, сколько будет найдено элементов, если используется фильтр по требуемому критерию).
Важность: Normal
[ ] Фильтр с подгрузкой каталога по ajax корректно восстанавливает позицию в списке.
Пример: Restlook.
Почему именно так: Если пользователь подгрузил несколько страниц по пейджинации, это должно менять url таким образом, чтобы при переходе по нему он сразу бы попадал на нужную страницу пейджинга. Подгружать либо сразу в html, либо ajax-ом, как договоритесь с руководителем проекта.
[ ] Фильтр излишне не забивает кеширующую систему.
[ ] Для фильтров с большим объемом характеристик и большим каталогов проверить обоснованность кеширования результатов.
[ ] Наличие теггированного кеша.
[ ] Частоту сброса.
Почему именно так: Допустим, пользователь выбрал параметры: цвет «красный», размер «XL», материал «хлопок», модель «Slim», цена: 1500 руб. (цену можно было указать вручную, с клавиатуры). Вероятность повтора именно таких условий в другой выборке мала, соответственно, не стоит кешировать такую выборку. В то же время, выдача по таким параметрам может содержать элементы, которые могут требовать дополнительной выборки. Их кешировать можно.
[ ] Задано поле для сортировки по умолчанию.
[ ] Предусмотрено на дизайн-макете.
[ ] Выбранные параметры сортировки — очевидны.
[ ] Очевидно, по какому полю и в каком направлении применена сортировка сейчас.
[ ] Очевидно, как поменять поле и направление сортировки.
Пример: Ebazaar.
Это важно: Иконка рядом с полем сортировки («стрелка вверх» или «стрелка вниз») должна отражать текущее состояние сортировки.
[ ] Кнопка применения фильтра всегда находится в зоне видимости.
Пример: Bulgary.
Почему именно так: Как правило, кнопка применения фильтра должна всегда присутствовать на экране с фильтром (пользователь должен ее видеть).
[ ] Хлебные крошки при просмотре товара позволяют вернуться к правильно отфильтрованному списку.
Пример: Restlook.
Это важно: Когда пользователь попадает на страницу товара — для удобства навигации часто используют хлебные крошки. При этом, если пользователь пришел на товар из фильтра, крайне желательно по хлебным крошкам вернуть его на результаты с примененным фильтром.
Хранить параметры фильтра в ссылках хлебных крошек нельзя, чтобы обеспечить отсутствие страниц-дублей для поисковых систем. Ссылки по хлебным крошкам должны так же корректно отрабатывать, если пользователь перешел на карточку товара по прямой ссылке (в этом случае фильтр применяться не должен).
Возможное (но не единственное решение и не самое оптимальное) решение — вместо хлебных крошек использовать ссылку «Вернуться к каталогу». В адресе ссылки должен быть указан раздел каталога, к которому осуществляется возврат и дополнительный параметр, сигнализирующий о том, что, если пользователь использовал фильтр, то нужно восстановить его состояние (e.g. http://<product_cateory>?back=true).
Для того, чтобы восстановить состояние фильтра — фильтры предварительно сохраняется в сессию, раздельно для каждой категории.
[ ] При изменении параметров фильтра рядом с полем появляется кнопка «Показать».
Пример: Ebazaar.
Почему именно так: Если предусмотрено дизайном — при изменении параметров фильтра рядом с соответствующим полем сразу же появляется кнопка «Показать» с указанием количества элементов, которые будут найдены. Это позволяет пользователю сориентироваться в том, насколько ему подходят выбранные параметры фильтра до того, как они будут применены.
Важность: Low
[ ] Хлебные крошки при просмотре товара формируются с учетом параметров фильтрации.
Пример: 6pm.
Замечание: Спорное, но интересное решение.
[ ] Выбираемые в фильтре параметры появляются в виде перечня с возможностью сброса любого из выбранных параметров.
Пример: Trias.
Почему именно так: Если предусмотрено дизайном — выбранные параметры фильтра попадают на специальную панель. У каждого параметра на панели предусмотрен крестик для отмены фильтрации по этому параметру. В некоторых случаях это удобно для пользователя, но отталкиваться всегда нужно от конкретного случая.
Чеклист в Google-доке.
Пользуйтесь и дополняйте.
А тут видео с холивара про фильтры. С обсуждениями ждем в комментах.
