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

Екатерина Цимбота

UX-дизайнер

22 июня 2022 года

Читать 15 мин.

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

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

/

«Лента» — поиск по нескольким словам в текстовой строке, а также по штрихкоду и голосом.

«ВкусВилл» — поиск по слову в текстовой строке и по штрихкоду.

«Азбука вкуса», «Пятёрочка» и «Перекрёсток» — поиск только по словам в текстовой строке.

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

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

/

«Перекрёсток» умеет фильтровать молоко по жирности, йогурты и сырки по вкусу, овощи и фрукты по фасовке (упаковка или весовой).

«Азбука вкуса» и «Лента» найдут товар нужной жирности.

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

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

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

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

/

У «Азбуки Вкуса» есть категория «Продукты с заменителями молока» — здесь у нас трудностей не возникло.

У «ВкусВилла» тоже не встретили сопротивления: категория «Молочные продукты и яйцо» → «Растительные напитки и йогурты».

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

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

«Пятерочка» никак не делит молоко по типам, и все помещает в раздел «Молочные продукты и яйца».

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

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

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

/

«Азбука вкуса» — категории представлены вертикальными вкладками, в них виден список подкатегорий. Внутри подкатегории есть свои группы, которые реализованы как вкладки. Работа с каталогом происходит в рамках одного экрана.

«Лента» — каталог устроен так, что с листинга товаров можно опуститься на уровень вниз по иерархии каталога или подняться на уровень вверх, не уходя на другие экраны.

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

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

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

/

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

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

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

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

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

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

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

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

Сокращения

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

Отзывы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/

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

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

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

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

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

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

/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/

«Лента» — поиск списком и подборка рецептов.

«ВкусВилл» — список покупок.

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

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

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

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

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

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

/

Форма обратной связи у «Азбуки вкуса» и «Пятёрочки».

Чат используют «Лента», «ВкусВилл» и «Перекрёсток».

Звонок используют «ВкусВилл», «Перекрёсток» и «Пятёрочка».

Список часто задаваемых вопросов используют все приложения.

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

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

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