По данным Baymard Institute, около 43% пользователей вместо просмотра каталога сразу вводят запрос в форму поиска. Оно и понятно, ведь при хорошей организации этот элемент позволяет найти нужное быстрее и без лишних кликов. Чем быстрее посетитель находит товар или услугу, тем выше вероятность, что он совершит покупку, подпишется на рассылку или оставит заявку.

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

• Первые утечки говорят, что Pixel 11a сохранит 8 ГБ ОЗУ, но получит новейшую SoC Tensor G6

  Read

  

Как должна выглядеть форма поиска

Сразу обозначим важный принцип: форма поиска в десктопной и мобильной версиях сайта – это два разных интерфейса, каждый со своими задачами. Поэтому рассмотрим их отдельно.

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

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

Не забывайте про кнопку запуска поиска. Она должна быть заметной и удобной для клика. Вместо маленькой иконки лупы используйте кнопку с текстом «Найти» или «Искать», чтобы пользователю было проще понять, куда нажимать, и сложнее промахнуться курсором.

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

Дополнительно рекомендуем посмотреть гайд по организации удобной мобильной навигации.

Где лучше разместить форму поиска

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

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

Еще одним местом для размещения поиска может стать область над боковым меню, которое обычно располагается в левой или правой части страницы. Такой вариант удобен для сайтов с насыщенной навигацией, где шапка уже перегружена ссылками, логотипом и контактными данными. Как и предыдущий вариант, этот подход работает только на десктопе. На мобильных устройствах боковое меню чаще всего сворачивается в бургер-меню, и поиск там либо теряется, либо становится неудобным для использования.

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

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

Как правильно оформлять и выводить результаты поиска

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

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

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

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

• Разделяйте результаты визуально. Сплошной поток текста утомляет и заставляет напрягаться. Используйте разделительные линии, отступы, разные фоны, картинки, жирные заголовки – все, что помогает глазу легко отделить нужный элемент.

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

5 идей, как повысить конверсионность поиска

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

1. Подсказки при вводе

Когда пользователь печатает запрос, рекомендуем предлагать похожие варианты, а также новинки, популярные товары и частые запросы. Это экономит время, помогает сформулировать запрос и направляет пользователя к нужному товару.

2. Поиск по разделам

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

3. Сезонные предложения

Вместо статичного «Поиск по сайту» показывайте актуальные подсказки. Например, зимой можно показать «зимние шины2, а перед 14 февраля – «подарки для любимых». Это наводит пользователя на мысль о покупке и стимулирует спрос.

На скриншоте ниже показана подборка «летних» запросов в магазине спортивных товаров:

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

4. История поиска

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

5. Заполнение пустой выдачи

Вместо страницы «Ничего не найдено» предлагайте альтернативы: исправление опечаток, синонимы, популярные товары, контакты поддержки. Это удерживает пользователя и не дает ему уйти к конкуренту. Пример подборки синонимов:

Как добавить поиск на сайт: сравниваем варианты

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

Это написание собственного движка с нуля.

Плюсы: полный контроль. Вы сами решаете, как ранжировать результаты, что индексировать, как настраивать синонимы и подсказки.

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

Такой вариант лучше всего подойдет для гигантов вроде Яндекс Маркета или Avito, у которых есть штат аналитиков и разработчиков.

Это самый популярный и быстрый способ. Вы подключаете виджет, а вся магия (индексация, алгоритмы, подсказки) происходит на стороне провайдера. Примеры сервисов: Яндекс Поиск, Detectum, anyQuery и др. Также установка виджетов может быть доступна через расширения CMS или блоки конструктора сайта.

Плюсы: быстрый запуск (от 5 минут до 1 дня), встроенный AI, умные подсказки, исправление опечаток, фильтры, аналитика. Не нужно думать о серверах и нагрузке.

Минусы: чаще всего есть ежемесячная плата и зависимость от работы и ограничений стороннего сервиса.

Такой вариант подойдет для большинства бизнесов: от интернет-магазинов до корпоративных порталов.

Вы ставите и настраиваете движок на своем сервере. Примеры: Manticore Search, Elasticsearch, Typesense и др.

Плюсы: бесплатно, полный контроль над данными (они не уходят к третьим лицам).

Минусы: такой способ потребует навыков разработки для установки, настройки и поддержки.

Данный способ подойдет тем, кому важен контроль над данными и есть возможность регулярно привлекать разработчика.

Какой вариант выбрать? Зависит от ваших задач и ресурсов. Для начала мы рекомендуем настроить Яндекс Поиск. Они бесплатен, прост в установке и наиболее распространен. В дальнейшем, если потребуется более глубокая кастомизация или специфические функции, вы сможете перейти на платные решения или разработать собственный поисковый движок, уже имея четкое понимание необходимого функционала.

Итоги

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

А если вам требуется профессиональная помощь в установке и настройке поиска на сайт, мы будем рады вам помочь. Напишите нам, и мы ответим вам в ближайшее время.