22 Июня 2022
Назад в блог

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

Екатерина Цимбота
UX-дизайнер
22 июня 2022 года
Читать 15 мин.
Нет времени читать исследование полностью?

Скачай краткую презентацию «Хороший UX в приложениях по доставке продуктов» и смотри рекомендации, которым должен отвечать качественный продукт

Привет! Я Катя Цимбота, UX-дизайнер Everest. В первой части исследования я рассказывала о функционале приложений по доставке продуктов. Сегодня мы продолжим изучать процесс оформления покупки и рассмотрим этапы от набора корзины до доставки заказа. Также я расскажу об интересных фишках в приложениях, которые помогают расположить к себе пользователя.
Примечание

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

Процесс сбора корзины
Поиск

Один из самых быстрых способов найти товар — использовать поиск (при условии, что он корректно работает). Способы поиска в каталоге:

  • Напечатать текст в специальном поле. Функционал поиска используют все приложения. Обычно система ищет товар после ввода трёх символов либо по нажатию кнопки «Найти». В «Ленте» можно искать сразу несколько товаров.
  • Сказать голосом («Лента»).
  • Отсканировать штрихкод («Лента», «ВкусВилл»).
  • Найти по фото (в данных приложениях нет такой функции, но можно перенять функционал из других сфер, например из приложения книжного магазина «Лабиринт»).
Примечание

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

/
«Лента» — поиск по нескольким словам в текстовой строке, а также по штрихкоду и голосом.
«ВкусВилл» — поиск по слову в текстовой строке и по штрихкоду.
«Азбука вкуса», «Пятёрочка» и «Перекрёсток» — поиск только по словам в текстовой строке.
Комментарий Everest

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

Фильтр

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

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

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

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

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

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

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

/
У «Азбуки Вкуса» есть категория «Продукты с заменителями молока» — здесь у нас трудностей не возникло.
У «ВкусВилла» тоже не встретили сопротивления: категория «Молочные продукты и яйцо» → «Растительные напитки и йогурты».
В «Перекрёстке» искали в категории «Молоко, сыр, яйца», но в итоге нашли карточку растительного молока через поиск, а из неё перешли в подборку «Веган». Позже мы нашли, где искать нужный товар — подкатегория «Растительные напитки и молоко» в категории «Напитки».
У «Ленты» смогли найти молоко, используя поиск, который направил на товар. К сожалению, на карточке товара не было перехода в родительскую категорию, но была подборка «Похожие товары» и через неё вышли на растительное молоко. Сложно, если не знаешь, какое именно молоко хочешь сегодня. Позже нашли подкатегорию «Без лактозы» в разделе «ЭкоМаркет».
«Пятерочка» никак не делит молоко по типам, и все помещает в раздел «Молочные продукты и яйца».

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

Структура каталога

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

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

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

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

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

/
«Азбука вкуса» и «Лента» при добавлении товара в корзину показывают цену на единицу товара, меняется только счётчик.
«ВкусВилл», «Пятёрочка» и «Перекрёсток» при добавлении в корзину товара пересчитывают его стоимость и показывают не только выбранное количество, но и его стоимость.
Комментарий Everest

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

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

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

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

Карточка товара

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

Обезличенность товара

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

Сокращения

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

Отзывы

Оставить свое мнение о товаре могут пользователи «ВкусВилла», «Ленты» и «Перекрёстка».

В карточке «ВкусВилла» можно посмотреть отзывы сразу на несколько производителей.

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

Комментарий Everest

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

Рекомендации по приготовлению

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

Весовой продукт

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

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

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

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

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

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

Замена товара

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

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

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

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

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

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

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

/
«Азбука вкуса» и «Перекрёсток» показывают мини-корзину в каталоге с информацией о количестве добавленных позиций.
«Пятёрочка», «Лента» и «ВкусВилл» показывают мини-корзину в каталоге с информацией о количестве добавленных позиций и их общую стоимость.
Оформление заказа
Время доставки

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

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

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

Оплата

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

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

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

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

Комментарий Everest

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

Сборка и доставка

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

Отслеживание заказа

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

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

Сбор обратной связи

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

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

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

Комментарий Everest

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

Фишки

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

Список покупок

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

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

/
«Лента» — поиск списком и подборка рецептов.
«ВкусВилл» — список покупок.
Персонализация

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

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

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

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

Поддержка

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

  • Форма обратной связи. «Азбука вкуса» использует 9 полей, которые нужно всегда вводить самостоятельно, нет автозагрузки из профиля. Это неудобно, так как заставляет пользователя совершать много действий и тратить время. Более простая форма у «Пятёрочки»: в одно поле можно написать претензию, а все остальные данные, нужные другой стороне, подтянутся из профиля.
  • Чат. Самый быстрый способ доступа. Используют «Лента», «ВкусВилл» и «Перекрёсток». Отметим, что только у «Перекрёстка» есть приветственное слово, которое втягивает в беседу.
  • Звонок. «ВкусВилл» и «Перекрёсток» предлагают связаться с кол-центром посредством звонка: достаточно только нажать на номер телефона. У «Пятёрочки» же менее удобный способ связи, так как нужно самостоятельно скопировать номер телефона, чтобы позвонить в поддержку.
  • Список часто задаваемых вопросов используют все приложения. Эти списки закрывают самые частые вопросы — стоимость доставки, время заказа и др. Отметим «ВкусВилл», который уточняет у пользователя, решился ли его вопрос, и если нет, то предлагает помощь в других каналах связи.
  • Почту и ссылки на соцсети использует только «ВкусВилл».
/
Форма обратной связи у «Азбуки вкуса» и «Пятёрочки».
Чат используют «Лента», «ВкусВилл» и «Перекрёсток».
Звонок используют «ВкусВилл», «Перекрёсток» и «Пятёрочка».
Список часто задаваемых вопросов используют все приложения.
Почту и ссылки на соцсети использует только «ВкусВилл».
Заключение

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

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

Контакты
Пишите
Звоните
Москва
Пресненская набережная, 8с1, башня «Москва», 58 этаж, офис 581
Тамбов
ул. Максима Горького, д. 17/129, этаж 12