Close
Telegram
WhatsApp
VK
Messenger
Mail
Phone

РАБОТА С ПОИСКОВОЙ СТРОКОЙ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
В этой статье мы разберем UX/UI строки поиска в интернет-магазине. Чек-лист основан на анализе 200+ российских и зарубежных компаний. Что стоит учитывать, чтобы ваш клиент нашёл, что ему нужно без каких-либо проблем и остался доволен? Разберём все в деталях и на реальных примерах: какими практиками стоит воспользоваться, а от каких лучше воздержаться.

Не претендую на роль автора самого полного чек-листа по строке поиска в мире, поэтому если заметите, что что-то стоило бы добавить или есть интересные позитивные или негативные кейсы, напишите мне – вместе сделаем этот материал лучше. А если материал окажется полезен, подписывайтесь в Telegram и делитесь постом.
Партнер Experience.Partners
Автор сайта HardClient.com
ШАГИ НА ПУТИ КЛИЕНТА
Сначала определим рамки и пропишем ту часть Customer Journey, которую разберем в этой статье:
Факторы, которые стоит учитывать в рамках каждого шага, для упрощения восприятия будут разбиты на категории. Чаще всего они будут сгруппированы по элементам поисковой строки.
Работа с поисковой строкой может занять у клиента всего несколько секунд. Но есть ряд моментов, которые могут повлиять на его удовлетворенность и на которые важно обратить внимание.

1. ИЩУ СТРОКУ ПОИСКА

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

РАСПОЛОЖЕНИЕ

Вверху страницы

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

В рамках F-паттерна

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

В одном и том же месте на страницах

Consistency is king. Убедитесь, что на всех релевантных страницах поисковая строка находится в одном и том же месте и выглядит единообразно.

Рядом с каталогом

Строка и каталог – ключевые методы поиска, поэтому не разносите их в разные части экрана. Разместите их рядом друг с другом, упростив клиенту первый шаг.
hardclient

Без визуального шума

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

В таббаре в мобильной версии

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

Фиксация при прокрутке

Если клиент уже прокрутил страницу вниз и хочет перейти к поиску, не стоит утруждать его прокруткой в начало: закрепите шапку со строкой поиска при прокрутке.

Единый вид строки при прокрутке

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

Упрощение шапки при прокрутке

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

ОБЩИЙ ВНЕШНИЙ ВИД

Хорошо заметна

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

Соответствие стилистике сайта

Хотя строка поиска и должна быть заметна, это не должно достигаться за счет того, что она выбивается из общей стилистики сайта.

Единый элемент интерфейса

Кто-то покупает свой новый Macbook в re:Store, а кто-то – где подешевле – и нарывается на замечательный пример того, как из одной строки поиска можно сделать аж три.
hardclient

Достаточно широкая

Если строка – основной элемент поиска, хорошей практикой будет, если она займет по ширине 1/2 или 2/3 от шапки. Это сделает ее более заметной.
hardclient

В виде иконки, если поиск вторичен

Если спектр категорий товаров узкий и их можно разместить прямо в шапке, а поиск через строку вторичен, можно скрыть ее за иконкой.
hardclient

Не обрезает контент по ширине

Если строка спроектирована так, что по ширине обрезает даже placeholder, это может сформировать у клиента впечатление, что делалось все в формате «тяп-ляп».
hardclient

Не прилипает к контенту по высоте

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

ИКОНКА

Присутствует в строке поиска

Часть клиентов больше ориентируются на текст, а часть – на визуальные образы. Облегчите жизнь второй группе клиентов, добавив в строку иконку.
hardclient

Интуитивна

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

Минималистична

Иконка не должна «кричать», содержать какие-либо мелкие элементы или визуальные эффекты. Чем проще, тем лучше для восприятия.

Контрастна по отношению к строке

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

Загружена в хорошем качестве

Базовый момент, но бывают примеры, когда даже иконка в поиске пикселит. Клиента это не отпугнет, но имиджа магазину тоже не сделает. Загружайте в векторе.
hardclient

Единообразна по стилю

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

PLACEHOLDER

Присутствует в строке поиска

Наличие этого ключевого элемента в строке позволяет облегчить ее восприятие в глазах пользователя.
hardclient

Содержит призыв к действию

Placeholder может использоваться, как дополнительный CTA (call-to-action), побуждая клиента ввести целевой запрос. Например, «найди свою любимую футболку».
hardclient

Содержит вопрос к клиенту

Вопрос в placeholder’е (например, «Что вы ищите?») также может побудить клиента ответить на него, введя ключевой запрос.
hardclient

Содержит пример запроса

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

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

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

Отражает широту ассортимента

Если широта ассортимента – это ваша отличительная особенность, расскажите об этом в placeholder’е поисковой строки еще до того, как клиент начнет искать товар.
hardclient

Содержит название магазина

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

Кастомизирован под клиента

Если клиент уже совершал покупки на сайте и вы знаете его предпочтения, почему бы в placeholder’е не показать ему что-то более релевантное, на что он среагирует?

Легко читаемый шрифт

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

По цвету не совпадает с текстом запроса

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

2. НАВОЖУ КУРСОР НА СТРОКУ ПОИСКА

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

Изменение вида строки

Хорошей практикой будет изменить внешний вид строки при наведении: изменить цвет ее обводки, фона или добавить незначительные эффекты (свечение / тень).
hardclient

Визуальные эффекты – в рамках приличного

Однако изменение вида строки должно быть лишь слегка заметным: она не должна «кричать». В противном случае это может вызвать лишь отторжение у клиента.

Изменение вида курсора

При наведении на строку курсор из стандартного должен меняться на click или text edit. Вместе с изменением вида строки это побудит клиента к ее активации.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

3. АКТИВИРУЮ СТРОКУ ПОИСКА

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

СТРОКА ПОИСКА

Изменяет вид

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

Расширяется

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

PLACEHOLDER

Не пропадает из строки

Placeholder должен отображаться и сопровождать клиента как минимум до момента начала ввода запроса.
hardclient

КУРСОР

Активируется

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

Размещен в начале строки

Базовый момент, но встречались случаи, когда курсор по ошибке появлялся не в начале, а в конце или середине текста placeholder’а, чего быть точно не должно.
hardclient

Контрастен

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

Выровнен относительно placeholder'а

Курсор не должен съезжать ниже или выше ни placeholder’а, ни вводимого текста.

КНОПКА ОЧИСТКИ ЗАПРОСА

Не видна при активации строки

Нет смысла отображать кнопку очистки запроса, если очищать еще нечего.
hardclient

СПИСОК ПОДСКАЗОК

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

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

Содержит релевантный контент

В блок подсказок на момент активации строки можно выводить популярные товары, бренды, краткосрочные тренды, новые товары и т.д.
hardclient

Не содержит вторичный контент

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

Отображается моментально

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

Полностью вписывается в экран

Спроектируйте список подсказок так, чтобы контент умещался в нем без необходимости какой-либо прокрутки экрана и был виден сразу при появлении списка.

Выделяется на фоне страницы

С помощью рамки, тени, затемнения или, наоборот, засветления остального фона страницы. Это позволяет сфокусировать внимание клиента на вводе запроса.
hardclient

ИСТОРИЯ ПОИСКА

Реализована в списке подсказок

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

Не виден при отсутствии запросов

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

Очистка в 1 клик

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

4. ВВОЖУ ПОИСКОВЫЙ ЗАПРОС

На этом шаге важны как оперативность обработки запроса и качество представленных результатов, так и само визуальное представление элементов строки поиска:

СТРОКА ПОИСКА

Моментально обновляется

Задержка в показе результатов может вызвать дискомфорт. А если клиент хотел найти несколько товаров, легкий дискомфорт может перерасти в полноценное раздражение.

Содержит текст подсказки

Не утруждайте клиента вводить весь запрос целиком: предлагайте дополнить вводимый текст текстом наиболее релевантной подсказки.

Текст подсказки отличается от введенного

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

Подсказка не обрезается

Строка поиска должна быть достаточно широкой, чтобы подсказка отображалась полностью. Ценность подсказки, часть которой просто не видно, ограничена.
hardclient

PLACEHOLDER

Исчезает при вводе запроса

Placeholder должен исчезать при вводе первого символа, если он не релевантен тексту запроса (например, если в нем указан пример другого запроса).

Уменьшается и продолжает отображаться

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

КУРСОР

Продолжает отображаться

Курсор не должен пропадать при вводе поискового запроса. Иначе это может вызвать ощущение, что система перестала отвечать на запрос клиента.

В конце вводимого текста

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

ПОДДЕРЖИВАЕМЫЕ ЗАПРОСЫ

Ввод на другой раскладке

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

Ввод с опечатками

Система должна распознавать ввод с опечатками и давать наиболее релевантные результаты. Иначе, несмотря на то, что товар в наличии, покупка может сорваться.
hardclient

Сленг, аббревиатуры и синонимы

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

Поиск по спецификациям

Если вы продаете сложные товары с большим числом параметров, убедитесь, что, введя набор параметров, клиент получит релевантные результаты.
hardclient

Поиск по категориям

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

Поиск по проблемам и симптомам

Если клиент приходит за решением проблемы, а сила бренда товаров невелика, важно обеспечить поиск по проблемам / симптомам. Например, «спреи от насморка».

Поиск по соответствию другим товарам

Например, при поиске адаптеров для iPhone система должна понимать, какие товары типа «адаптер» связаны с iPhone, и давать релевантную подборку.

Поиск с учетом имеющихся данных

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

Поиск с учетом истории покупок

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

Непродуктовый поиск

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

СПИСОК ПОДСКАЗОК

Отображается

Используйте список подсказок для облегчения поиска и снижения необходимости перехода в листинг результатов.
hardclient

Содержит релевантные подсказки

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

Без атрибутов истории поиска в браузере

Если клиент зашел на ваш сайт, в качестве подсказок он ожидает увидеть ваши товары, а не запросы, которые он вводил на других сайтах.
hardclient

Обновляется мгновенно

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

Подсказки не дублируются

Да, подсказки не должны дублироваться. Для кого-то – банальность. Для кого-то – реальность (сайт из рейтинга Data Insight топ-100 по выручке за 2020 год):
hardclient

Подсказки содержат ключевое слово

Система должна искать не только товары, начинающиеся с вводимого ключевого слова, но и те, которые просто содержат его.
hardclient

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

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

Нет необходимости в прокрутке

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

Полностью вписывается в экран

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