LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Фасетный поиск (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 

01-09-2015

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".