{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}

6 фич навигации, которые помогут продавать больше в e-commerce-приложении

В предыдущей статье мы разобрали карточку товара, как главный элемент e-commerce-приложения. Сегодня остановимся на элементах навигации. В этой категории разберём все составляющие приложения, которые помогают пользователю быстро перемещаться по нему: поиск товаров, фильтры, каталог. В конечном итоге, они ведут пользователя к оформлению заказа — цели любого e-commerce-приложения.

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

Мы в Surf более 10 лет создаём e-commerce приложения. Среди наших клиентов — Магнит, Лабиринт, Рив Гош и многие другие.

💼 Рассказываем об этом в наших кейсах.

✅ Подписывайтесь на наш блог на VC: пишем про тренды и технологии мобильной разработки.

О чём в этой статье

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

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

Количество проданных умных колонок и прогноз дальнейших продаж. График сделан в марте 2021 года just-ai.com

Существенный недостаток колонки в том, что она даёт пользователю только устный ответ и не может дать визуал. А приложение на телефоне — может. Поэтому голосовой помощник может стать удобной надстройкой в e-commerce-приложении.

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

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

Запрос в приложении «Бетховена» вводится через встроенный голосовой помощник Google

В концепции приложения для KFC голосовой поиск мы предложили сделать одной из запоминающихся фишек — помощник должен был говорить голосом полковника Сандерса. Он помогает сделать заказ, перейти в нужную категорию меню, найти актуальные акции. А ещё виртуальный полковник Сандерс предлагает блюда из нового меню, анализируя предыдущие заказы. Такой помощник передаёт индивидуальность бренда, делает приложение непохожим на другие.

2. Визуальный поиск

Ещё одна фича, подсмотренная у поисковых систем — поиск по фото.

Визуальный поиск появился в Google в 2011 году. Технология, основанная на обучении нейросетей, за 10 лет значительно продвинулась вперёд и широко используется для маркетинговых целей. В частности, визуальный поиск может помочь покупателю найти в магазине «что-то, похожее на это» или «точно такое же, но не знаю, как называется».

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

Для книжного магазина «Лабиринт» Surf реализовал поиск книги по фото. Когда пользователь видит интересное издание на полке у друга, он может сфотографировать обложку через приложение «Лабиринта». Если такая книга есть в магазине, приложение сразу покажет карточку товара.

Так работает поиск по обложке в приложении «Лабиринта»

3. Видеопревью в каталоге

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

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

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

Листая первую страницу в приложении Sunlight, можно увидеть крупные видеопревью украшений

4. Удобные фильтры

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

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

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

5. Быстрый переход к оформлению заказа

Цель любого e-commerce-приложения — привести пользователя к покупке. Поэтому самый важный момент в проектировании приложения — выстроить оптимальное флоу оформления заказа. С момента, как пользователь положил товар в корзину, до оплаты он должен совершить минимум действий.

Как это работает

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

Пример быстрого оформления заказа есть и в омниканальных инструментах. Пример — приложение «Экспресс-Скан», которое работает в сети магазинов «Перекресток» и «Пятерочка». Покупатель сканирует штрих-коды выбранных товаров, проходясь по магазину. Товары попадают в виртуальную корзину, а на выходе покупатель сканирует QR-код торговой точки и оплачивает покупки через мобильный. Подробно о системе Scan&Go мы рассказывали в этой статье.

6. Разнообразие вариантов оплаты и доставки

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

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

Как это работает. В приложении магазина «Рив Гош» мы реализовали возможность получить заказ тремя способами: курьерская доставка, постамат или самовывоз из магазина. Оплатить покупки можно одним из трех способов: помимо оплаты наличными и картой, покупатель может воспользоваться подарочной картой.

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

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

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

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

— видео в каталоге, детально показывающее товар;

— фильтр в один экран, где пользователь не листает длинную ленту с десятками параметров и значений;

— корзина с суммой отложенных в ней товаров, которую видно с любой страницы приложения;

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

0
Комментарии
-3 комментариев
Раскрывать всегда