UX/UI

Как оформить поиск на сайте интернет-магазина: 24 необходимых элемента для сокращения пути к покупке

Подписывайтесь на телеграм-канал с кейсами роста конверсии!
Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Посетители, которые ищут товары на сайтах, ведут себя по-разному. Одни любят переходить по разделам, другие предпочитают пользоваться фильтром по конкретным параметрам, третьи делают запрос через поисковое поле на сайте. Покупатель, которому с первого раза не удается найти желаемый товар в интернет-магазине из-за недоработанного функционала, вряд ли вернется. Это приведет к снижению конверсии и недополучению магазином прибыли. Поэтому важно не только наличие товара, но и реальная помощь в его поиске.
Специалисты из Baymard Institute изучили 60 рентабельных европейских и американских интернет-магазинов. Выяснилось, что на 61% площадок поиск не оправдывает пользовательские ожидания. О важности улучшения сферы e-commerce, настройке грамотного функционала и организации поиска для интернет-магазина расскажем в статье.

Значение поиска внутри сайта для посетителей

Без функционала поиска пользователю бывает сложно добраться до интересующих товаров. Конверсия напрямую зависит от совершенства поискового функционала. Как выяснили исследователи, 60% покупателей начинают работу с интернет-магазином с кнопки поиска по сайту. Согласно данным Shopify, использовавшие кнопку посетители покупают почти в 2 раза чаще. При отсутствии результата 80% пользователей закрывают страницу.
Поиск для сайта интернет-магазина нацелен на то, чтобы:
  • покупатель быстро находил товар;
  • его маршрут по воронке продаж был как можно короче;
  • лояльность к площадке росла за счет комфортных покупок.
Если форма поиска по интернет-магазину не доработана, пользователи раздражаются. Плохое оформление поиска приводит к снижению конверсии и падению уровня лояльности к магазину. Необходимо улучшать работу с посетителями, которые ищут определенный товар.

Важность поиска внутри сайта для продаж

Бывает так, что товарные наименования по всем параметрам совпадают с названиями продуктов конкурентов. Поэтому задача поиска — обрабатывать названия товаров с ресурсов конкурентов. К примеру, посетитель может скопировать название на DNS:
Поиск по сайту интернет-магазине dns-shop.ru
Перенос товарного наименования на dns-shop.ru
После размещения запроса на Ситилинк он получает следующий результат:
Поиск интернет-магазина citilink.ru
Искомый товар в подсказках поиска на citilink.ru
Портал citilink.ru через поиск успешно переманил покупателя за счет более дешевого товара:
Карточка товара в результате поиска на сайте citilink.ru
Так выглядит карточка товара, который посетитель запросил на citilink.ru

Результаты анализа данных из поиска

С помощью анализа поиска вы можете получить ценные сведения о:
  • социально-демографических характеристиках аудитории, включая индивидуальную информацию о покупателе и его нахождении на каждом этапе воронки продаж;
  • товарах — частоте поиска товаров, их позиции в каталоге, востребованности, какие из них лучше продаются (эту задачу также помогут решить ABC-анализ ассортимента и XYZ-анализ ассортимента) или отсутствуют на складе.
Можно не только скорректировать бизнес-стратегии, но и создать индивидуальные офферы, предложить востребованные товары.
В одном из проектов при анализе поиска выяснилось следующее: посетители ищут то, что продается офлайн, но чего нет в онлайне. Клиент учел наше предложение добавить категорию популярного продукта на ресурсе. Действие принесло профит: оборот e-commerce проекта суммарно вырос на шестизначное число.
Кейс оформления поиска в интернет-магазине
Прибыль выросла после добавления продуктовой категории
У нас есть кейс настройки более эффективного поиска по сайту вместо обычного.
Мы добавили к внутреннему поиску несколько функций, что позволило:
  • автоматоматически подключать перечень востребованных запросов и товаров;
  • распределять товары в раскрывающемся списке в соответствии с числом заказов;
  • замечать неверную раскладку, использовать автоматический перевод (рус-англ, англ-рус);
  • идентифицировать близкие по смыслу термины к запросам в поисковиках;
  • настраивать на их основе страницы поисковой оптимизации с URL и HTML-тегами.
Организация поиска по сайту incanto.eu
Более детальный поисковой отбор
Благодаря этому показатель отказов сайта снизился на 9%:
Снижение отказов за счет организации поиска по сайту
Отток отказов
Количество страниц, просматриваемых пользователями за одно посещение в июле и августе, выросло с 7,28, до 8,97:
Увеличение глубины просмотров страниц за счет улучшения внутреннего поиска по сайту
Положительная динамика глубины просматриваемых страниц
Транзакции пользователей, искавших товары через смартфон, выросли на 49%.

Создание поиска по сайту

Много поисковых проблем решают сервисы «умного поиска» для интернет-магазина. К ним относятся вспомогательные устройства улучшенного поиска, серверы Sphinx, Elasticsearch.
Синтез поисковых движков и интеллектуальных сервисов продуцирует поиск, который:
  • понимает смысловое значение запроса;
  • исправляет опечатки и ошибки в словах;
  • понимает кириллицу, если названия брендов написаны на английском;
  • фильтрует и сортирует;
  • глубоко изучает пользовательское поведение и потребности
  • учитывает историю поиска;
  • выдает перечень релевантных товарных групп;
  • обращает внимание на сезон продаж.
Посетитель однозначно задержится на сайте после быстрого получения желаемого результата.
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

Элементы поиска на сайте интернет-магазина

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

1. Выделять поле поиска для сайта

Иконка или бургер не должны скрывать поисковое поле. Оно будет максимально узнаваемым и заметным на сайте при размещении в шапке или верхнем меню с постраничным отображением. Такое расположение поисковой строки привычно для глаз. Если строка короткая, сдвиньте ее вправо. Например, так выглядит правильно оформленный поиск на wildberries.ru:
Расширенный поиск для сайта wildberries.ru
Как сделана строка поиска на сайте wildberries.ru
Результаты одного из наших проектов показали 3,66% конверсии в заказы среди воспользовавшихся поисковой строкой. И всего 1,21% пришлось на долю не выполнивших поиск
Отчет по внутреннему поиску по сайту в Google Analytics
Конверсия в заказы у обоих типов покупателей
Рекомендуем к прочтению статью: Как анализировать поиск с помощью Google Analytics 4.

2. Выводить в поле поиска подсказки

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

3. Заполнять подсказки информацией

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

4. Выбирать товары из выпадающего списка подсказок

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

5. Идентифицировать ошибки, неверную раскладку, написание названий брендов кириллицей

Выяснилось, что на 27% интернет-площадок поиск неудачен при ошибочном написании даже одного символа. Иногда человек неправильно пишет слово, нажимает соседнюю клавишу, ошибается при вводе, но чаще просто копирует название товара с сайта или из мессенджера. Заложите в поиске распознавание запроса, даже если он написан некорректно.
Автокоррекция позволяет найти похожие запросы, и вместо отсутствия результата пользователь увидит искомый товар.
Посетители часто пользуются неверной раскладкой клавиатуры. Задача поиска — распознать ее и отобразить нужные позиции на странице результатов поиска.
При создании поиска по сайту необходимо учитывать, что англоязычные бренды написаны кириллицей.
Функционал поиска внутри сайта lamoda.ru с тематической фильтрацией
Варианты тематических фильтров на lamoda.ru

6. Предоставлять выбор категории в поисковом поле сайта

Когда посетители сайта начинают искать ту или иную категорию, нужно дать им возможность для ее уточнения. Можно предложить выбрать категории из раскрывающегося списка вручную. Такую опцию использует ozon.ru:
Поле поиска для сайта ozon.ru с выбором категорий
Поисковая строка с выбором категории на ozon.ru
Решение оптимально для онлайн и e-commerce магазинов, а также для маркетов с широким ассортиментом. Поисковая строка не должна перекрываться выпадающим списком категорий либо модальным окном, а поиск задается в целом по ресурсу.
Еще один вариант — навигация в поисковом поле для сайта. Она позволяет отображать больше товарных позиций в подсказках и лучше структурировать их для пользователя. При этом категории поиска должны выглядеть иначе, чем перечень поисковых подсказок.
Форма поиска по интернет магазину bonprix.ru
Навигация в поиске на bonprix.ru
Когда запрос и категория подходят друг другу, клиент будет автоматически переходить на страницу последней. Это допустимо, если категория содержит добавочную ценность. К ней относятся усовершенствованные фильтры, детализированные предварительные просмотры и другие преимущества. При этом не стоит устранять возможность возврата к обычной выдаче.
Результаты исследования Института Бэймард показывают приемлемость этого подхода для 46% онлайн-площадок.

7. Запускать поиск при нажатии на Enter и сохранять запрос в поле поиска для сайта

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

8. Возвращать к итогам предшествующих запросов

Посетителям нравится, когда они могут возвращаться к результатам более ранних запросов. Их можно вывести под поисковым полем:
Организация истории поиска внутри интернет-магазина lamoda.ru
Отображение прежних запросов в поиске на lamoda.ru

9. Предотвращать нулевую выдачу

Иногда посетитель не просто получает нулевой результат, но вынужден менять запрос в новом поиске. Пока он думает и вводит очередной запрос, проходит время. Корректировать запрос с телефона затруднительно: некоторые пользователи пытаются найти товары через меню или покидают сайт.
Избегайте нулевой выдачи на сайте, даже если запрос на товар был некорректным. Для этого предлагайте клиенту:
  • соответствующие категории (при запросе «голубое летнее платье» предложите ссылку на «платье»);
  • товары, которые посетитель просматривал ранее;
  • альтернативные решения;
  • акционные товары, новинки или хиты продаж;
  • рекламный баннер и так далее.
Так выглядит нулевая выдача на ozon.ru:
Страница результата поиска с отсутствующим товаром на сайте ozon.ru
Страница с отсутствующим товаром на ozon.ru
Результативный поиск внутри ресурса — это элемент воронки продаж. Поэтому наличие пустой страницы недопустимо.

10. Выводить запрос и число подходящих позиций на странице результатов поиска

Показ и выделение запроса происходит на странице с итогами. Это нужно для более точного анализа релевантности выдачи запросам:
Результаты поиска с отображением товара на сайте wildberries.ru
Результаты поискового запроса на wildberries.ru
Результат поиска с отображением товаров на сайте lamoda.ru
Товары по запросу на lamoda.ru
Перечисленные примеры показывают, сколько товаров было найдено на сайте. Это говорит о широте предстоящего поиска, который лучше конкретизировать.
Еще конкретнее будет отображение числа подходящих товаров в категориях, которые рекомендует поиск.
Функционал поиска внутри сайта с отображением категорий товаров на сайте lamoda.ru
Отображение соответствующих товаров в категориях на lamoda.ru

11. Выводить результаты на первый экран

Результаты необходимо выводить на первый экран, иначе пользователю придется листать страницу.
Первая страница результат поиска на сайте wildberries.ru
Выдача на первом экране на wildberries.ru

12. Делать сравнение выдаваемых товаров удобным

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

13. Оптимизировать работу с выдачей

Разные клиенты обладают различным информационным восприятием. Прежде всего им должно быть удобно пользоваться выдачей товара на сайте. Ее оптимальное отображение — таблица, сетка, блок, список. Таблица и сетка подходят для тех, кто ищет товары по своему вкусу (одежда, обувь, аксессуары). Список нужен для технически сложных продуктов, которые люди выбирают по комплексу характеристик.
Например, wildberries.ru предлагает на выбор разные размеры превью:
Превью товара на странице результата поиска по сайту на wildberries.ru
Отображение изменения превью товаров на wildberries.ru
Посетители лучше ориентируются на сайте, когда:
  • они видят, сколько товаров выведено на странице (10, 20, 40 и так далее);
  • они могут двигаться постранично и нажимать «Показать еще»;
  • на странице представлен раздел с ранее просмотренными товарами.

14. Задавать поиск по ключам и без строгих совпадений

Когда точные совпадения отсутствуют, поиск должен предлагать идентичные. К примеру, пользователь запрашивает «Большая чугунная сковорода». Если товара нет в продаже, функционал должен предложить на выбор «Большую сковороду» и «Чугунную сковороду».
Некоторые пользователи запрашивают разные критерии для искомого товара. Поэтому из любой бытовой фразы для поиска важно выделять ключи. К примеру, покупатель запрашивает «женские осенние пальто большого размера». Поисковые результаты по списку запросов должны быть такие: «осенние пальто», «женские», «размер XL+». Как выяснили исследователи, 86% сайтов обеспечивали поиск по огромному списку параметров.
Пример тегирования на странице результата поиска по сайту на wildberries.ru
Выделение ключей из запроса на wildberries.ru

15. Искать по тематическим запросам

Распознавание тематических запросов и приравнивание им подходящих смысловых значений — еще одна задача функционала. Например, «приборы на стол» = «столовые приборы».
Тематический поиск призван воспроизводить множество толкований, включая смысл запроса и товарную маркировку. Если пользователь запрашивает летние брюки, то ему должны выпадать соответствующие товары, а не обязательно включающие эти слова.
Поиск по тематическим запросам на сайте lamoda.ru
Выдача по запросу «летние брюки» на lamoda.ru
Тематические теги могут быть автоматическими фильтрами для товаров. Благодаря им посетитель легче ориентируется в выборе подходящих вещей.
Теги в результатах поиска на сайте интернет-магазина wildberries.ru
Теги в результатах поиска на wildberries.ru

16. Искать по синонимам и морфологическим словесным формам

Настраивайте поиск по словесным синонимам и морфологическим формам. Такое решение делает поиск еще более интеллектуальным. Например, если покупатель запрашивает в поиске многофункциональное устройство, он должен находить и «ксерокс», и «копировальный аппарат». Когда выдача недостаточна или написано «ничего не найдено», клиент думает, что искомого на сайте нет, и не подставляет синонимы. Важно, чтобы Поисковая система была способна ассоциировать похожие слова и выдавать пользователям желаемый результат.
Поиск товара по синонимам на сайте citilink.ru
Поиск товара по синонимам на citilink.ru
Работающий по всему миру интернет-магазин должен учитывать локацию пользователя. В различных странах и отдельных регионах а пользователи называть идентичные вещи неодинаково. Например,при продаже товаров в англоязычных странах следует учитывать, что поиск часов задается как «clock» и «watches», а бензина — «gasoline» и «petrol».

17. Учитывать сленг, аббревиатуры, сокращения и символы

Посетители нередко используют сленг, общепринятые аббревиатуры, сокращенные наименования, жаргонные названия и символы. Это зависит от того, в какой нише они ищут товар. Задача функционала — обеспечить релевантную выдачу при нестандартных запросах. Они должны сопоставляться друг с другом как синонимы.
Например, на сайте citilink.ru посетитель запрашивает жесткий диск как «винчестер»:
Результат выдачи поиска по запросу «винчестер» на citilink.ru
Выдача поиска по запросу «винчестер» на citilink.ru
Упомянутое выше многофункциональное устройство имеет аббревиатуру МФУ. Посетители часто запрашивают товар по полному названию или аббревиатуре. Чтобы развеять сомнения, что пользователи действительно часто ищут полное наименование товара, взгляните на запросы в Яндекс.Wordstat:
Анализ поисковых запросов в Яндекс Вордстате
Поиск по запросу «многофункциональное устройство»
В отношении символов ситуация сложнее, поскольку на смену их значения влияет контекст. К примеру, символ «-» означает как минус (пуховик для морозов ниже -20°), так и диапазон (пуховики 3 000-20 000 рублей).
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

18. Искать по названию модели или артикулу

Если посетители ищут определенные товары, функционал должен включать поиск по наименованию модели или артикулу. Лучше сразу выводить пользователя на товарную карточку. Чем короче путь клиента, тем выше шанс на покупку.
Отчет по поисковым запросам в Google Analytics
Статистика нахождения по моделям и артикулам
В таблице — пример площадки с поиском по модели и артикулу. Больше всего уточнений и переходов после поиска (посетители уходят с сайта) принадлежит запросам по моделям. Это прямой показатель проблемы поиска именно по ним.

19. Искать по изображению

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

20. Искать «от проблемы»

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

21. Задавать поиск, не связанный с товарами

Учитывайте реализацию возможности поиска, не имеющего отношения к товарам. Это особенно важно, когда отсутствует нормальная навигация сайта. Команда из Института Бэймард выяснила следующее: 34% посетителей интернет-магазина делают непродуктивные запросы по аналогии с обычными сайтами или поисковиками. Некоторые запросы выглядят так:
  • «условия возврата»;
  • «отменить заказ»;
  • «стоимость доставки».
Поиск на сайте по информационным запросам на ozon.ru
Информация по запросу «доставка» на ozon.ru

22. Искать аксессуары

Когда посетители сайта хотят приобрести что-то в дополнение к товару, они ищут вещь, а не сам аксессуар. При этом они ожидают, что поиск выдаст им конкретные аксессуары. Задайте в выдаче отображение блока с сопутствующими товарами.
Фильтрация на странице поиска по сайту на ozon.ru
Информация по запросу «доставка» на ozon.ru

23. Фильтровать выдачу

Когда покупатель озабочен поиском не модели, а типа товара, не всегда возможно понять его назначение. Поэтому выводите на страницу результатов поиска функции конкретной категории товаров. К ним относятся фильтр, сортировка, категориальные миниатюры. Посетителю не нужно просматривать километровые списки из сотен позиций, он может быстро отыскать желаемый товар.
Фильтрация и сортировка на странице результата поиска на ozon.ru
Фильтры и сортировка в выдаче на ozon.ru
Основное отличие сортировки от фильтрации — расположение товаров в списке по заданному критерию без исключения их из поиска. Сортировка бывает по цене, бренду, популярности, скидке, обновлению или рекомендации. Лучше всего предлагать сортировку выдачи после выбора категории.
Это важно делать, чтобы сверху не выскакивали нерелевантные продукты. В идеале пользователям рекомендуется показывать не только стандартный фильтр-блок, но и графические значки с наименованиями категорий. Удобная сортировка и фильтрация на веб-ресурсе помогает быстро находить желаемый товар.
Поиск по категориям на странице результат поиска на citilink.ru
Итоговая сортировка выдачи на citilink.ru
При поиске ноутбука конкретного бренда пользователь может проигнорировать категорию «ноутбуки», сортируя выдачу по цене. Результатом выдачи будут сначала недорогие аксессуары, а потом ноутбуки.
Плохой вариант поиска по сайту с использованием сортировки на сайте ozon.ru
Неподходящие результаты после сортировки на ozon.ru
Даже при наличии текстовой инструкции не стоит отключать сортировку раньше выбора категории поиска. Большинство посетителей не отличают фильтрацию от сортировки. Можно реализовать фасетную сортировку по типам поиска по сайту.

24. Повышать продажи избранных товаров

Можно увеличить продажи конкретных товаров, если вывести их над выдачей. Например, пользователь запрашивает категорию «памперсы» на ozon.ru:
Товарный блок над товарами на странице результата внутреннего поиска по сайту на ozon.ru
Пример продажи памперсов YokoSun на ozon.ru
Здесь конкретный продавец рекламирует свой товар в онлайн-магазине электронной торговли. Можно предложить в своем магазине над выдачей то, что вам нужно срочно продать. Также можно использовать технику up-sell.

Резюме

Хорошее юзабилити поднимает конверсии и продажи товаров в любом e-commerce проекте. Чем качественнее функционал поиска для сайта, тем сильнее влияние на рост продаж. Поэтому чрезвычайно важно совершенствовать функционал.
Несмотря на множество нюансов, вы способны сделать проект конкурентоспособным и привлекательным для посетителей. Даже если частично использовать наши рекомендации, можно организовать поиск на сайте более эффективно.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: