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

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

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

 

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

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

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

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

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

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

 

 

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

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

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

Подсказка

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

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

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

Иконка

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

Цвет

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

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

Размер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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