За последние 5-7 лет рынок сервисов доставки еды значительно вырос. Люди все больше доверяют доставке, перестают ходить в магазины, так как это удобнее и экономит кучу времени. В зависимости от разных критериев, люди отдают предпочтение тем или иным сервисам, а иногда пользуются сразу несколькими для разных целей. Один из таких критериев – это удобство использования.

Я перечитала много статей про анализ сервисов доставки, потому что давно хочу поработать в FoodTech-продуктах, и наконец решилась опубликовать свою первую статью на Хабр. Надеюсь, получилось полезно и информативно :)

Мне захотелось взять несколько сервисов и сравнить их UX. Так как я являюсь не только пользователем большинства этих сервисов, но и UX/UI-дизайнером, у меня получился некий гибридный обзор дизайнера-пользователя и он может быть интересен как обычным пользователям, так и тем, кто проектирует похожие сервисы. Сначала я думала проанализировать  Лавку, Самокат, Сбермаркет, Озон Fresh и Delivery Club , так как они чаще всего вспоминаются, когда мы говорим о сервисах доставки. Но потом решила убрать Delivery Club, так как он в экосистеме Сбера (как Самокат и Сбермаркет), а вместо него взять старичка Утконоса, который на моей памяти был первым сервисом доставки продуктов, о котором я услышала.

Как я тестировала сервисы?

Основные критерии, по которым я сравнивала UX выбранных сервисов:

• Удобство использования каталога продуктов

• Удобство использования поиска

• Удобство считывания информации с карточки товара

• Удобство работы с корзиной

• Восприятие промо-блоков и дополнительных товаров, которые предлагает сервис

• Простота заполнения контактных данных и адреса

• Простота оплаты заказа

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

• наполнить корзину продуктами из разных категорий, которые я покупаю как минимум раз в неделю используя как поиск, так и каталог

• поработать с корзиной, что-то убрать/что-то добавить

• оформить заказ на нужный адрес и оплатить

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

Удобство использования каталога продуктов

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

В Лавке каталог сделан аккуратно, карточки разделов не перегружены, на них присутствует самое необходимое: название и фото. Также есть цветовое кодирование разделов, как часто реализуется в физических продуктовых магазинах и многие пользователи привыкли к следующему цветовому кодированию: мясо - красное, молоко - голубое, крупы, бакалея - желтые, отлично!

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

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

Больше всего вопросов появилось к каталогам  Озона и Утконоса. Каталог Утконоса очень плохо считывается из-за того, что в качестве идентификации разделов продуктов использованы иконки, а не фото. Они плохо различимы, поэтому нам остается только внимательнее вчитываться в текст. При выборе категории предлагается выбрать подкатегорию. Понятная для разработчиков и, возможно, для проектировщиков, иерархическая структура – это, конечно, хорошо, когда мы описываем логику раздела для прототипа. Но в ментальной модели пользователя это вряд ли устроено так. Сервис должен стремиться “показать товар лицом”, а не скрывать продукты под семью печатями  уровнями древовидной (иерархической) структуры.

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

Каталог Озона состоит из карточек, но если Самокат переборщил с их высотой, то Озоновским карточкам каталога ее сильно не хватает. Не смотря на то, что сами карточки сделаны минималистично, из-за их маленькой высоты в один экран их попадает слишком много, а так как разбивки по подразделам здесь нет, их очень сложно воспринимать. Весь каталог напоминает кашу из рекламных баннеров, хотя сами карточки содержат только текст и фото, как у конкурентов.

Удобство использования поиска

Поиск по каталогу не менее важен, чем каталог. Чаще всего, если пользователь приходит в сервис с уже сформированным списком покупок, он воспользуется именно поиском. И очень важно, чтобы он был на виду и был удобно устроен. Лучше всего поиск устроен снова у Лавки, Сбермаркета и Самоката.

Вот почему:

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

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

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

В Сбермаркете при открытии поиска нам советуют продукты, которые мы недавно искали, популярные запросы и возможность сузить категорию, где будем искать товар. Также, хорошо выполнен UX-копирайтинг в маске поля поиска: нам подсказывают по каталогу какого магазина он будет выполнен, это отличное решение с учетом того, что магазинов в Сбермаркете много + есть возможность делать заказ одновременно из 2-ух магазинов сразу или сравнивать, в каком из магазинов будет выгоднее совершить покупку. Если наполнять корзину не последовательно, а параллельно из двух магазинов, есть риск запутаться, в каком магазине я делаю заказ сейчас. Благодаря копирайтингу внутри поля поиска этот риск минимизируется.

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

В том числе есть и возможность ранжирования товаров по цене. Такой возможности нет, например, в Самокате и Лавке, а это часто бывает нужно.

Поиск Утконоса хорошо выделен визуально, но присутствует и отдельная вкладка для него, что кажется уже лишним. Копирайт в маске поля поиска смущает, он содержит пример-подсказку продуктов (“рис”, “хлеб”), меня это только сбило с толку, отвлекло от того, какие продукты я держала в голове перед тем как его открыть.

Есть классная фича с поиском по списку, которую не видела нигде у конкурентов, можно добавить названия продуктов (например, те, которые я точно покупаю еженедельно) и приложение покажет мне продукты по каждой введенной категории с выделением в подразделы. Классно! Также внутри поиска есть фильтрация по стоимости, что часто бывает удобно при заказе продуктов на неделю.

У Озона, пожалуй, вышел самый неудобный поиск, так как он недостаточно выделен на главной странице раздела Ozon Fresh, также копирайтинг внутри поля подчеркивает, что доставка будет за час, и кажется, что эта информация важна в рамках экосистемы Озона (тк Fresh это отдельный сервис и они скорее всего хотят отстроить и подчеркнуть условия его работы), однако, написать в маске поискового поля, что поиск будет по каталогу Ozon Fresh, было бы информативнее, но с условием донесения времени доставки где-то в других разделах (похожая логика у Сбермаркета, когда в поле поиска указывается название магазина). К сожалению, дополнительной помощи в поиске товара я тоже не увидела, фильтры по выдаче есть, но они находятся далеко от самого поля поиска и неочевидно, как туда попасть.

Удобство считывания информации с карточки товара

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

Карточки продуктов в Сбермаркете визуально отличаются от Самоката и Лавки, но не менее элегантно решают задачу, отмечу, что мне больше нравится, что карточка белая на сером фоне, кажется, что тут реализация удачнее, чем у Лавки. Цена сразу считывается, кнопка добавления в корзину лаконичная. Карточки Сбермаркета больше по высоте, чем в Самокате и Лавке, что позволяет больше внимания уделить фото продукта, в Лавке изображения хоть и очень хорошего качества, но, пожалуй, мелковаты. Я пользуюсь сервисами с iPhone 11, а учитывая, что использование iPhone SE, 7 и 8 еще не канули в небытие, их владельцы могут быть разочарованы представлением продуктов Лавки на своих устройствах.

Что касается, карточек Озона и Утконоса, здесь у меня больше всего вопросов. Они очень перенасыщены лишней информацией, которая отвлекает от процесса выбора. В каждой карточке Озона нам напоминают, что доставка будет из Ozon Fresh, что добавляет 10-12px к высоте каждой карточки. Думаю, что можно было бы глобально отстроить Ozon Fresh от остального Озона, чтобы не напоминать пользователю, откуда повезут товар каждый раз. В каждом продукте мы видим рейтинг товара и количество отзывов на него, точно ли они нужны нам, если мы доверяем магазину? Возможно, это интересная фича, но хотелось бы ее увидеть только если я уже решила, что мне нужен этот продукт и зашла, например, на его детальную страницу и уже там почитала отзывы. Также, смутило несколько фотографий одного продукта. Вероятно, я привыкла к тому, что сервисы, которыми пользуюсь я, выбирают одну хорошую фотографию и на этом останавливаются. Правда, в Самокате есть товары с несколькими фото, но это мы видим только в детальной карточке продукта, что логичнее. Допускаю, что структура карточек Ozon Fresh позаимствована с основного Ozon и это консистентно. Предположу, что тут было бы правильнее ориентироваться на то, какие решения используются большинством игроков рынка, так как это уже привычный бенчмарк.

Утконос выводит карточки списком карточек, а не плиткой, такой вариант тоже вполне допустим, есть только вопрос в выделении цены, так как она прибита к фото продукта и выглядит слишком незаметной. В карточке много пустого пространства, которое используется неэффективно. Кнопка добавления в корзину могла бы быть покрупнее, тк пространство это позволяет. Превращение кнопки “в корзину” в каунтер также есть и в Озоне и Утконосе, но в Утконосе аккуратнее визуально выполнено, чем у Лавки, Самоката, Сбермаркета и Озона.

Удобство работы с корзиной

Снова начнем с Лавки, Самоката и Сбермаркета, так как и в этой категории реализация у них вышла наиболее удачная. Во всех этих сервисах воспринимать список товаров получается без сложностей, легко увеличить количество единиц продукта, в 2 из 3 сервисов (Сбермаркет, Лавка) не нужно далеко идти, чтобы посмотреть на итоговую цену.

Часто в корзине мы хотим увидеть, на сколько получился заказ: нужно ли что-то убрать, чтобы уместиться в бюджет, или же добавить товаров, если рассчитывали на большую сумму и остался запас. С этой точки зрения Сбермаркет удобнее всего показывает итоговую сумму - на самом верху вкладки корзины и в кнопке завершения оформления. У Лавки стоимость корзины располагается прямо в кнопке оформления заказа, что тоже удобно и всегда на виду.

Самокат наименее удобно показывает итоговую цену, она нигде не закреплена и до нее еще нужно домотать.

В Сбермаркете есть еще возможность набрать корзину одновременно из двух магазинов и суперудобно, что это не 2 разных флоу (сначала сделать заказ из 1 места, а потом из другого). Можно накидать из двух магазинов 1 корзину, сравнить цены прямо в корзине и в 2 клика сделать заказ из обоих магазинов. Тут возможно стоит показывать еще общую сумму по всем магазинам в корзине.

В Ozon Express, как и в других разделах, перегруз информацией, снова отображается очень много напоминаний, что товары привезут из Ozon Express, на каждой карточке показано, сколько баллов Премиум я получу за покупку каждого товара, окей, это наверное полезно, если я подключена к этой программе, но так как это не так, это абсолютно бесполезная для меня информация, которая мешает сосредоточиться. Также, мне предлагают купить в рассрочку туалетную бумагу, прямо в этой карточке. Да, это фича, видимо распространяется на все продукты Озона. Но, тут сейчас будет субъективный комментарий, но блин, не сюр ли это?)

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

Восприятие промо-блоков и дополнительных товаров, которые предлагает сервис

Пока я покупала продукты по списку, который приготовила для тестирования, в Лавке я захотела еще 2 товара, которых в списке не было. О чем это говорит? Что для сервиса, который специализируется на небольших эмоциональных покупках, результат - супер!  Дополнительные товары предлагаются в корзине, не отвлекая пользователя от процесса покупки, также блок с доп. товарами встроен и в детальную карточку продукта, алгоритмы работают хорошо и часто могут быть полезными в напоминании о том, какие продукты пользователь забыл купить, чтобы приготовить какое-то блюдо.

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

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

В Сбермаркете ситуация чуть другая, потому что и позиционирование сервиса другое, это скорее хаб гипермаркетов для закупки еды на всю семью надолго, потому и промо-механики тут другие, но не менее эффективные. Здесь я не увидела блоков с предложением дополнительных товаров, однако в каждом магазине над каталогом есть блок со скидками и спецпредложениями конкретного магазина и полагаю, учитывая наличие разных магазинов, это единственное аккуратное решение, которое можно было реализовать. Блок ненавязчивый и помогает посмотреть все, что доступно по скидке прямо сейчас и существенно сэкономить. Мне это чем-то напоминает блок со скидками от Delivery Club, куда я каждый раз с вожделением смотрю, нет ли удобного предложения на заказ, который я собираюсь сделать.

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

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

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

Простота заполнения контактных данных и адреса

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

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

Оплату оказалось легко совершить во всех сервисах, кроме Утконоса. Хочу тут остановиться на интересном и неприятном открытии того, как происходит оплата заказа в Утконосе. Я выбрала оплату картой, мой заказ создался, и я удивилась, так как данные карты я в приложении еще нигде не вводила: первая эмоция - беспокойство. Затем я увидела очень мелкий блок, что заказ требует оплаты и можно это сделать как раз сейчас после оформления. Очевидно, если это не заметить и не оплатить заказ, то либо начнут приходить сообщения/пуши с требованием его оплатить, либо заказ вовсе отменится без каких-либо оповещений. Такое поведение приложения мне совсем не нравится, потому что сразу есть несколько вопросов:

• почему нельзя списать оплату за заказ сразу?

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

Выводы

Итак, я проанализировала 5 популярных сервисов доставки: Яндекс Лавка, Самокат, Сбермаркет, Ozon Fresh, Утконос.  В завершение тестирования мне бы хотелось оценить каждый сервис с учетом того, что я описала выше, поэтому привожу здесь табличку с оценками по 10-ти бальной шкале, которые у меня получились.

По моим оценкам, самыми классными с точки зрения пользовательского опыта оказались Сбермаркет, Яндекс Лавка и Самокат. И хоть эти сервисы несколько по-разному позиционируют себя на рынке, а у Лавки и Самоката более простой пользовательский путь так как каталог значительно меньше, как и количество решений, которые пользователь принимает в процессе покупки. Меня приятно удивило, что Сбермаркет, являясь в первую очередь конкурентом сервисам доставки продуктов на более длительный срок (то есть больше все же конкурирует с Озоном и Утконосом), близок к простоте подачи информации на уровне Лавки и Самоката. Озон и Утконос оказались самыми неудобными сервисами и основные претензии к интерфейсу тут в том, что о пользователе много где не позаботились, перегрузили информацией во многих разделах и совсем не сняли когнитивную нагрузку, а скорее увеличили ее (надеюсь, что не специально)

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

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