Идеальный дизайн окна поиска для вашей электронной коммерции

Вы когда-нибудь просматривали интернет-магазин или торговую площадку с целью поиска продукта и не могли найти окно поиска? Мы уверены, что у вас есть.

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

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

Навигация по категориям

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

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

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

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

Элементы оформления поля поиска

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

Позиция

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

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

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

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

Стили поиска по вашему сайту

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

• Цвета : вы должны использовать те же корпоративные цвета, что и на вашем сайте. Попробуйте также добавить логотип где-нибудь в поиске по сайту.
• Шрифты . Шрифт — еще один важный элемент; используйте те же шрифты, что и на вашем веб-сайте, для цифр, заголовков, кнопок…
• Кнопки . Старайтесь использовать те же стили, что и кнопки на вашем веб-сайте в кнопках «Купить» или « Добавить в корзину ».
• Другие элементы: такие как скидки, границы , использование тех же категорий, что и на вашем сайте электронной коммерции…

Размер

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

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

Дизайн окна поиска на главной странице

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

По данным Baymard Institute , 60% пользователей сразу же используют поиск в качестве первой стратегии на главной странице мобильного сайта. Следовательно, чем привлекательнее дизайн поля поиска на главной странице, тем больше пользователей воспримут его как стимул к поиску, а не к просмотру по категориям.

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

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

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

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

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