Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. UI/UX >
  4. Фасетный поиск (faceted search) во всплывающем окне: новые возможности мобильного дизайна

Фасетный поиск (faceted search) во всплывающем окне: новые возможности мобильного дизайна

Фасетный поиск: новые возможности мобильного дизайна

Фасетный поиск (faceted search) позволяет пользователям значительно сузить диапазон результатов благодаря возможности выбрать сразу несколько фильтров (фасетов, facets), по которым будет производиться поиск. Эта опция имеет неоценимое значение для пользователей, которым нужно найти что-то конкретное среди огромного количества контента, представленного на том или ином веб-ресурсе.

Этот тип поиска чаще всего используется интернет-магазинами, однако примеры его успешного внедрения также можно найти на ресурсах для путешественников и различных новостных порталах. Фасетный поиск имеет 2 неоспоримых преимущества:

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

Сложности отображения результатов поиска на мобильных устройствах

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

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

 фасетный поиск

На странице результатов можно увидеть специальный значок, нажав на который, пользователь перейдет на страницу параметров поиска (если предположить, что он сможет определить значение этой иконки). На первый взгляд достаточно удобно, но:

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

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

Новое решение: фасетный поиск во всплывающем окне

Совсем недавно гиганты розничной торговли — Amazon и Ebay — предложили новый способ использования опции фасетного поиска на мобильных устройствах, который заключается в отображении панели фильтров во всплывающем окне. Таким образом когда активна панель фильтров, пользователь все еще может видеть результаты поиска на втором плане.

фасетный поиск

Новый дизайн в деталях

Дизайн приложений Amazon и eBay включает несколько элементов, способствующих положительному пользовательскому опыту:

  • вертикальная панель управления отображается поверх экрана с результатами поиска;
  • результаты поиска всегда видны на фоне: пользователь может наблюдать за изменениями выборки в зависимости от выбранных фильтров (тем не менее в данном случае eBay явно проигрывает Amazon);
  • число результатов поиска зафиксировано: даже когда пользователь прокручивает длинный список фасетов вниз, оно остается видимым;
  • затемнение результатов поисковой выдачи выводит инструменты поиска на первый план;
  • панель фильтров появляется с правой стороны (этот аспект очень важен, поскольку в левой части экрана чаще всего размещается важный контент: например, в случае с Amazon пользователь может видеть изображения товаров, соответствующих его запросу).

Вы также можете заметить, что для доступа к панели фильтров и Amazon, и eBay используют слова — Filter (Фильтр) и Refine (Улучшить, Детализировать) — вместо специальных символов, как в предыдущем примере с мобильной версией сайта фотобанка istockphoto.

Безусловно, подход Amazon и eBay не обеспечивает пользователю полного простора действий, поскольку для того, чтобы приступить к изучению результатов, ему все же нужно закрыть меню фасетного поиска.

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

Высоких вам конверсий!

По материалам: nngroup.comimage source Kerstin Leishman 

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний