Содержание
Нет времени читать исследование полностью?
Скачай краткую презентацию «Хороший UX в приложениях по доставке продуктов» и смотри рекомендации, которым должен отвечать качественный продукт
Сегодня население планеты уже привыкло к статусу «пандемия» и по достоинству оценило преимущества дистанционного шопинга: никаких очередей и импульсивных покупок, экономия времени и соблюдение социальной дистанции. При этом выросли требования, предъявляемые к интерфейсам. Пользователи стали проводить больше времени в приложениях, а значит, качество онлайн-продуктов должно соответствовать критериям удобства. Мы задались целью сравнить процесс покупки и доставки продуктов стандартной потребительской корзины, чтобы узнать, как разные компании справляются с этой задачей.
Оценить качество доставки и продуктов согласилась наша коллега из столицы Таня. А интерфейсы мы изучали из нашего офиса в Тамбове.
Цель исследования
Сравнить процесс покупки и доставки стандартной потребительской корзины в популярных приложениях.
Объекты исследования
Для анализа выбрали пять мобильных приложений от популярных продуктовых брендов: «Лента», «ВкусВилл», «Азбука вкуса», «Пятёрочка» и «Перекрёсток». Несмотря на то, что последние два магазина относятся к одному бренду X5, приложения у них разные.
Условия исследования
На старте исследования мы составили список продуктов, основываясь на потребительской корзине. В список вошли: хлеб, кондитерские изделия, мясо/рыба, молоко, замороженный продукт, что-то из собственного кулинарного производства, а также обязательно весовые продукты — овощи и фрукты, потому что цена на такие категории не закреплена за штуками и может меняться в зависимости от веса, т. е. итоговая стоимость в большинстве случаев будет точно известна только после сбора товара, а приложениям нужно указать стоимость до формирования заказа. Поэтому важно рассмотреть, как компании продают весовые товары и как считают их стоимость.
Так как исследование получилось очень объёмным, мы разбили его на две части. В первой (которую вы читаете сейчас) сравнительный анализ интерфейсов приложений, во второй — UX процесса покупки товаров.
Примечание
Анализ проводился в сентябре 2021 года. Ребята, работающие в продуктах, не сидят без дела, поэтому некоторые факты о приложении будут устаревшими. Тем не менее на чужих ошибках, даже исправленных, учатся. Поэтому мы не стали ничего переписывать. Все же наша цель не указывать на недостатки приложений, а показать в совокупности хорошие и не очень паттерны проектирования взаимодействия с пользователем.
Загрузка приложения
Первое, с чем мы столкнулись, — количество приложений под одну задачу у разных компаний.
Прочитав описание у приложений, мы поняли, какое решит нашу задачу, но разнообразие и одинаковый функционал вводит в заблуждение. Особенно сложно было с приложением «Перекрёсток» — нам даже пришлось обратиться в службу поддержки, которая разъяснила разницу:
Таким образом, искусственно были созданы препятствия для пользователя еще до того, как он начал пользоваться продуктом.
Комментарий Everest
Как говорил Стив Круг, «не заставляй пользователя думать или сомневаться в своих действиях». Путь должен быть простым и понятным. Особенно когда он только начинается и у пользователя еще не сформировалась привычка и любовь к продукту.
Онбординг
Первым в приложении встречает пользователя онбординг. Если кратко, онбординг — это обучение основным функциям и привлечение внимания к наиболее важному функционалу. Пользователи должны видеть ценность продукта с первых шагов своего пути — второго шанса рассказать о себе у приложения не будет.
Нам встретилось несколько способов познакомить пользователя с продуктом:
| «Азбука вкуса» | «ВкусВилл» | «Лента» | «Пятёрочка» | «Перекрёсток» |
|---|---|---|---|---|
| Карусель экранов | Видео | Нет онбординга | Формат сторис | Формат сторис |
Основной посыл всех онбордингов — рассказать о своей доставке, но есть и различия:
У приложения «Ленты» нет онбординга, но есть другая полезная вещь — запрос разрешения на отправку уведомлений или доступа к данным. Приложение показывает нестандартные алерты, а стилизованные под приложения окна, которые подробно объясняют, что хочет приложение и почему это хорошо для пользователя.
Комментарий Everest
Старайтесь сделать онбординг максимально полезным для пользователя — расскажите о важных условиях использования приложения, о его ключевом функционале, объясните, почему именно вас должны выбрать и доверить вам свои данные. Сформируйте желание пользоваться продуктом, подтолкните попробовать сделать заказ, например, подарив скидку на первую покупку, — пусть это будет первый шаг к формированию привычки. И давайте пользователям возможность пропустить онбординг и/или вернуться к нему позже, тем самым предоставляя свободу выбора.
Первый экран
Первый экран встречает пользователя каждый раз при входе в приложение, а значит, к выбору того, что будет видеть пользователь, нужно подойти с особым вниманием. В данном случае важно понимать две вещи:
- Контекст приложения, его позиционирование, способы выделиться.
- Не упускать из виду то, что приложение по доставке продуктов — в первую очередь инструмент для выполнения задачи.
Посмотрим, как приложения решают эти задачи.
Позиционирование компании
Позиционирование компании достаточно сильно влияет на вид и функционал приложений. В зависимости от того, на что компания делает упор, могут добавляться:
— профессиональные фото и видео,
— специальные функции (групповой поиск у «Ленты»),
— необычные фильтры («без белого сахара», «вегетарианцам» в приложении «ВкусВилла»).
Могут меняться экраны-заставки под конкретного пользователя или под время дня, применяться разные акценты. Всё это помогает пользователю сильнее ощущать направленность бренда и выбирать компанию, отвечающую своим ценностям.
Длина экрана
Самую важную информацию компании, конечно, выносят наверх. Как правило, это адрес доставки, от которого зависят ассортимент, время и область доставки.
| «Азбука вкуса» | «ВкусВилл» | «Лента» | «Пятёрочка» | «Перекрёсток» | |
|---|---|---|---|---|---|
| Количество инфоблоков |
11 | 11 | 9 | 3 | 5 |
| Количество экранов |
5 | 2,5* | 2,5 | 2 | 2 |
*«ВкусВилл» использует такое же количество блоков, как и «Азбука Вкуса» (11 шт.), но занимает в разы
меньше места, что делает скролл короче, а доступность к информации выше.
Название главного экрана
| «Азбука вкуса» | «ВкусВилл» | «Лента» | «Пятёрочка» | «Перекрёсток» |
|---|---|---|---|---|
| Название заменяет иконка домика | Моя карта | Главная | Нет названия, сразу каталог | Магазин* |
*Название «Магазин» может вызывать ассоциации с ассортиментом, а не с набором персональных предложений.
Комментарий Everest
В интерфейсах важно, чтобы наименования объектов одинаково понимали все пользователи. Поэтому названия должны быть максимально понятны, быть из активного словесного запаса и явно называть то, к чему относятся. Чем ближе образ к действительности, тем меньше когнитивная нагрузка на пользователя.
Фокус внимания
| «Азбука вкуса» | «ВкусВилл» | «Лента» | «Пятёрочка» | «Перекрёсток» |
|---|---|---|---|---|
| Карусели о бренде или подборки по темам* Блоки «Вкусная цена», «Популярные категории» |
Персонализация покупок | Подборки с выгодными ценами, популярными товарами | Ориентирован исключительно на доставку** | Карта лояльности — замена пластиковым картам*** «Персональные предложения» |
* Так, в одной карусели может быть ссылка и на советы по засолке рыбы, и на тематическую подборку товаров к ближайшему празднику.
** На первом экране пользователь видит каталог — поиск сразу бросается в глаза, а категории в два ряда быстро и удобно считываются.
*** Таким образом компания продолжает путь экологичного потребления и предлагает заменить пластиковые карты электронными.
** На первом экране пользователь видит каталог — поиск сразу бросается в глаза, а категории в два ряда быстро и удобно считываются.
*** Таким образом компания продолжает путь экологичного потребления и предлагает заменить пластиковые карты электронными.
Комментарий Everest
Желание показать все сразу на одном экране повышает когнитивную нагрузку пользователя. Мы рекомендуем давать информацию порционно — сначала самое необходимое, а затем, по мере уменьшения значимости, располагать остальную информацию. Так пользователю будет проще ориентироваться и достигать своих целей, а маркетологам — собирать и анализировать статистику.
Переход в каталог
У всех приложений, в которых присутствует таббар, есть вкладка «Каталог», по которому можно перейти к продукту. Но сначала рассмотрим возможности посмотреть товары, пользуясь только первым экраном. Зачастую на главном экране компании располагают кнопку каталога, но есть различия в местах, где её размещают:
| «Азбука вкуса» | «ВкусВилл» и «Перекрёсток» |
«Лента» | «Пятёрочка» |
|---|---|---|---|
| В самом конце экрана | На первом экране* | Не дублирует кнопку | Весь первый экран как каталог** |
*«Вкусвилл» и «Перекресток» назвали кнопку каталога «Доставка» и «Доставка продуктов на дом».
**Пятёрочка — единственное приложение, заточенное под одну конкретную задачу, заказать товар
**Пятёрочка — единственное приложение, заточенное под одну конкретную задачу, заказать товар
Комментарий Everest
Если в приложении присутствует дублирование функционала, то название везде должно быть одинаковым, чтобы не вводить пользователя в заблуждение.
Адрес доставки
Адрес — одна из ключевых составляющих доставки. От него зависит ассортимент, цена, площадь покрытия, время — все, что важно для пользователя, когда он делает заказ. О важности данной информации в своем онбординге говорят «Азбука вкуса» и «Пятёрочка».
Комментарий Everest
Пользователю нужно говорить об ограничениях, которые у него есть, как можно раньше. Вовремя показанная информация повышает шанс на лояльность пользователя и успех в выполнении его задачи.
Геолокация
Хорошие примеры UX в приложениях повышают планку: теперь пользователь ждет не только, что приложение предугадает его желания и предложит варианты, но и возьмет на себя всю рутину — предзаполнит поля, определит адрес.
Все приложения запрашивают разрешение на доступ к геолокации, но у каждой компании свои особенности. Если пользователь не согласился на автоматическое определение своего адреса, то приложение должно позаботиться о том, чтобы адрес был выбран до того, как будет наполнена корзина.
Комментарий Everest
Пользователю нужно говорить об ограничениях как можно раньше. Тем не менее любая информация должна появляться вовремя — адрес доставки не влияет на возможность просматривать каталог товаров, но очень важен при добавлении товара в корзину, так как влияет на доступный ассортимент.
Область доставки
Предположим, пользователь хочет сам найти себя на карте. В теории поставить метку можно куда угодно, но на практике область доставки имеет ограничения.
Комментарий Everest
Ограничивая пользователя, мы показываем ему доступные пути к цели, заведомо убирая возможность попасть в тупик и расстроиться. Пользователь, решивший свою задачу, — довольный пользователь.
Адрес не входит в зону доставки
Комментарий Everest
Есть альтернативный путь решения задачи — предлагай. Нет таких — постарайся выжать максимум из тупикового сценария, чтобы расстаться на позитивной ноте.
Доставка на несколько адресов
Стоимость доставки
Стоимость доставки может зависеть от разных показателей:
- Город и конкретный адрес («Азбука вкуса»). В таких приложениях пользователь должен видеть, как меняется стоимость в зависимости от установленной на карте точки.
- Загруженность сервиса или условия доставки («ВкусВилл», «Перекрёсток», «Лента»).
- Стоимости корзины («Азбука вкуса», «Лента»). На этапе корзины можно показать, как сделать доставку возможной или намного дешевле.
- Фиксированная стоимость («Пятёрочка»).
Комментарий Everest
От чего бы ни зависела стоимость доставки, стоит говорить о ней и ее условиях в самом начале, т. к. дорогая доставка может стать причиной бросить корзину, уйти к конкурентам и не вернуться.
Смена адреса в процессе выбора товара
Все приложения уведомляют пользователя, что новый адрес отразится на доступном ассортименте и стоимости доставки.
Комментарий Everest
Взаимодействие с приложением — своего рода разговор с другом. Ты говоришь ему: «Хочу доставку на ул. Лесную», а он отвечает: «Да, на ул. Лесную доставим, без проблем». А если ваш друг начнет игнорировать ваши слова, как вы будете себя чувствовать? Уверены, это не приятно. Так не стоит и интерфейсы делать неприятными собеседниками.
Забежим вперед и покажем еще один пример хорошего и не очень разговора с приложением. Так, при вводе промокода приложения по-разному сообщают о результате его работы. «Перекрёсток» обходится общими фразами — «промокод подошел / не подошел». А «Лента» в свою очередь дает пользователю всю нужную ему информацию: подошел ли промокод, какие у него условия, какую выгоду можно получить. И все на одном экране.
Авторизация / Регистрация
Авторизация и регистрация на любом из сервисов в первую очередь нужна самому сервису, а не пользователю. Поэтому, если этот шаг никак не влияет на решение задачи, его можно отложить до критической надобности.
Как работают с авторизацией проанализированные приложения:
В последнее время существует тенденция, при которой компании не принуждают пользователя регистрироваться в сервисах, но при вводе номера телефона автоматически создают личный кабинет. Это достаточно удобно и юзерфрендли, так как всё привязано к номеру телефона, который у пользователя всегда с собой.
Когда мы заказывали товары в «Азбуке вкуса», увидели интересный способ регистрации: это были не форма с полями, а чатик, в котором спросили наши имя и возраст. Мы не заполняли поля, мы общались.
Заключение
Приложения из сферы услуг должны делать жизнь пользователя проще и комфортнее. Чтобы вытеснить конкурентов из смартфона клиента, недостаточно ставить низкие цены и делать акции — пользователь должен получать удовольствие от процесса работы с приложением, чувствовать заботу в каждом экране, в каждой иконке, в каждом слове. Поэтому так важно обращать внимание на UX ваших продуктов.
Вторую часть исследования читайте по ссылке.
![[Команда Everest] Интервью с Димой, директором по развитию.](/upload/iblock/bab/bab6a351fc92b759b80aaa248ada8083.png)