15 Апреля 2022
Назад в блог

UX приложений по доставке продуктов: часть 1

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

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

Сегодня население планеты уже привыкло к статусу «пандемия» и по достоинству оценило преимущества дистанционного шопинга: никаких очередей и импульсивных покупок, экономия времени и соблюдение социальной дистанции. При этом выросли требования, предъявляемые к интерфейсам. Пользователи стали проводить больше времени в приложениях, а значит, качество онлайн-продуктов должно соответствовать критериям удобства. Мы задались целью сравнить процесс покупки и доставки продуктов стандартной потребительской корзины, чтобы узнать, как разные компании справляются с этой задачей.

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

Цель исследования

Сравнить процесс покупки и доставки стандартной потребительской корзины в популярных приложениях.

Объекты исследования

Для анализа выбрали пять мобильных приложений от популярных продуктовых брендов: «Лента», «ВкусВилл», «Азбука вкуса», «Пятёрочка» и «Перекрёсток». Несмотря на то, что последние два магазина относятся к одному бренду X5, приложения у них разные.

Условия исследования

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

Так как исследование получилось очень объёмным, мы разбили его на две части. В первой (которую вы читаете сейчас) сравнительный анализ интерфейсов приложений, во второй — UX процесса покупки товаров.

Примечание

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

Загрузка приложения

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

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

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

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

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

Онбординг

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

Нам встретилось несколько способов познакомить пользователя с продуктом:

«Азбука вкуса» «ВкусВилл» «Лента» «Пятёрочка» «Перекрёсток»
Карусель экранов Видео Нет онбординга Формат сторис Формат сторис

Основной посыл всех онбордингов — рассказать о своей доставке, но есть и различия:

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

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

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

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

Первый экран

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

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

Посмотрим, как приложения решают эти задачи.

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

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

— профессиональные фото и видео,

— специальные функции (групповой поиск у «Ленты»),

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

Могут меняться экраны-заставки под конкретного пользователя или под время дня, применяться разные акценты. Всё это помогает пользователю сильнее ощущать направленность бренда и выбирать компанию, отвечающую своим ценностям.

Длина экрана

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

«Азбука вкуса» «ВкусВилл» «Лента» «Пятёрочка» «Перекрёсток»
Количество
инфоблоков
11 11 9 3 5
Количество
экранов
5 2,5* 2,5 2 2
*«ВкусВилл» использует такое же количество блоков, как и «Азбука Вкуса» (11 шт.), но занимает в разы меньше места, что делает скролл короче, а доступность к информации выше.
Название главного экрана
«Азбука вкуса» «ВкусВилл» «Лента» «Пятёрочка» «Перекрёсток»
Название заменяет иконка домика Моя карта Главная Нет названия, сразу каталог Магазин*
*Название «Магазин» может вызывать ассоциации с ассортиментом, а не с набором персональных предложений.
Комментарий Everest

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

Фокус внимания
«Азбука вкуса» «ВкусВилл» «Лента» «Пятёрочка» «Перекрёсток»
Карусели о бренде или подборки по темам*

Блоки «Вкусная цена», «Популярные категории»
Персонализация покупок Подборки с выгодными ценами, популярными товарами Ориентирован исключительно на доставку** Карта лояльности — замена пластиковым картам***

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

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

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

У всех приложений, в которых присутствует таббар, есть вкладка «Каталог», по которому можно перейти к продукту. Но сначала рассмотрим возможности посмотреть товары, пользуясь только первым экраном. Зачастую на главном экране компании располагают кнопку каталога, но есть различия в местах, где её размещают:

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

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

Адрес доставки

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

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

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

Геолокация

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

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

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

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

Область доставки

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

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

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

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

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

Доставка на несколько адресов
/
«Азбука вкуса» запоминает введённые адреса, один можно отметить главным
У «ВкусВилла» есть «Адресная книга» на доставку и самовывоз
«Лента» показывает все адреса списком, которые были добавлены пользователем
У «Пятёрочки» и «Перекрёстка» можно менять адреса тегами на экране
Стоимость доставки

Стоимость доставки может зависеть от разных показателей:

  • Город и конкретный адрес («Азбука вкуса»). В таких приложениях пользователь должен видеть, как меняется стоимость в зависимости от установленной на карте точки.
  • Загруженность сервиса или условия доставки («ВкусВилл», «Перекрёсток», «Лента»).
  • Стоимости корзины («Азбука вкуса», «Лента»). На этапе корзины можно показать, как сделать доставку возможной или намного дешевле.
  • Фиксированная стоимость («Пятёрочка»).
Комментарий Everest

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

Смена адреса в процессе выбора товара

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

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

Взаимодействие с приложением — своего рода разговор с другом. Ты говоришь ему: «Хочу доставку на ул. Лесную», а он отвечает: «Да, на ул. Лесную доставим, без проблем». А если ваш друг начнет игнорировать ваши слова, как вы будете себя чувствовать? Уверены, это не приятно. Так не стоит и интерфейсы делать неприятными собеседниками.

Забежим вперед и покажем еще один пример хорошего и не очень разговора с приложением. Так, при вводе промокода приложения по-разному сообщают о результате его работы. «Перекрёсток» обходится общими фразами — «промокод подошел / не подошел». А «Лента» в свою очередь дает пользователю всю нужную ему информацию: подошел ли промокод, какие у него условия, какую выгоду можно получить. И все на одном экране.

Авторизация / Регистрация

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

Как работают с авторизацией проанализированные приложения:

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

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

Когда мы заказывали товары в «Азбуке вкуса», увидели интересный способ регистрации: это были не форма с полями, а чатик, в котором спросили наши имя и возраст. Мы не заполняли поля, мы общались.

Заключение

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

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