I am ready for a long road flight for work with a week- or months-long projects.
Как сделать ВкусВилл еще удобнее?
160 идей по улучшению iOS приложения
Хочу начать этот год с доброго дела и помочь тем, кто, скорее всего, меня услышит.
Недавно прочитал статью «Дизайн-прожарка ВкусВилл». К авторам отношусь хорошо. Но если готовишь стейк, важно отличать степень прожарки Medium Rare от Well Done. Сегодня мы разберем iOS приложение ВкусВилл на атомы и посмотрим, как его улучшить.
Давайте сделаем этот материал интерактивным: я намеренно не покрыл часть разделов, «упустил» моменты в тех разделах, что покрыты и остановился на 160 точках роста, но их гораздо больше. Как считаете, что я «упустил»? Жду вас в комментариях.
Недавно прочитал статью «Дизайн-прожарка ВкусВилл». К авторам отношусь хорошо. Но если готовишь стейк, важно отличать степень прожарки Medium Rare от Well Done. Сегодня мы разберем iOS приложение ВкусВилл на атомы и посмотрим, как его улучшить.
Давайте сделаем этот материал интерактивным: я намеренно не покрыл часть разделов, «упустил» моменты в тех разделах, что покрыты и остановился на 160 точках роста, но их гораздо больше. Как считаете, что я «упустил»? Жду вас в комментариях.
Структура статьи
Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Если решишь поучаствовать в интерактиве, советую скачать приложение и перед чтением блока самостоятельно попытаться выявить точки роста. Я делал оценку версии 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км от клиента не совсем понятен.
Точки с отсутствующим товаром
Зачем отображать в списке магазины с отсутствующим товаром? Лучше показать ближайшие магазины, в которых товар есть в наличии.
Размещение поиска и фильтров
Строку поиска и фильтры можно было бы разместить снизу карты без потери функциональности. Но они расположены сверху – и до них нужно тянуться.
Подсказки в поиске
При использовании поиска в формате карты какие-либо быстрые подсказки отсутствуют: клиенту приходится набирать название улицы «вслепую».
Быстрый сброс фильтров
Хотя фильтров по магазинам и много, возможности их быстрого сброса нет: если активировал и хочешь очистить, будь добр снимать фильтры один за другим.
Обновление количества товаров
Список магазинов сопровождается пояснением о том, что данные могут быть не актуальны. Честно. Но это может вызвать вопросы о полезности такого списка.
Форматирование телефонов
Телефонные номера магазинов не отформатированы с помощью общепринятой маски. Это усложняет их восприятие.
Индикация работы магазина
Обычный график работы можно снабдить небольшим индикатором, который показывал бы, работает ли магазин сейчас или уже закрыт, а также время до открытия/закрытия.
Скидки есть, да не про вашу честь
В карточке магазина есть отдельная кнопка, сообщающая о скидках. Но при тапе по ней клиент узнает, что скидки ему не покажут, т.к. «его скидки уже действуют».
Выгода на экране скидок
По товарам со скидкой в магазине % скидки не отображается. В купе с плохо заметной старой ценой это затрудняет восприятие выгоды от предложения.
Без перехода в браузер
Будет лучше, если клиенту не придется переходить из приложения в браузер, чтобы ознакомиться с какой-либо информацией по магазину.
