UnionCreated using FigmalectureCreated using Figma
new

Скидка 40% на все курсы ppc.world и 50% на пакетные предложения Подробнее

8300 https://ppc.world/uploads/images/51/4d/628cd0db274e6-Avtozapolnenie-poiska-v-ecommerce-proektah.png 2022-05-25 Маркетплейсы ppc.world 160 31

8 фишек для автоматизации поиска товаров на вашем сайте

Если в офлайн-торговле покупатель может задать вопрос о наличии товара продавцу, то в ecommerce консультантом выступает поиск на сайте. Специалисты из Baymard University считают, что автозаполнение поиска — одна из ключевых функций площадок в ecommerce. Если она реализована корректно, у пользователя не возникнет трудностей с поиском и покупкой товаров.

Специалисты из Baymard University изучили разные реализации автозаполнения поиска на ecommerce-проектах и выявили среди них те паттерны, которые работают лучше всего:

  • ограниченное число предложений;

  • отсутствие полос прокрутки;

  • различные уточняющие метки;

  • перенос текста;

  • наглядная разница в вариантах;

  • акцент на том, что интересует пользователя;

  • визуальная глубина;

  • минимум внешних элементов.

1. Ограниченное число предложений

Список предложений должен быть ограниченным. Иначе плашка с вариантами закрывает всю область просмотра — из-за этого неудобно пользоваться сайтом и управлять поиском в целом. Специалисты Baymard University отмечают, что оптимальное количество — 10 предложений. Если их больше, покупатель либо игнорирует все, либо тратит слишком много времени на то, чтобы их изучить. В мобильных версиях интернет-магазинов стоит предлагать еще меньше вариантов, чем на десктопах — от четырех до восьми.

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

Ограниченное число предложений

Здесь предложения автозаполнения закрывают всю карточку товара — пользователь не видит ничего, кроме выпадающего поля. К тому же, вариантов слишком много, и все они различаются лишь по цвету модели.

Предложения закрывают карточку товара

2. Никаких полос прокрутки

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

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

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

Есть полоса прокутки

3. Больше уточняющих меток

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

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

Есть уточняющие метки

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

Нет меток

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

Нет меток на сайте М.Видео

4. Перенос текста

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

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

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

Переноса текста нет

5. Наглядная разница в вариантах

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

На сайте DNS автозаполнение выделено жирным шрифтом — так пользователь понимает, что ввел он, а что ему предлагает сайт.

Наглядная разница в вариантах

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

Нет разницы в вариантах

6. Акцент на том, что интересует пользователя

Когда предложение, на которое пользователь навел курсор, выделяется визуально, это упрощает взаимодействие с сайтом. Кроме этого, многие операционные системы и крупные сайты приучили людей к тому, что автозаполнением можно управлять с помощью клавиатуры. Поэтому важно поддерживать и такую навигацию — стрелки вверх и вниз должны перемещать по вариантам, а клавиша Enter перенаправлять на страницу предложения, на котором курсор стоит в данный момент. В идеале список еще «возвращается» к началу, когда пользователь доходит до конца.

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

Есть акцент на варианте

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

На сайте IKEA акцента нет

7. Визуальная глубина

Визуальные элементы на веб-странице постоянно конкурируют за внимание пользователя. Когда пользователь ищет товар, остальную область лучше затемнять, заостряя внимание именно на поиске. Это минимизирует риск, что пользователь отвлечется.

Яндекс Маркет слегка затемняет главную страницу, когда пользователь вводит запрос. Это создает акцент на поле ввода и предлагаемых вариантах.

Есть визуальная глубина

На сайте бренда косметики Mi&ko затемняется вся область сайта, кроме поиска. Так пользователь концентрируется только на товаре и не отвлекается на другие элементы сайта.

Визуальная глубина

На сайте Офисмаг затемнения нет — поле предлагаемых вариантов никак не отделяется от всего сайта, из-за чего возникает визуальный шум.

Нет затемнения области

8. Минимум внешних элементов

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

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

Нет лишних элементов

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

Много лишних элементов

Кстати, еще по теме: эксперты из Baymard University проводили юзабилити-тестирование самых крупных ecommerce-площадок и на основе этого представили отчет о том, как пользователи строят поисковые запросы, когда ищут товар. Мы перевели эту работу и адаптировали ее под российский ecommerce-рынок.

Последние комментарии

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: