Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

Проектируем строку поиска в приложении

Лучшие практики UX/UI в мобильном e-commerce

188

гайдлайнов

Поисковая строка – один из ключевых инструментов в e-commerce приложении, от которого зависит, найдет клиент нужные товары или уйдет к конкурентам.

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

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

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

Размещение строки поиска
Внешний вид строки
Placeholder строки поиска
Активация строки
Подсказка при активации строки
Поддерживаемые типы запросов
Подсказка при вводе запроса
История поиска
Подсказка при отсутствии результатов
Очистка запроса
Отмена поиска
Переход к результатам поиска
Альтернативы строке поиска

Размещение строки поиска

6 гайдлайнов

В верхней части экрана

Чаще всего на текущий момент поисковую строку можно встретить именно вверху экрана. Это наиболее часто встречаемый паттерн.

Пример • Рив Гош

Внизу экрана?

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

Пример • Zara

Изначально в центре экрана

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

Пример • Спортмастер

Фиксация при скролле

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

Пример • Л'Этуаль

В таббаре

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

Пример • Букмейт

В быстрых действиях

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

Пример • Lamoda

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

5 гайдлайнов

Строка видна полностью

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

Пример • Яндекс.Маркет

Строка спрятана за кнопку

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

Пример • Rendez-Vous

Непрозрачна

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

Антипример • Urban Vibes

Хорошо выделяется

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

Антипример • Zara

Иконка общепринятая

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

Пример • Zarina

Placeholder строки поиска

25 гайдлайнов

Предусмотрен

В строке поиска, как и во множестве других полей ввода, стоит предусмотреть placeholder, облегчающий понимание ее функции.

Антипример • Sela

В левой части строки

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

Антипример • Zara

Центрирован по горизонтали

Реже используется центрированный placeholder, визуально превращающий строку в подобие кнопки. Но, опять же, такое центрирование уместно лишь до момента ее активации.

Пример • Впрок

Контрастен

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

Антипример • Zenden

Размер шрифта удобен для чтения

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

Антипример • Lichi

Отличается по цвету от текста запроса

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

Антипример • Gloria Jeans

Не обрезается

Спроектируйте строку поиска и текст placeholder'а так, чтобы он не обрезался и был виден полностью.

Антипример • Почта России

Без дублирования контента

Если в поиске есть заголовок, в том, чтобы продублировать текст в placeholder'е, нет особого смысла. Лучше придумать что-то более креативное.

Антипример • KDV Online

Текст корректен

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

Антипример • Mango

Содержит целевое действие

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

Пример • Kazan Express

Поясняет, когда обновится подсказка?

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

Пример • Kuchenland

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

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

Пример • Lamoda

Не вводит в заблуждение

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

Антипример • Simple Wine

Содержит вопрос

Некоторые компании в placeholder'е как бы обращаются к пользователю, спрашивая, что он хочет найти.

Пример • Street Beat

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

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

Пример • СберМаркет

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

Placeholder можно подстраивать под контекст, в котором находится клиент. Например, при поиске по каталогу одного из магазинов в placeholder'е можно упоминать его название.

Пример • igooods

Подсвечивает широту ассортимента

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

Пример • Somon

Подсвечивает качество функции поиска

Можно встретить кейсы, когда в placeholder'е специально подсвечивается, что поиск удобный и быстрый. В таком случае главное – соответствовать этому обещанию.

Пример • La Redoute

Выполнен от лица клиента

Иногда можно встретить кейсы, когда текст placeholder'а выполнен от первого лица и как бы отталкивается от действия клиента.

Пример • Kari

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

Иногда в placeholder'е можно встретить пример товара, который можно найти. Указание просто названия товара может сбить пользователя с толку и дезориентировать.

Пример • Додо Пицца

Динамически обновляется

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

Пример • Lazada

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

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

Антипример • OBI

Меняет формулировку при активации

Если поисковая строка отображалась по умолчанию полностью, при ее активации placeholder может меняться, становясь более приближенным к контексту.

Пример • Маркет Деливери

Курсор в начале текста при активации

При активации строки поиска курсор должен располагаться в начале placeholder'а. Это наиболее привычный паттерн.

Антипример • INCITY

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

Отображение уменьшенного placeholder'а при вводе данных в формы – хороший паттерн. Но для поиска это редкость. Что думаете по этому поводу? Напишите в комментах.

Пример • Lime

Активация строки

6 гайдлайнов

В одно касание

Как бы ни была спроектирована строка – видна полностью или спрятана за кнопку – она должна активироваться в одно касание.

Антипример • O'STIN

Реакция на касание

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

Пример • Букмейт

Плавная анимация

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

Пример • Lamoda

Без задержек

Активация строки при тапе по ней должна происходить моментально, без каких-либо задержек.

Пример • Shop

Без сильного изменения дизайна

Строку можно незначительно изменить при активации, но менять скругление углов, цвет заливки, размер шрифта в placeholder'е, иконку и т.д. – вероятно, уже перебор.

Антипример • Азбука Вкуса

Без изменения местоположения

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

Антипример • МегаМаркет

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

33 гайдлайна

Реализована

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

Антипример • М.Видео

В полноэкранном формате

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

Антипример • Столплит

Персонализирована, если есть данные

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

Пример • Ozon

Без ложной персонализации

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

Антипример • Hoff

Замена рекомендаций

Некоторые компании в блоке рекомендаций как бы просят дать им второй шанс, предлагая обновить их, если они не попали в цель. Как вам такое? Напишите в комментах.

Пример • Alibaba

Содержит популярные товары

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

Пример • Sunlight

Содержит категории товаров

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

Пример • FlowWow

Содержит популярные запросы

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

Пример • МегаМаркет

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

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

Пример • Auto.ru

Содержит рекомендуемые бренды

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

Пример • Lamoda

Содержит каталог

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

Пример • Магнит

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

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

Пример • FlowWow

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

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

Пример • Lichi

Содержит фильтры по категориям

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

Пример • ЦУМ

Содержит фильтры по типу контента

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

Пример • iHerb

Комбинированная подсказка

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

Пример • Спортмастер

В формате списка

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

Пример • Lamoda

В формате бабблов

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

Пример • AliExpress

В формате листинга

Рекомендуемые товары часто отображают в виде листинга с вертикальным скроллом, чаще всего по 2-3 товара в ряд.

Пример • Ozon

В формате карусели

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

Пример • Sunlight

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

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

Антипример • Leroy Merlin

Контент не дублируется

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

Антипример • Zarina

Контент понятен

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

Антипример • Sela

Подсказка визуально не перегружена

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

Антипример • Почта России

Highlight вариантов подсказки

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

Пример • Shein

Highlight понятен

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

Антипример • 12 Storeez

Визуализация категорий

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

Пример • FlowWow

Визуализация корректна

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

Антипример • Светофор

Неограниченное число товаров

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

Пример • Ozon

Ограничение по числу товаров

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

Пример • Маркет Деливери

Переход к расширенному списку

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

Пример • Lady & Gentleman City

Highlight возможности скролла

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

Пример • ВкусВилл

Placeholder вместо подсказки?

Некоторые компании вместо подсказки размещают своего рода placeholder. Как считаете, что лучше: подсказка по умолчанию или то, что в примере? Напишите в комментах.

Пример • US Mall

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

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

11 гайдлайнов

Поиск по вхождению ключевого слова

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

Пример • Farfetch

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

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

Пример • Спортмастер

Ввод на другом языке

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

Пример • Лента

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

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

Пример • Ситилинк

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

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

Пример • Auto.ru

Поиск с учетом связей

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

Пример • ЦУМ

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

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

Пример • МегаМаркет

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

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

Пример • еАптека

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

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

Пример • Ситилинк

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

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

Антипример • Lamoda

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

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

Пример • Технопарк

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

41 гайдлайн

Реагирует на текстовый ввод

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

Антипример • Befree

Срабатывает быстро

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

Антипример • Золото 585

Индикация ожидания

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

Антипример • Rendez-Vous

Задержка при вводе слова

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

Антипример • Zolla

Расположена на переднем плане

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

Антипример • Gipfel

Контент релевантен

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

Антипример • Flor2u

Сортировка по релевантности

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

Антипример • Снежная Королева

Комплексная

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

Пример • Спортмастер

Разнотипный контент не смешан

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

Антипример • Иль де Боте

Подсказки не конкурируют друг с другом

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

Антипример • Gloria Jeans

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

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

Антипример • Снежная Королева

Структурирование за счет иконок

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

Пример • Ozon

Структурирование за счет подписей

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

Пример • Wildberries

Структурирование за счет заголовков

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

Пример • Технопарк

Структурирование за счет вкладок

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

Пример • Shop

Highlight брендов логотипами

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

Пример • Дром Авто

Переключение между вкладками

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

Пример • Shop

Уровень категорий в подсказке

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

Пример • Kari

Highlight числа товаров в категориях

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

Пример • 585 Золотой

Иерархия категорий в подписях

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

Антипример • Zarina

Подписи видны полностью

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

Антипример • МегаМаркет

Highlight общего числа результатов

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

Пример • Kari

Текст в общем числе товаров согласован

При использовании индикатора с количеством товаров не забудьте, подстраивать текст под число: «товаров», «товар», «товара».

Антипример • Магнит

Быстрое добавление товаров

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

Пример • Лента

Введенный текст выделен

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

Пример • Farfetch

Выделение текста хорошо заметно

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

Антипример • Leroy Merlin

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

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

Пример • Lamoda

Регистр ввода vs. подсказок

Лучше не менять регистр текста при вводе и унифицировать его с регистром подсказок. В примере регистр при вводе изменяется на верхний и отличается от подсказок.

Пример • Pull & Bear

Без выделения последнего символа

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

Пример • Alibaba

Текст подсказок вписывается в экран

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

Антипример • Metro

Текст подсказок без ошибок

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

Антипример • Zenden

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

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

Антипример • FlowWow

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

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

Антипример • 585 Золотой

Уточняющие подсказки

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

Пример • Hoff

Прокрутка подсказки

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

Антипример • Холодильник.ру

Без прокрутки, если она не требуется

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

Антипример • Visage Hall

Размер контента vs. ScrollView

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

Антипример • Gipfel

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

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

Пример • Золотое Яблоко

Фиксация заголовка блока при скролле

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

Пример • Shop

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

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

Пример • Золотое Яблоко

Ручное скрытие клавиатуры

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

Пример • Эльдорадо

История поиска

20 гайдлайнов

Предусмотрена

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

Пример • Рив Гош

Не видна, если не было запросов

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

Антипример • LiveMaster

Без placeholder'а с констатацией факта

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

Антипример • Столплит

Placeholder с призывом к действию

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

Пример • La Redoute

Обособлена от вариантов подсказки

Историю запросов пользователя лучше обособить и не сливать вместе с вариантами подсказки.

Антипример • Leroy Merlin

Выведена в отдельную вкладку

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

Пример • eBay

Блок озаглавлен

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

Пример • Эльдорадо

В формате списка

Чаще всего историю запросов реализуют в формате вертикального списка.

Пример • Яндекс.Маркет

В формате бабблов

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

Пример • FlowWow

Поиск vs. просмотры

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

Пример • ЦУМ

Сортировка по хронологии

Запросы в истории поиска лучше отсортировать по давности: от самого свежего к более старым.

Пример • СберМаркет

Ограничение числа запросов

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

Пример • МегаМаркет

Запросы сопровождаются иконками

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

Пример • Ozon

Очистка одного запроса

Некоторые запросы в истории могут стать неактуальными или пользователь может захотеть удалить что-то по причинам приватности. Дайте ему эту возможность.

Антипример • ВсеИнструменты

Очистка всех запросов

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

Пример • Ситилинк

Активная область кнопок очистки

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

Антипример • Gipfel

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

Как и в случае с очисткой запроса в строке поиска, если запросов нет, кнопка очистки в истории поиска также не нужна.

Антипример • Мираторг

Кнопки очистки истории vs. запроса

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

Пример • МегаМаркет

История пропадает при вводе

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

Пример • СберМаркет

История видна, если содержит текущий запрос

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

Пример • Рив Гош

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

13 гайдлайнов

Без пустого экрана

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

Антипример • Ozon

Без предложения запустить поиск

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

Антипример • Детский Мир

Без варианта с некорректным запросом

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

Антипример • Все Инструменты

Без нерелевантных подсказок

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

Антипример • Лента

Констатация факта

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

Пример • Спортмастер

Предложение изменить запрос

Помимо констатации факта, желательно также направить пользователя нужным путем. Первый вариант – предложить ему изменить свой запрос.

Пример • Магнит

Кнопка очистки запроса

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

Пример • Auto.ru

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

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

Пример • Kaspi.kz

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

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

Пример • Спортмастер

Кнопка перехода к каталогу

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

Пример • Sunlight

Предложение популярных товаров

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

Пример • Золотое Яблоко

Подборка популярных товаров

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

Антипример • Золотое Яблоко

Визуализация

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

Пример • Auto.ru

Очистка запроса

4 гайдлайна

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

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

Пример • Пятёрочка

Кнопка не видна, если поле пустое

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

Антипример • Рив Гош

Кнопка привычна

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

Пример • СберМаркет

Строка активна при нажатии

При тапе по кнопке очистки запроса основное намерение – это ввести новый запрос. Поэтому строку поиска не стоит деактивировать: так пользователь сразу сможет начать ввод.

Пример • LC Waikiki

Отмена поиска

11 гайдлайнов

Кнопка отмены предусмотрена

Предусмотрите возможность отменить ввод текста в строку поиска.

Пример • Ozon

Появляется при активации строки

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

Пример • Сантехника-Онлайн

Видна при скролле подсказки

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

Пример • Маркет Деливери

Кнопки отмены vs. очистки

Сделайте кнопку отмены визуально отличной от кнопки очистки. Если за очистку чаще всего отвечает «крестик», кнопку отмены можно выполнить в текстовом формате.

Пример • Додо Пицца

Расположена справа от строки

Часто кнопку отмены в текстовом формате размещают в правом верхнем углу экрана, справа от строки поиска.

Пример • Lamoda

Расположена слева от строки

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

Пример • ВкусВилл

Отмена – не только деактивация строки

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

Антипример • ЛеМуррр

Отмена – не возврат назад

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

Антипример • Kuchenland

Закрытие через смахивание

Если экран поиска расположен в navigation controller'е, помимо нажатия на кнопку, также реализуйте возможность закрыть его через боковое смахивание (edge swipe).

Пример • Яндекс.Маркет

Анимация закрытия

Деактивацию строки поиска можно анимировать, делая реакцию интерфейса на действия пользователя более плавной.

Пример • Lamoda

Верстка при закрытии корректна

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

Антипример • Mango

Переход к результатам поиска

9 гайдлайнов

Использование кнопки return

Предусмотрите запуск поиска нажатием на кнопку return на экранной клавиатуре.

Пример • МегаМаркет

Текст кнопки return релевантен

Текст кнопки return на iOS можно менять. Для поиска как раз есть подходящее значение: «Найти» / «Search».

Пример • Ozon

Кнопка return неактивна, если поле пустое

Если клиент еще ничего не ввел, кнопку return можно делать неактивной: искать все равно будет нечего.

Пример • Lamoda

Кнопка над клавиатурой?

В некоторых приложениях кнопку поиска также размещают над клавиатурой. Что думаете по этому поводу? Полезный элемент или ненужное дублирование кнопки return?

Пример • Эльдорадо

Размер кнопки

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

Пример • Детский Мир

Без кнопки рядом со строкой

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

Антипример • OBI

Подсказка реагирует на тап

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

Пример • Lamoda

Релевантность целевых листингов

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

Антипример • Metro

Динамическое обновление результатов

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

Пример • ВкусВилл

Альтернативы строке поиска

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

Голосовой поиск

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

Пример • СберМаркет

Поиск по фото

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

Пример • ЦУМ

Сканирование штрихкодов

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

Пример • ВкусВилл

Индексация категорий в Siri

Некоторые выходят за рамки приложения и позволяют искать товары в строке поиска iPhone за счет индексации каталога в Siri. Думаю, используется это редко. Но сама тема крутая.

Пример • OLX.kz

To be continued...

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

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

Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую русскоязычную базу знаний по UX/UI в e-commerce.

Подпишитесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!

Благодарность

Благодарю за дополнение статьи идеями хорошего исполнения и антипримерами. Вместе мы делаем контент еще лучше и полезнее.

Надежда Литвинец, UX/UI дизайнер, EPAM
Валентин Лукомский, Product Manager, автор канала Rollin' Days

Все статьи по e-commerce