UX приложений
по доставке продуктов.
Часть 2 — UX процесса
покупки

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

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

У разных групп покупателя свой сценарий поиска. Возьмем, к примеру, молоко. Его ищут по разным признакам: бренду, стране производства, проценту жирности, сырью (например, овсяное молоко). Достаточно много магазинов не прорабатывают у себя специфические сценарии пользовательского выбора. И их клиенты до сих пор ищут «молоко с жирностью 2,5 %», перелистывая подряд все карточки с молоком. В нашей выборке оказались приложения с удобными фильтрами:

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

• Экология. «Пятёрочка» и «Перекрёсток» предлагают фильтр «Тип упаковки». Также эти магазины переходят при доставке на электронные чеки.
• Веганство/вегетарианство. «ВкусВилл» может показать товары только для вегетарианцев.
• Здоровье. «Лента» может фильтровать товары для людей с проблемами пищеварения (содержание глютена, непереносимость лактозы). «Азбука вкуса» пока еще не умеет фильтровать по аллергенам, но единственная добавила в карточку товара этот пункт.

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

Мы провели маленькое исследование: наш UX-дизайнер Таня очень любит растительное молоко, и его непросто найти в каталоге. Но мы попробовали, и вот что у нас вышло.

Вот так по-разному решили одну задачу проектировщики приложений.

Каталог — базовая вещь в магазине. Именно с ним пользователь взаимодействует больше всего.

По типу реализации структуры каталога выделяются приложения «Азбука вкуса», «Лента» и «Пятёрочка».

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

В целом мини-карточки приложений +/– похожи визуально и по наполнению, но отличаются функционалом. В анализируемых приложениях произошло разделение на 2 лагеря:

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

Основные данные в мини-карточке:

• фото товара;
• название;
• цена за штуку.

При таком списке возникает проблема — как различать один товар с разным весом (например, молоко 1 л или 2 л в бутылке)? Приложения помещают вес продукта в название, из-за чего при длинном нейминге его не видно. «Лента» решила эту проблему, отображая товары списком (в таком случае для названия появляется больше места). В отдельный элемент выделяет вес только «ВкусВилл».

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

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

Одна из характеристик товара в приложении «Лента» — «ТУ ...». Признак хорошего юзабилити — говорить на языке пользователя, поэтому нужно давать пояснения аббревиатурам или называть их более просто. Например, в нашем случае «ТУ» заменить на «Стандарт производства», как сделано у «Пятёрочки».

Оставить свое мнение о товаре могут пользователи «ВкусВилла», «Ленты» и «Перекрёстка». В карточке «ВкусВилла» можно посмотреть отзывы сразу на несколько производителей. Мы почитали отзывы на продукты и выявили потребность пользователей приложения «Лента» фильтровать отзывы по городу. Интересная гипотеза, которую стоит протестировать.

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

Для готовой продукции «Азбука вкуса» и «Перекрёсток» дают небольшую инструкцию по тому, как правильно подготовить товар к употреблению.

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

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

Приложения комбинируют способы, стараясь подстраиваться под товар. Близок к идеалу вариант «Ленты» — приложение показывает цену за кг, средний вес одной единицы (на шаг при увеличении) и лимит товара.

В основном приложения не показывают карточки товаров, которых нет в наличии. А если показывают, то делают это достаточно элегантно.

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

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

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

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

У «Ленты» и «Азбуки вкуса» есть минимальная сумма заказа для бесплатной доставки. На этапе корзины приложения подсказывают, сколько нужно добавить товара, чтобы воспользоваться этой опцией.

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

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

• дают выбрать окно доставки («Лента»);
• доставляют заказ только за фиксированное время («Азбука вкуса» за 90 минут, «ВкусВилл» в течение двух часов, «Пятёрочка» за один час);
• учитывают два предыдущих сценария, то есть доставляют как можно скорее или в определённое время («Перекрёсток»).

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

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

• «Азбука вкуса» снимает сразу дополнительно 5%, но не пишет, сколько это фактически.
• «Лента» и «ВкусВилл» списывают оплату за продукты после сборки.

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

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

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

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

Отслеживание проходит через статусы — какое-то приложение показывает один обновляемый статус («Лента»), а какие-то целый прогресс-бар («ВкусВилл», «Пятёрочка», «Перёкресток»).

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

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

«Азбука вкуса» спрашивает о процессе заказа через приложение. «ВкусВилл» и «Пятёрочка» спрашивают о сервисе.

В примерах можно увидеть, насколько по-разному можно собирать отзывы: спросить и дать два противоположных ответа. Можно использовать систему NPS и предоставить клиенту большую свободу в выражении своего мнения: поставить звезды или выразить эмоцию с помощью смайликов.

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

Не пройдём мимо интересных фишек внутри приложений.

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

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

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

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

А ещё «ВкусВилл» запоминает, как зовут пользователя, и приветствует его по имени при запуске приложения.

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

В данном вопросе приложения придерживаются таких форм общения:

Форма обратной связи. «Азбука вкуса» использует 9 полей, которые нужно всегда вводить самостоятельно, нет автозагрузки из профиля. Это неудобно, так как заставляет пользователя совершать много действий и тратить время. Более простая форма у «Пятёрочки»: в одно поле можно написать претензию, а все остальные данные, нужные другой стороне, подтянутся из профиля.

Чат. Самый быстрый способ доступа. Используют «Лента», «ВкусВилл» и «Перекрёсток». Отметим, что только у «Перекрёстка» есть приветственное слово, которое втягивает в беседу.

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

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

Почту и ссылки на соцсети использует только «ВкусВилл».

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

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