Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

Как сделать ВкусВилл еще удобнее?

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

Недавно прочитал статью «Дизайн-прожарка ВкусВилл». К авторам отношусь хорошо. Но если готовишь стейк, важно отличать степень прожарки Medium Rare от Well Done. Сегодня мы разберем iOS приложение ВкусВилл на атомы и посмотрим, как его улучшить.

Давайте сделаем этот материал интерактивным: я намеренно не покрыл часть разделов, «упустил» моменты в тех разделах, что покрыты и остановился на 160 точках роста, но их гораздо больше. Как считаете, что я «упустил»? Жду вас в комментариях.
Партнер Experience.Partners
Автор сайта HardClient.com
Структура статьи
Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Если решишь поучаствовать в интерактиве, советую скачать приложение и перед чтением блока самостоятельно попытаться выявить точки роста. Я делал оценку версии 2.52.1. К моменту прочтения часть моментов может уже быть поправлена – но это к лучшему.
Для оценки usability я использовал базу из 25 чек-листов по e-commerce. Все они доступны в моем Telegram.

1. Онбординг

Welcome экраны

У приложения нет welcome-экранов. Возможность подсветить в нескольких слайдах ключевые преимущества сервиса и компании упускается.

Онбординг по функциям

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

Пояснения к запросу геолокации

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

Пояснения к оповещениям

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

Тайминг запросов к доступам

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

Побуждение к авторизации

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

2. Каталог товаров

Визуализация категорий

Категории 2 уровня не сопровождаются визуализацией. Это относительно усложняет поиск нужной категории. Особенно если клиент – визуал.

Возврат к категориям

Возврат к категории более высокого уровня возможен только с помощью edge swipe и кнопки в левом верхнем углу. Стандартный свайп не поддерживается.

Сортировка

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

Спектр фильтров

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

Релевантность фильтров

Фильтры не подстраиваются под категории товаров и во многих случаях не релевантны. Например, фильтр «Без белого сахара» в категории «Курица».

Дублирование веса/объема

По некоторым товарам информация о весе/объеме дублируется в названии и в отдельном поле. Клиенту от такого дублирования пользы никакой.

Фото в карточках рецептов

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

Различия в размере маркеров

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

Читаемость маркеров

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

Понятность маркеров

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

Конкурирующие маркеры

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

Маркеры на фото

Часть маркеров реализованы не в виде объектов интерфейса, а как часть фото. Из-за этого они могут перекрываться другими маркерами и плохо читаться.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

3. Карточки товаров

Сокращения в названиях

В названиях товаров лучше не использовать сокращения, если они не общепринятые. Если знаете, как расшифровывается «_РП», напишите мне в комментариях.

Видимость page control

Элемент page control выполнен и размещается таким образом, что может быть плохо заметен в карточках со светлыми фото товаров.

Обрезание фото

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

Расположение описания товаров

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

Наличие описаний

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

Обрезание текста

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

Визуализация пищевой ценности

Информация по БЖУ и калориям представлена в формате plain text, хотя ее можно было бы визуализировать, чтобы она легче считывалась (например, так).

Различия в пищевой ценности

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

Пищевая ценность по рецептам

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

Дублирование текста

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

Объемы текстов состава

По некоторым товаром тексты с описанием состава настолько объемны, что читать из становится тяжело. При этом тексты никак не отформатированы.

Состав зависит от производителя

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

Если производитель один...

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

Структурирование текста рецептов

Текст рецептов также представлен в виде plain text, хотя мог бы быть выполнен в виде блоков с яркими bullet point'ами и отступами, из-за которых он лучше бы считывался.

Контрастность текста акций

Желтый текст с пояснением условий акции на белом фоне недостаточно контрастен. Из-за этого он может хуже читаться. Особенно если у клиента не идеальное зрение.

Читаемость элементов на странице

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

Журнал проверки

Особенно новым клиентам может быть не понятно, что такое – журнал проверки. При этом какими-либо пояснениями эта кнопка не сопровождается.

Загрузка журнала

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

Ограничение по скроллу

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

Закрытие страницы

Возврат к категории более высокого уровня возможен только с помощью edge swipe и кнопки в левом верхнем углу. Стандартный свайп не поддерживается.

4. Рейтинг и отзывы

Видимость отзывов

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

Переход от оценки к отзывам

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

Визуализация summary

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

Кликабельность оценок в summary

Посмотреть отзывы с конкретной оценкой при тапе по ней в summary нельзя: клиенту приходится пользоваться отдельно стоящим фильтром.

Последние цифры карт

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

Оценки vs. отзывы по рецептам

В отличие от продуктов, оценки и отзывы по рецептам разбиты на 2 отдельных процесса и разнесены в разные стороны экрана. Зачем – не понятно.

Реакции на отзывы по продуктам

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

Реакции на отзывы по рецептам

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

Модерация отзывов

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

5. Выбор магазина

Расстояние до магазина

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

Магазины в других городах

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

Точки с отсутствующим товаром

Зачем отображать в списке магазины с отсутствующим товаром? Лучше показать ближайшие магазины, в которых товар есть в наличии.

Размещение поиска и фильтров

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

Подсказки в поиске

При использовании поиска в формате карты какие-либо быстрые подсказки отсутствуют: клиенту приходится набирать название улицы «вслепую».

Быстрый сброс фильтров

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

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

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

Форматирование телефонов

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

Индикация работы магазина

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

Скидки есть, да не про вашу честь

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

Выгода на экране скидок

По товарам со скидкой в магазине % скидки не отображается. В купе с плохо заметной старой ценой это затрудняет восприятие выгоды от предложения.

Без перехода в браузер

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

Оформление ссылок

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