Чеклист для фильтров на сайтах

Posted on by riasevastopol

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

Само собой разумеется, в случае если в этом перечне не так много элементов. Скажем, не больше 200 в каждом разделе. Ниже в виде проверочного перечня для отечественных QA, я зафиксировал кое-какие требования, каковые мы упорно внедряем на собственных проектах с этого года.

Эти требования разумны. Часть из них тяжело реализуема. Часть — очевидна. Часть — зависит от контекста.

Но в целом они достаточно универсальны. В случае если будут какие-то вопросы по конкретным пунктам — велкам в комментарии.

Важность: 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:// ?back=true).

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

  • При трансформации параметров фильтра рядом с полем появляется кнопка «Продемонстрировать».

Пример: Ebazaar.

Из-за чего как раз так: В случае если предусмотрено дизайном — при трансформации параметров фильтра рядом с соответствующим полем сразу же появляется кнопка «Продемонстрировать» с указанием количества элементов, каковые будут отысканы. Это разрешает пользователю сориентироваться в том, как ему подходят выбранные параметры фильтра перед тем, как они будут применены.

Важность: Low

  • Хлебные крошки при просмотре товара формируются с учетом параметров фильтрации.

Пример: 6pm

Замечание: Спорное, но занимательное ответ.

  • Выбираемые в фильтре параметры появляются в виде списка с возможностью сброса любого из выбранных параметров.

Пример: Ozon

Из-за чего как раз так: В случае если предусмотрено дизайном — выбранные параметры фильтра попадают на особую панель. У каждого параметра на панели предусмотрен крестик для отмены фильтрации по этому параметру. В некоторых случаях это удобно для пользователя, но отталкиваться неизменно необходимо от конкретного случая.

Пользуйтесь и дополняйте.

Создатель: Владимир Завертайлов, Сибирикс (председатель совета директоров)

Оригинал: http://blog.sibirix.ru/2014/01/27/filters-checklist/

Случайные статьи:

ОСМОТР КВАРТИРЫ — как договориться по телефону и чек-лист осмотра


Подборка похожих статей:

riasevastopol

More Posts