I am ready for a long road flight for work with a week- or months-long projects.
РАБОТА С ПОИСКОВОЙ СТРОКОЙ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
ГАЙДЛАЙНОВ
179
В этой статье мы разберем UX/UI строки поиска в интернет-магазине. Чек-лист основан на анализе 200+ российских и зарубежных компаний. Что стоит учитывать, чтобы ваш клиент нашёл, что ему нужно без каких-либо проблем и остался доволен? Разберём все в деталях и на реальных примерах: какими практиками стоит воспользоваться, а от каких лучше воздержаться.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
ШАГИ НА ПУТИ КЛИЕНТА
Сначала определим рамки и пропишем ту часть Customer Journey, которую разберем в этой статье:
Факторы, которые стоит учитывать в рамках каждого шага, для упрощения восприятия будут разбиты на категории. Чаще всего они будут сгруппированы по элементам поисковой строки.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. ИЩУ СТРОКУ ПОИСКА
Итак, мы решаем найти нужный товар и хотим воспользоваться строкой поиска. Чтобы мы не испытали затруднений в самом начале, она должна быть привычно расположена и хорошо заметна.
РАСПОЛОЖЕНИЕ
Вверху страницы
Клиент не должен испытывать затруднения с поиском строки. Поэтому разместите ее в области, в которой он привык ее видеть на других сайтах – в верхней части страницы.
В рамках F-паттерна
Взгляд клиента скользит в рамках страницы по траектории, схожей с буквой F. Разместив строку с учетом такого паттерна, вы повышаете ее заметность.
В одном и том же месте на страницах
Consistency is king. Убедитесь, что на всех релевантных страницах поисковая строка находится в одном и том же месте и выглядит единообразно.
Рядом с каталогом
Строка и каталог – ключевые методы поиска, поэтому не разносите их в разные части экрана. Разместите их рядом друг с другом, упростив клиенту первый шаг.
Без визуального шума
По возможности сделайте так, чтобы в непосредственной близости от поисковой строки не было шума – второстепенных элементов, отвлекающих на себя внимание.
В таббаре в мобильной версии
Чтобы в мобильной версии клиенту не требовалось тянуться пальцем в верхнюю часть экрана, разместите кнопку поиска в нижней панели (tabbar).
Фиксация при прокрутке
Если клиент уже прокрутил страницу вниз и хочет перейти к поиску, не стоит утруждать его прокруткой в начало: закрепите шапку со строкой поиска при прокрутке.
Единый вид строки при прокрутке
Убедитесь, что внешний вид строки в шапке при прокрутке страницы не изменяется. В противном случае это может вызвать диссонанс на стороне клиента.
Упрощение шапки при прокрутке
Однако сама шапка может видоизменяться: при прокрутке в ней можно оставить только ключевые элементы (например, строку поиска, каталог и корзину).
ОБЩИЙ ВНЕШНИЙ ВИД
Хорошо заметна
Сам элемент поисковой строки должен быть хорошо заметен в рамках шапки и не должен сливаться по цвету с фоном. Как видим из примера, не все компании этому следуют.
Соответствие стилистике сайта
Хотя строка поиска и должна быть заметна, это не должно достигаться за счет того, что она выбивается из общей стилистики сайта.
Единый элемент интерфейса
Кто-то покупает свой новый Macbook в re:Store, а кто-то – где подешевле – и нарывается на замечательный пример того, как из одной строки поиска можно сделать аж три.
Достаточно широкая
Если строка – основной элемент поиска, хорошей практикой будет, если она займет по ширине 1/2 или 2/3 от шапки. Это сделает ее более заметной.
В виде иконки, если поиск вторичен
Если спектр категорий товаров узкий и их можно разместить прямо в шапке, а поиск через строку вторичен, можно скрыть ее за иконкой.
Не обрезает контент по ширине
Если строка спроектирована так, что по ширине обрезает даже placeholder, это может сформировать у клиента впечатление, что делалось все в формате «тяп-ляп».
Не прилипает к контенту по высоте
Желательно, чтобы между границами строки и текстом были отступы, достаточные для того, чтобы создать ощущение визуальной легкости интерфейса.
ИКОНКА
Присутствует в строке поиска
Часть клиентов больше ориентируются на текст, а часть – на визуальные образы. Облегчите жизнь второй группе клиентов, добавив в строку иконку.
Привычна
Не стоит изобретать колесо. Иконка должна быть общепринятой, не вызывать у клиента когнитивного диссонанса и перекликаться с тем, что он видел на других сайтах.
Минималистична
Иконка не должна «кричать», содержать какие-либо мелкие элементы или визуальные эффекты. Чем проще, тем лучше для восприятия.
Контрастна по отношению к строке
Как строка должна быть контрастна по отношению к фону шапки, так и иконка должна быть заметна на фоне своего контейнера.
Загружена в хорошем качестве
Базовый момент, но бывают примеры, когда даже иконка в поиске пикселит. Клиента это не отпугнет, но имиджа магазину тоже не сделает. Загружайте в векторе.
Единообразна по стилю
Иногда можно встретить случаи, когда разные иконки на сайте, рисуются разными людьми / скачиваются с разных ресурсов и не соответствуют друг другу по стилю.
PLACEHOLDER
Присутствует в строке поиска
Наличие этого ключевого элемента в строке позволяет облегчить ее восприятие в глазах пользователя.
Содержит призыв к действию
Placeholder может использоваться, как дополнительный CTA (call-to-action), побуждая клиента ввести целевой запрос. Например, «найди свою любимую футболку».
Содержит вопрос к клиенту
Вопрос в placeholder’е (например, «Что вы ищите?») также может побудить клиента ответить на него, введя ключевой запрос.
Содержит пример запроса
В качестве примера могут выступать наиболее часто покупаемые товары, товары к празднику и т.д. Ссылки на них, кстати, можно сделать кликабельными.
Примеры запросов анимированы
Placeholder в поисковой строке можно «оживить», добавив анимацию печати слов. Смотреться будет неплохо.
Подсвечивает типы запросов
Если клиент может искать не только по товарам, но и по бренду, категории, симптому, поводу, ему стоит об этом сказать. Placeholder хорошо выполнит эту задачу.
Отражает широту ассортимента
Если широта ассортимента – это ваша отличительная особенность, расскажите об этом в placeholder’е поисковой строки еще до того, как клиент начнет искать товар.
Содержит название магазина
Если вы работаете в конкурентной нише и клиент ищет товар в разных магазинах, placeholder может дополнительно подсвечивать ваше название.
Кастомизирован под клиента
Если клиент уже совершал покупки на сайте и вы знаете его предпочтения, почему бы в placeholder’е не показать ему что-то более релевантное, на что он среагирует?
Легко читаемый шрифт
Убедитесь, что для placeholder’а выбран легко читаемый общепринятый шрифт комфортного размера, а цвет текста достаточно контрастен к фону.
По цвету не совпадает с текстом запроса
Placeholder должен визуально отличаться от текста поискового запроса. В противном случае он будет восприниматься, как уже введенный текст. А это нежелательно.
2. НАВОЖУ КУРСОР НА СТРОКУ ПОИСКА
Когда мы наводим курсор мыши на элемент, важно, чтобы мы получили визуальную обратную связь, дающую понять, что строка поиска активна и на нее можно нажать.
Изменение вида строки
Хорошей практикой будет изменить внешний вид строки при наведении: изменить цвет ее обводки, фона или добавить незначительные эффекты (свечение / тень).
Визуальные эффекты – в рамках приличного
Однако изменение вида строки должно быть лишь слегка заметным: она не должна «кричать». В противном случае это может вызвать лишь отторжение у клиента.
Изменение вида курсора
При наведении на строку курсор из стандартного должен меняться на click или text edit. Вместе с изменением вида строки это побудит клиента к ее активации.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. АКТИВИРУЮ СТРОКУ ПОИСКА
Несмотря на то, что в рамках этого шага мы обсуждаем лишь 1 клик и небольшой период времени после него, здесь есть достаточно много моментов, которые стоит учитывать:
СТРОКА ПОИСКА
Изменяет вид
Изменение вида при активации строки служит дополнительной обратной связью для клиента, побуждающей к началу ввода запроса.
Расширяется
Особенно если строка в неактивном состоянии занимала мало места, расширяйте ее при активации, чтобы текст будущего запроса не обрезался на половине.
PLACEHOLDER
Не пропадает из строки
Placeholder должен отображаться и сопровождать клиента как минимум до момента начала ввода запроса.
КУРСОР
Активируется
Как и в других полях, в строке должен появляться мигающий курсор, дающий понять, что строка активирована и готова к вводу запроса.
Размещен в начале строки
Базовый момент, но встречались случаи, когда курсор по ошибке появлялся не в начале, а в конце или середине текста placeholder’а, чего быть точно не должно.
Контрастен
Курсор должен быть выполнен в хорошо заметном и контрастном по отношению к фону цвете. Чаще всего это тот же цвет, что и цвет вводимого текста.
Выровнен относительно placeholder'а
Курсор не должен съезжать ниже или выше ни placeholder’а, ни вводимого текста.
КНОПКА ОЧИСТКИ ЗАПРОСА
Не видна при активации строки
Нет смысла отображать кнопку очистки запроса, если очищать еще нечего.
СПИСОК ПОДСКАЗОК
Отображается при активации
Используйте список подсказок для облегчения поиска и снижения необходимости перехода в листинг результатов.
Содержит релевантный контент
В блок подсказок на момент активации строки можно выводить популярные товары, бренды, краткосрочные тренды, новые товары и т.д.
Не содержит вторичный контент
Если за счет подсказки вы «разгоняете» продажи товаров, не пользующихся спросом, и называете это «Выбор покупателей», есть риск, что вы не «попадете в цель».
Отображается моментально
Задержки в отображении списка подсказок, как и любые задержки в интерфейсе, могут вызвать раздражение у клиента, поэтому их желательно избегать.
Полностью вписывается в экран
Спроектируйте список подсказок так, чтобы контент умещался в нем без необходимости какой-либо прокрутки экрана и был виден сразу при появлении списка.
Выделяется на фоне страницы
С помощью рамки, тени, затемнения или, наоборот, засветления остального фона страницы. Это позволяет сфокусировать внимание клиента на вводе запроса.
ИСТОРИЯ ПОИСКА
Реализована в списке подсказок
История поиска позволяет быстро перейти к предыдущим запросам и упрощает поиск, особенно если клиент ищет товар в нескольких магазинах и возвращается повторно.
Не виден при отсутствии запросов
Блок с пустой историей поиска не должен отображаться если клиент еще ничего не искал, иначе блок просто будет отвлекать на себя внимание от других подсказок.
Очистка в 1 клик
Если клиенту не релевантна история его запросов, у него должна быть возможность очистить историю. В таком случае блок должен полностью скрываться из списка.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
4. ВВОЖУ ПОИСКОВЫЙ ЗАПРОС
На этом шаге важны как оперативность обработки запроса и качество представленных результатов, так и само визуальное представление элементов строки поиска:
СТРОКА ПОИСКА
Моментально обновляется
Задержка в показе результатов может вызвать дискомфорт. А если клиент хотел найти несколько товаров, легкий дискомфорт может перерасти в полноценное раздражение.
Содержит текст подсказки
Не утруждайте клиента вводить весь запрос целиком: предлагайте дополнить вводимый текст текстом наиболее релевантной подсказки.
Текст подсказки отличается от введенного
Клиент должен понимать, какую часть текста ввел он, а какая – предлагается системой. Поэтому выделите текст подсказки (например, тем же, но полупрозрачным цветом).
Подсказка не обрезается
Строка поиска должна быть достаточно широкой, чтобы подсказка отображалась полностью. Ценность подсказки, часть которой просто не видно, ограничена.
PLACEHOLDER
Исчезает при вводе запроса
Placeholder должен исчезать при вводе первого символа, если он не релевантен тексту запроса (например, если в нем указан пример другого запроса).
Уменьшается и продолжает отображаться
Если placeholder релевантен (например, если это вопрос или CTA), уменьшите его и отображайте рядом с запросом. Таким образом, он сыграет свою роль чуть дольше.
КУРСОР
Продолжает отображаться
Курсор не должен пропадать при вводе поискового запроса. Иначе это может вызвать ощущение, что система перестала отвечать на запрос клиента.
В конце вводимого текста
Курсор не должен «скакать» по тексту и отображаться в конце вводимого запроса. Клиент не должен совершать действий, кроме backspace, чтобы стереть текст.
ПОДДЕРЖИВАЕМЫЕ ЗАПРОСЫ
Ввод на другой раскладке
Если клиент ошибается, ему нужно помогать. Забыл переключить клавиатуру? Система должна это распознать и дать корректный результат.
Ввод с опечатками
Система должна распознавать ввод с опечатками и давать наиболее релевантные результаты. Иначе, несмотря на то, что товар в наличии, покупка может сорваться.