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

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

50 идей по улучшению пользовательского опыта

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

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

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

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

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

Автор hardclient.com

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

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

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

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

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

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

CAPS vs. Sentence case

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

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

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

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

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

Текст placehoder'а

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

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

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

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

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

Пример • O'STIN

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подсказки iOS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск по фото

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

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

Пример • Stockmann

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

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

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

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

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

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

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

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

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

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

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

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

Пример • ЦУМ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

To be continued...

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

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

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