Close
Telegram
WhatsApp
VK
Messenger
Mail
Phone

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

ЛУЧШИЕ ПРАКТИКИ UX ИНТЕРНЕТ-МАГАЗИНОВ | СТАТЬЯ 1
Привет,
Это первая статья из цикла материалов о клиентском пути в E-commerce, в рамках которого мы пройдемся по всем стадиям взаимодействия клиента с интернет-магазином.

Если вы знакомились с предыдущими материалами на hardclient.com, вы, вероятно, заметили, что они часто получаются объемными и почти без H2O. Эта статья – не исключение: материал основан на анализе около 200 российских и зарубежных интернет-магазинов. Все элементы в рамках клиентского пути были разбиты на атомы вплоть до мельчайших деталей. Чек-лист покрывает как позитивные моменты в опыте клиента, так и грабли, на которые не стоит наступать.

Надеюсь, материал будет полезен как представителям индустрии, так и более широкой публике, в целом интересующейся клиентским опытом. И, как всегда, если вам есть что добавить, пожалуйста, пишите – сделаем этот материал лучше.
Партнер Experience.Partners
Автор сайта HardClient.com

ШАГИ НА ПУТИ КЛИЕНТА

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

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

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

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

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

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

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

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

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

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

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

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

Отсутствие шума

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

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

Убедитесь, что в мобильной версии сайта клиент может активировать поиск в 1 нажатие и ему при этом не придётся тянуться пальцем в верхнюю часть экрана. Хорошей практикой будет разместить кнопку поиска в нижней панели (tabbar).

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

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

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

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

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

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

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

Контрастность

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

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

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

Строка поиска – единый элемент

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

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

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

Представлена в виде иконки

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

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

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

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

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

ИКОНКА

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

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

Интуитивна для восприятия

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

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

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

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

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

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

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

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

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

PLACEHOLDER

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При наведении на строку курсор из стандартного должен меняться на клик или редактирование текста. Вместе с изменением внешнего вида строки это побудит пользователя к ее активации.

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

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

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

Изменяет внешний вид

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

Расширяется

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

PLACEHOLDER

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

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

КУРСОР

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

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

Располагается в начале строки

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

Контрастен

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

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

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

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

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

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

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

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

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

Содержит релевантную информацию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст подсказки не обрезается

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

PLACEHOLDER

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

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

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

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

КУРСОР

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

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

Отображается в конце вводимого текста

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

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

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

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

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

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

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

Отсутствие распознавания сокращений или синонимов также может привести к не найденным товарам / услугам и не совершенной покупке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отображает результаты не с первого символа

Если клиент, например, ввел символ «А», насколько точными будут подсказки? Вероятно, не очень. При этом появившиеся нерелевантные подсказки могут выступать в роли шума и лишь отвлекать клиента от поиска того, что ему нужно.

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

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

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

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

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

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

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

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

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

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

Подсказки не скомканы в рамках списка

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

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

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

Появление списка анимировано

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

Список разбит на смысловые блоки

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

Блоки визуально разделены

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

Пустые блоки отсутствуют

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

ТОВАРЫ В РАМКАХ СПИСКА ПОДСКАЗОК

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

Изображения есть по всем товарам

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

Заглушки соответствуют стилистике сайта

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

Изображения загружены в хорошем качестве

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

Изображения легко различимы

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

Изображения единообразны по дизайну

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

Изображения соответствуют реальности

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

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

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

Можно добавить несколько единиц товара

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

Добавление 1 единицы товара и кнопка купить – на одном месте

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

Добавить можно не больше, чем есть на складе

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

Добавление в корзину без авторизации

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

Можно убрать товар из корзины

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

Кнопка добавления в корзину снабжена иконкой

Кто-то ориентируется в интерфейсе по тексту, кто-то больше воспринимает визуальные образы. Поэтому размещение интуитивно понятной иконки в кнопке добавления в корзину не помешает.

Кнопка добавления в корзину хорошо выделена

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

Добавление в избранное

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

Цена отображается по всем товарам

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

Цена хорошо заметна

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

Отображение скидок

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

Валюта указана с помощью символа

Особенно если символ общепринятый, это позволяет разгрузить интерфейс.

Тысячи в цене разделены пробелами

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

Есть подпись о том, что это за цена

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

Стоимость мгновенно меняется при изменении числа ед. товара

Если общая цена меняется с задержкой после нажатия на кнопку, это может вызвать раздражение. Особенно если клиент решил взять не 2 и не 3 единицы товара и каждый раз при выборе ему приходится ждать.

Указаны баллы программы лояльности

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

Рейтинг указан, если он есть

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

Рейтинг указан, если он высокий

По аналогии с предыдущим пунктом, отображать товары с низким рейтингом в топе подсказок по запросу клиента может походить на лозунг «не покупайте его». Более детально о рейтинге поговорим в одной из следующих статей.

Отображаются только доступные товары

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

ССЫЛКА НА ВСЕ РЕЗУЛЬТАТЫ

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

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

Доступна при прокрутке

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

Содержит количество товаров

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

Отталкивается от целевого действия

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

Реагирует на действия клиента

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

Визуально вторична

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