Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Правильное проектирование поиска на сайте: что нужно учесть, чтобы поиск работал на конверсию
В этой статье поговорим о проектировании поиска. Всегда ли он нужен? Как он должен работать? По каким разделам происходит поиск на сайте? Как будет выводиться результат? А будет ли предварительная выдача результата? Все эти вопросы должен задать себе UX-дизайнер при разработке Информационной архитектуры, Use Case, и продумать все функциональные моменты ещё до того, как начнёт рисовать.
Главная задача, которую должен решать поиск — помочь пользователю найти нужную информацию, поэтому от его реализации зависит конверсия сайта. На больших сайтах 60% пользователей начинают взаимодействие с продуктом через поиск и, находя информацию, совершают покупку в 1,8 раз чаще. А получая провал в результатах поиска — 80% пользователей покидают сайт, так и не узнав, что информация на сайте есть на определенной странице.
Каким должен быть поиск на сайте
Однозначного ответа на этот вопрос нет, все зависит от ниши, для которой проектируется данный функционал. В нише медицины ищут врачей и, возможно, в поиске стоит возле врача сделать кнопку «Записаться», ведь именно для этой цели пользователь ищет специалиста. В интернет-магазине может выводиться поиск товаров и возможность не только перейти на страницу продукции, но и сразу отправить «В корзину».
Самая важная задача поиска — помочь пользователю быстро найти информацию и совершить целевое действие. Представьте большой корпоративный сайт из 30 или более страниц. Человеку будет сложно пройти все разделы и страницы, более того, он этого просто делать не будет, потому что лень =) Все привыкли к удобству, что все легко и просто. Грамотно спроектированная работа поиска помогает:
Самая важная задача поиска — помочь пользователю быстро найти информацию и совершить целевое действие. Представьте большой корпоративный сайт из 30 или более страниц. Человеку будет сложно пройти все разделы и страницы, более того, он этого просто делать не будет, потому что лень =) Все привыкли к удобству, что все легко и просто. Грамотно спроектированная работа поиска помогает:
● Просто и быстро найти информацию;
● Сократить путь пользователя по воронке продаж и повысить конверсию;
● Повысить удобство при использовании сервиса / сайта, а значит, увеличить лояльность клиентов.
● Сократить путь пользователя по воронке продаж и повысить конверсию;
● Повысить удобство при использовании сервиса / сайта, а значит, увеличить лояльность клиентов.
Варианты поиска
При поиске может выводиться предварительный результат в выпадающем списке:
Предварительные результаты поиска сайта «Solok Cosmetics». Проект WebValley Studio
Также при нажатии на поиск может осуществляться переход на страницу «Результаты поиска» сразу с возможностью ввести в поисковую строку запрос, и вывести результат:
Страница поиска сайта «GMM».Проект WebValley Studio
В проектировании сервисов поиск может быть расширенным и иметь несколько полей ввода:
Расширенный поиск Яндекс
Поиск может выводить результат для разных разделов сайта — продукты, услуги, статьи, все разделы. Также поиск может корректировать запросы пользователя (если есть опечатка), понимать сленг целевой аудитории, подстраиваться под потребности и т. д.
Вывод предварительного результата поиска по разделам сайта в прототипе проекта «ЛМЗ». Проект WebValley Studio
Вывод результата поиска на странице «Результаты». Проект WebValley Studio
Все это продумывает UX-дизайнер или Аналитик на проекте.
Аналитика поиска
В разработку поиска необходимо зашить аналитику данных. Это позволит получить информацию:
- О своей целевой аудитории — на каком этапе воронки находится пользователь, частые запросы по услугам, размеру товара, интересам;
- Об услугах и товарах — какие чаще всего пользуются спросом, что лучше продаётся, чего не хватает покупателям в ассортименте.
Все эти данные помогут бизнесу скорректировать маркетинговую стратегию и создать персональные предложения в будущем, а также предлагать востребованную продукцию/услуги.
Также для улучшения конверсии, глубины просмотра, уменьшения процента отказов необходимо на основе аналитических данных постоянно совершенствовать функционал поиска.
Фичи по реализации поиска
Разберёмся в общих правилах создания поиска на сайте:
Проектируйте заметное поле поиска и иконку
Проанализируйте конкурентов. Если у всех выводится поле, то нельзя делать иконку и прятать поисковое поле за ней, в проектировании сервисов это вообще табу. Оптимально размещать поисковую строку в шапке сайта рядом с меню, где пользователи привыкли его чаще всего видеть.
Например, в почтовых сервисах это поле чаще в левой части экрана, и только в Mail оно расположено по правую сторону, что непривычно для пользователя.
Например, в почтовых сервисах это поле чаще в левой части экрана, и только в Mail оно расположено по правую сторону, что непривычно для пользователя.
Поиск в почте Google
Поисковая строка в сервисе Яндекс Почта
Поисковая строчка в сервисе Mail.ru
Продумайте вывод поисковых подсказок
Напомним, что каждый пользователь — ленивая жопка, поэтому каждый хочет получить результат как можно скорее. Здесь на помощь приходят поисковые подсказки, которые срабатывают как только пользователь вводит запрос: система сразу выдает варианты продолжения запроса.
Работа поиска на маркетплейсе Wildberries
Отображение важной информации в поисковых результатах
Что отображать в результатах поиска — зависит от ниши. Если проектируете интернет-магазин — можно вывести краткие характеристики товара, его фотографии, стоимость, рейтинг, статус. Если разрабатываете сайт клиники, можно вывести ФИО врача, его специализацию и ближайший день приёма.
Для этого необходимо понимание паттернов поведения целевой аудитории: как она принимает решение о покупке или записи в определенной нише, какие критерии выбора являются существенными.
Для этого необходимо понимание паттернов поведения целевой аудитории: как она принимает решение о покупке или записи в определенной нише, какие критерии выбора являются существенными.
Предварительный результат поиска на сайте ВкусВилл
Возможность моментального конверсионного действия
Чтобы сократить воронку продаж и повысить конверсию, а также общую стоимость покупки, предоставьте доступ к добавлению в корзину, оформлению заказа или заявке сразу с поиска. Таким образом пользователь может тут же оформить покупку или произвести запись к врачу, не переходя на страницу.
Результат предварительной выдачи поисковой строки с возможностью покупки на сайте Эльдорадо
Поиск на основании ошибок, опечаток, неверной раскладки клавиатуры
В большинстве случаев при проектировании поиска на сайтах это не настраивают, а это ошибка, которая достаточно сильно снижает конверсию. Человеку свойственно ошибаться, системе — нет, поэтому необходимо предвидеть такой паттерн поведения.
Работа поиска в сервисе OZON
Поиск по категориям
Если категорий для отображения не много, и их можно разместить в результатах поиска, лучше сразу отобразить информацию по разделам сайта:
Выдача предварительного результата поиска в мебельном магазине «ЛМЗ». Проект WebValley Studio
Но когда разделов огромное количество, выводить результат становится проблематично. Представьте, что человек ищет одежду для взрослых, а ему выводятся детские товары или вообще для дома, потому что запросы похожи. В таком случае необходимо предложить пользователю доп. функционал по выбору категории для поиска:
Реализация поиска по определенным категориям сайта Метро
Возвращение к истории запросов
В огромных маркетплейсах, интернет-магазинах или сервисах используется функционал отображения в поиске более ранних запросов. Это помогает пользователю вернуться к своим же запросам, которыми он интересовался раньше. Это хорошо влияет на возврат покупателя в воронку.
Вывод популярных запросов на сайте «ЛМЗ». Проект WebValley Studio
Отсутствие нулевой выдачи в результатах
Если пользователь не нашел информацию по нужному запросу, высока вероятность, что он просто закроет ваш сайт и уйдет с него. Чтобы не допустить такой ситуации, и повысить конверсию, необходимо продумать выдачу альтернативного решения.
Например, могут отображаться:
Например, могут отображаться:
- Другие подходящие категории — если запрос «купить телефон XIAOMI Redmi 10», а его сейчас нет в наличии, предоставьте пользователю категорию — Смартфоны Xiaomi;
- Индивидуальные рекомендации на основании истории пользователя и взаимодействия с сайтом — «возможно, вас заинтересует…»;
- Товары с акционными предложениями;
- Переход к консультации с менеджером.
Отображение количества найденных товаров или разделов по этому запросу
Отразите информацию о количестве найденных товаров в категориях.
Выдача результатов поиска на странице с разделением категорий сайта «ЛМЗ». Проект WebValley Studio
Выдача дополнительных товаров по запросу на сайте Wildberries
Удобство выдачи результатов поиска
Необходимо продумать, как будет выводиться итог для пользователя, чтобы было комфортно изучать информацию — таблицей, списком, блоками или дать пользователю возможность самому выбирать, как будет отображаться информация на странице?
Понимание сленга и тематики
Чтобы не потерять запросы, поиск должен понимать их. Например, при вводе «очки от солнца» — отображать товары — солнцезащитные очки. Или например пользователь ввел запрос «ежедневник», а в результатах отображается «блокнот органайзер».
Для такой работы необходимо постоянно анализировать запросы и совершенствовать работу поиска.
Для такой работы необходимо постоянно анализировать запросы и совершенствовать работу поиска.
Поиск по фотографии
Актуально для магазинов, маркетплейсов, сервисов, когда пользователь загружает фотографию, а система выдает ему похожие результаты:
Реализация поиска по фотографиям на сайте Яндекс
Поиск на основании решения проблемы пользователя
Актуально даже в обычных корпоративных сайтах сложных ниш, например, компании по интеграции облачных хранилищ. Пользователь может даже не понимать, как называется услуга, но зато знает, что хочет защитить документы и файлы своего бизнеса, и обеспечить доступ онлайн из любой точки мира сотрудникам.
Разбор конкретного примера — сайт Ленинградского мебельного завода
Компания занимается продажей типовой продукции — мебели (в каталоге), а также производит мебель на заказ. Поиск реализован иконкой в меню, при нажатии на которую открывается поисковая строка с популярными запросами пользователей сайта (на основании аналитики).
Поисковая строка в меню с выдачей популярных запросов на сайте «ЛМЗ». Проект WebValley Studio
При вводе поискового запроса, результат выдается в трёх категориях — Каталог (типовые изделия), Услуги (изготовление на заказ), Блог (информационные статьи по тематике).
Поисковая строка в меню с выдачей популярных запросов на сайте «ЛМЗ». Проект WebValley Studio
Каждый раздел соответствует своей колонке. В колонке «Каталог» выводится результат сразу со стоимостью и фотографиями, другие разделы — без дополнительной информации. Это сделано намеренно, так как Заказчик в своём проекте делает упор именно на продажу продукции из каталога, а фотография привлекает внимание. Тем не менее, пользователь сразу видит нужную информацию, как экспертную (по статьям), так и продающую (что компания занимается не только продажей типовой мебели из каталога, но и индивидуальными проектами на заказ).
При выводе большого количества результатов, пользователь может перейти на страницу «всех Результатов» в зависимости от раздела. Система откроет сразу нужный раздел на странице «Результаты»:
При выводе большого количества результатов, пользователь может перейти на страницу «всех Результатов» в зависимости от раздела. Система откроет сразу нужный раздел на странице «Результаты»:
Страница результатов поиска в разделе Блог на сайте «ЛМЗ». Проект WebValley Studio
Итоги
От качественно спроектированного и продуманного по функционалу поиска зависит конверсия сайта, поведенческие факторы и лояльность пользователей, поэтому реализации стоит уделить особое внимание. Чтобы грамотно продумать поиск, необходимо отталкиваться от ниши, продукта, который продаёте, и паттернов поведения целевой аудитории.
Если вам зашла статья и вы хотели бы детальнее узнать про реализацию поиска в разных нишах и сервисах — поставьте лайк внизу статьи, а мы расскажем подробнее в следующих статьях про поиск в интернет-магазинах, в сервисах, на сайтах медицинской тематики и т. д.
Если вам зашла статья и вы хотели бы детальнее узнать про реализацию поиска в разных нишах и сервисах — поставьте лайк внизу статьи, а мы расскажем подробнее в следующих статьях про поиск в интернет-магазинах, в сервисах, на сайтах медицинской тематики и т. д.
Автор статьи
Алёна Панюшкина
СОО WebValley Studio
07.06.2023
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.