UX/UI-рекомендации: разрабатываем идеальный внутренний поиск для Ecommerce

Вера Шкребцова
Вера Шкребцова
5 апреля 2021

Поделиться:

Главная задача поисковой строки — быстро привести клиентов к тому, что они ищут. Поэтому важно, чтобы пользоваться ею было просто и удобно. Именно UX/UI Design решает такие вопросы.
Сегодня рассмотрим, что же такое UX и UI: в чем разница и что их объединяет. Расскажем, как улучшить пользовательский опыт и пользовательский интерфейс страницы поисковой выдачи. Также вы узнаете мнение руководителя отдела UX/UI компании "Турум-бурум" Дениса Студенникова о продуманном дизайне поиска.

Дизайн имеет значение

Стив Джобс
Стив Джобс

Американский предприниматель и изобретатель


Дизайн — это не то, как предмет выглядит, а то, как он работает.

 

Если дизайн удобен пользователям — совершить целевое действие будет легче. Так, в 1954 году Пол Моррис Фиттс открыл закон, который позволяет определять оптимальные размеры, зоны нажатия и расположение элементов интерфейса в соответствии с простотой их использования. Из главных тезисов исследований Фиттса можно выделить, что:

  • чем больше цель (кликабельный элемент интерфейса) — тем проще и быстрее можно ее достигнуть;
  • после определенного этапа увеличения цели — время ее достижения практически не сокращается. Проще говоря — не стоит делать объекты на сайте огромными, так как это не принесет значительного улучшения. Поскольку закон Фиттса — это двоичный логарифм, который является строго возрастающим или строго убывающим.

С момента открытия закона прошло уже более 60 лет, но он все еще активно применяется в проектировании и дизайне интерфейсов. Крупнейшие компании применяют эти закономерности, например, Amazon увеличил ширину окна поиска и поместил его ближе к адресной строке. В результате после ввода адреса веб-сайта и перехода на Amazon.com люди могут мгновенно попасть и в окно его поиска.

Поиск на Amazon
Поиск на Amazon

Ecommerce гигант подошел ответственно к разработке функционала строки, создал не просто отдел, а учредил свою компанию A9, нацеленную на производство технологий для поиска. A9 создали в 2003 году как независимую компанию со штаб-квартирой в Пало-Альто, Калифорния. Компания на протяжении 16 лет занималась развитием поиска на сайтах Amazon. Свое сотрудничество они прекратили после скандала в 2019 году из-за изменений в алгоритме строки в пользу более прибыльных для площадки продуктов.

Создаем идеальную строку поиска

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

 

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

User Experience или UX (пользовательский опыт) — это ощущения пользователя, возникающие при взаимодействии с продуктом, сервисом или услугой. UX отвечает не только за красоту, функциональность и удобство, но и за эмоции пользователя. Цель UX — добиться, чтобы ваш продукт соответствовал коммерческим целям и задачам, доставлял клиентам положительные эмоции при каждом взаимодействии. Тем самым увеличил их лояльность к бренду.

User Interface или UI (пользовательский интерфейс) — это способ взаимодействия пользователя с продуктом, сервисом или услугой. UI фокусируется на том, как выглядит интерфейс: меню, поиск, фильтрация на сайте и другие элементы.

 

1.1. Внешний вид поисковой строки

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

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

Подсказка

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

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

Призыв к действию

Избегайте создания окна поиска без кнопки действия (CTA). Особенно в том случае, когда результаты выдачи не подтягиваются в real-time или после нажатия клавиши Enter. Поместите четкую кнопку призыва к действию непосредственно справа от строки поиска.

Пример привильного и неправильного оформления кнопки

Пример привильного и неправильного оформления кнопки

Иконка

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

Иконка поиска
Иконка поиска

Цвет

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

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

Цвет поисковой строки
Цвет поисковой строки

Размер

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

Оптимальный размер поисковой строки должен вмещать 27-30 символов.

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

Оптимальный размер 27-30 символов
Оптимальный размер 27-30 символов

1.2. Внешний вид страницы выдачи

Перейдем к визуализации результатов поиска:

Фото и цены в результатах выдачи

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

Фото и цены
Фото и цены

Количество результатов поиска

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

Количество товаров в выдаче
Количество товаров в выдаче

Поисковая выдача над разворотом

Термин «разворот» позаимствован веб-дизайнерами у полиграфистов. Это линия, по которой складывается газета. Концепция “видимой области” применима и в цифровых продуктах. Десктопные и мобильные версии ресурсов тоже имеют зону, видимую сразу после загрузки, и скрытый контент, ознакомление с которым требует дополнительных действий — скроллинга.

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

Не стоит опускать карточки товаров под рекламный баннер как на этом примере:

Карточки товаров под рекламным баннером
Карточки товаров под рекламным баннером

На следующем скриншоте результаты поиска размещены над разворотом. Пользователь сразу видит релевантные товары и заинтересован прокрутить страницу дальше.

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

Макет страницы выдачи

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

Можно выбирать способ отображения
Можно выбирать способ отображения

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

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

Прогресс поиска

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

Индикатор прогреса поиска

2. Расположение

Второй аспект, который нужно учитывать при разработке формы поиска на сайте — это ее расположение.

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

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

F-образный шаблон чтения
F-образный шаблон чтения

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

3.1. Функциональность строки поиска

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

Сохранять исходный текст в поле ввода

Настройте строку так, чтобы запросы пользователей не исчезали после нажатия кнопки “Поиск”. Если пользователи не найдут то, что ищут с первой попытки, они смогут уточнить свой запрос дополнительными словами. Чтобы им было проще это сделать, оставьте первоначальный запрос видимым в поле поиска как на рисунке ниже. Тогда пользователям не придется повторно вводить его.

Исходный текст сохранён
Исходный текст сохранён

Предлагать автоподсказки

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

  • автозаполнение или продолжение запроса;
  • категории товаров;
  • список товаров;
  • продвигаемый товар/бренд.
Моментальные автоподсказки
Моментальные автоподсказки

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

Исправлять ошибки и опечатки

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

Автоматическое исправление ошибок
Автоматическое исправление ошибок

Понимать синонимы и учитывать морфологию

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

Поиск понимает синонимы
Поиск понимает синонимы

Распознавать транслитерацию

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

Транслитерация работает
Транслитерация работает

Хранить историю запросов

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

Отображается история запросов
Отображается история запросов

3.2. Функциональность страницы с результатами

Рассмотрим дальше возможности для улучшения поисковой выдачи:

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

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

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

Релевантная выдача
Релевантная выдача

Предоставлять возможность для сортировки и фильтрации товаров

Сузив результаты поиска, вы облегчите процесс выбора и ускорите покупку. Фильтры и сортировка в этом помогут:

Есть фильтры на странице выдачи
Есть фильтры на странице выдачи

Корзина в результатах поиска

Добавить товар в корзину, минуя страницу с карточкой товара — это очень удобный и полезный функционал. Такая возможность существенно сокращает путь к покупке и экономит время клиентов.
Когда посетитель вводит запрос, он сразу же видит подходящие товары вместе с кнопкой “В корзину” как представлено на картинке ниже. Ему не нужно переходить на карточку товара и тратить время, если он уже определился с выбором.

Товар можно сразу добавить в корзину
Товар можно сразу добавить в корзину

Правильно наполняйте страницу “Ничего не найдено”

Если по запросу ничего не найдено, важно предоставить посетителям альтернативные варианты товаров. Альтернативы служат своего рода стимулом для дальнейшего изучения сайта. Например:

Страница "ничего не найдено"
Страница "ничего не найдено"

О том, как правильно оформить страницы с “пустой” выдачей, читайте по ссылке.
Вы никогда не должны оставлять юзеров без результатов и удалять товары, которых временно нет в наличии. Зачем и как правильно это делать, читайте здесь.
Уникальный отчет Multisearch по ненайденным запросам — лучший советчик, который поможет узнать, что ищут на вашем сайте, но не находят из-за отсутствия в ассортименте. С его помощью вы можете наполнить сайт востребованными товарами, которые принесут вам немалую прибыль и помогут заполучить новых покупателей.

Опыт компании "Турум-бурум"

Ребята из “Турум-бурум” в своей работе каждый день сталкиваются с проблемами, к которым приводит плохо продуманный дизайн поиска.  

 

Денис Студенников
Денис Студенников

Руководитель отдела UX/UI в студии по оптимизации интерфейсов и разработке Ecommerce проектов "Турум-бурум"

 

 


Поиск — это значительная точка роста на сайте, которую часто недооценивают и упускают из виду.

Статистика и множество примеров из практики компании Турум-бурум подтверждают, что качественно проработанный поиск даже для небольшой аудитории дает колоссальный результат.
Например, во время работы с проектом Intertop, мы определили, что около 3% посетителей сайта используют поиск. Казалось бы цифра незначительная, но это около 60 000 посетителей в месяц.
Из-за нарушения алгоритмов работы поиска, результаты выдачи были не релевантными, а процент отказов — высоким.

Пример работы поиска в интернет-магазине Intertop до редизайна

Пример работы поиска в интернет-магазине Intertop до редизайна

Решение: Мы проанализировали данные аналитики, собрали перечень запросов пользователей из строки поиска, разбили их на категории: наименование бренда, размер, тип товара и прочее. На основании полученной информации пересмотрели логику работы поиска.
74,64% — настолько увеличился коэффициент транзакций из поиска после его усовершенствования.

Пример функционирования поиска после редизайна командой Турум-бурум

Пример функционирования поиска после редизайна командой Турум-бурум

Особое внимание уделите реализации поиска в mobile. 3,5 миллиарда — столько мобильных пользователей зарегистрировано на сегодняшний день и их количество стремительно растет. Действуйте по принципу mobile-first и правильно адаптируйте инструмент поиска под мобайл.
Если на десктопе в результатах выдачи поиска можно показать 3-4 ряда товаров, то в мобайл пространство ограничено. Поэтому внедряйте строку поиска с учетом пограничного пространства:

  • обязательно оставляйте иконку поиска в шапке, не прячьте ее в бургер;
  • открывайте поиск по умолчанию, особенно если у вас большой трафик. Лучше вы спрячете «Избранное» в бургер-меню, уменьшите иконку корзины и логотип, но основную область будет занимать поиск.

Не забывайте про микро взаимодействия. UX — это не просто расположение блоков, а еще и ощущение, которое получает пользователь от интерфейса. Не заставляйте пользователей делать лишний клик. После клика на иконку поиска автоматически ставьте курсор в input. Чтобы был реализован процесс: нажал на иконку — сразу начал вводить запрос.
Например, для проекта Dicentra.ua мы реализовали полноэкранный поиск как на десктопе, так и в мобайл.  Вариант поиска в виде pop-up или в отдельном окне подходит проектам, у которых преобладает мобильный трафик. Таким образом мы создаем отдельный фокус внимания и получаем дополнительное пространство под подсказки.
Реализация поиска в отдельном окне для интернет-магазина Dicentra:

Окно поиска открывается в отдельном окне
Выводы:

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

 

Подведем итог

Созданная с учетом описанных нами функций и нюансов панель поиска подарит вашим клиентам положительные эмоции и заставит их возвращаться на ваш сайт снова и снова.
Разработка строки своими силами — процесс не быстрый и затратный. Вы можете сэкономить время и бюджет, выбрав умный поиск Multisearch. Это готовое решение с широкими функциональными возможностями, которое очень просто устанавливается. Smart поиск легко находит нужный товар, поэтому нравится посетителям сайтов. Владельцев же интернет-магазинов подкупает в Multisearch его способность увеличивать конверсию.
Если вы хотите узнать больше о функциях поиска и о том, как он может вам помочь — просто свяжитесь с нами. 14 дней бесплатного тестового периода помогут вам убедиться в эффективности умного и быстрого поиска Multisearch.

 

 

Поделиться:

Вера Шкребцова
Автор
Вера Шкребцова
SMM маркетолог

Простая установка
в 2 шага

Без сложных настроек. Без затрат на IT.
Уже через час ваша поисковая строка станет умной. 14 дней бесплатно

1
Укажите ссылку на
Яндекс.Маркет фид
2
Пропишите Javascript
строку кода
Начать
Еще интересненькое