Прокачиваем поиск товаров в Kuchenland

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

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

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

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

Автор hardclient.com

Реакция на начало касания

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

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

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

Изменение дизайна

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

CAPS vs. Sentence case

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

Изменение местоположения строки

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

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

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

Текст placehoder'а

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

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

Типы запросов в placehoder'е

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

Например: «Искать товары и категории» или как на скриншоте.

Пример O'STIN
hardclient

Highlight разнообразия placehoder'е

Так как у Kuchenland достаточно широкий ассортимент товаров, этот факт можно подсветить и в placeholder'е: например, «Искать по 20,000 товаров».
hardclient

Динамический placeholder

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

Размер шрифта placeholder'а

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

Прокрутка заголовка

Заголовок «Поиск» по непонятной причине прокручивается внутри своего контейнера. Предположу, что такое поведение интерфейса предусмотрено не было.
hardclient

Подсказка по умолчанию

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

Популярные товары

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

Пример Лавка
hardclient

Популярные запросы

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

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

Категории товаров

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

Пример Самокат
hardclient

Поисковая строка vs. форма ввода

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

Более того, такая плашка, размещенная поверх клавиатуры, будет «отъедать» лишнее место у подсказки (о которой поговорим далее), перекрывая её.
hardclient

Подсказки iOS

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

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

Текст кнопки return

Кнопка return на экранной клавиатуре никак не озаглавлена, хотя её можно сделать более заметной (синий цвет) и привязать текст внутри неё к текущему контексту: «Найти» вместо «Ввод».
hardclient

Активность кнопки return

Когда строка поиска пуста, кнопку return можно сделать неактивной, так как нажатие на неё в данный момент по сути ни к каким результатам не приведёт.
hardclient

Highlight числа товаров по подсказке

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

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

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

Спектр предлагаемых категорий

Некоторые категории – например, «Тарелки» – присутствуют в каталоге. Но если я ввожу их в поиске, они среди предлагаемых категорий не появляются. Почему – не совсем понятно.
hardclient

Выбор категории vs. активация поиска

При вводе названия категории – например «Гостиная» – появляется подсказка этой категории. Однако если вы не нажимаете на неё, а просто активируете поиск, вы получаете нулевые результаты.
hardclient

Пересечение категорий

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

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

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

Отступы между категориями

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

Разные размеры категорий

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

Выравнивание объектов в подсказке

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

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

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

Подсказки по словам-синонимам

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

Формат подсказки

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

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

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

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

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

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

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

Товары в подсказке

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

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

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

Пример Перекрёсток
hardclient

Красный цвет в подсказке

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

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

Поиск по фото

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

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

Пример Stockmann
hardclient

Поиск с помощью ассистента

Также помимо стандартного поиска по товарам с помощью строки можно реализовать и поиск с помощью ассистента под потребности клиента.

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

Пример Лавка
hardclient

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

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

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

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

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

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

История просмотров

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

Пример ЦУМ
hardclient

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

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

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

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

Добавление товаров из листинга

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

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

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

Иллюстрация к нулевым результатам

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

Переход в каталог

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

Кнопка изменения запроса

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

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

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

Выход через свайп

Выйти из поиска можно, нажав на соответствующую кнопку в верхней левой части экрана и с помощью левого edge swipe (свайп по краю экрана).

Эти действия можно дополнить и более удобным обычным свайпом слева направо, который не предполагает, что клиенту придется куда-либо тянуться пальцем. Да и конфликтовать он ни с чем не будет.
hardclient
To be continued...
Как видим, у Kuchenland есть хороший потенциал для того, чтобы сделать поиск более удобным. Но одно дело – наличие недочётов в текущей версии. Другое – гибкость и готовность их устранять. Поэтому ребятам желаю больших успехов на пути внедрения улучшений.

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