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

Food.ru: рецепт хорошего UX

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

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

Сегодня поговорим об одном из таких сервисов – Food.ru – и разберём, с помощью чего коллеги на разных этапах пути клиента делают опыт удобнее.

Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.

Автор hardclient.com

Highlight разнообразия контента

О сильных сторонах сервиса клиенту лучше говорить с самых первых шагов. Поэтому информация о разнообразии рецептов и статей встречает его уже в App Store.
hardclient

Детальные тексты обновлений

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

Также стоит заметить, что клиентов в рамках release notes благодарят за обратную связь. Это также делают далеко не все разработчики.
hardclient

Меню на неделю

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

Меню разбито на 3 приема пищи и призвано вдохновить на приготовление чего-то новенького. А если хочется большего, внизу клиента встречает подборка дополнительных блюд.
hardclient

Подбор рецепта

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

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

Таким образом, фича ориентирована на поведенческий паттерн поиска не «от идеи к продуктам», а, наоборот: «от продуктов к идее».
hardclient

Статьи

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

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

Кулинарные мастер-классы

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

Всё бесплатно. Но, как и в случае со статьями, мастер-классы часто завязаны на рецептах, а рецепты – на продуктах, которые можно заказать в Перекрёстке.
hardclient

Пользовательский контент

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

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

Фильтр по аллергенам

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

Поэтому сервис позволяет убрать рецепты с указанными аллергенами на более раннем этапе: при просмотре листинга.
hardclient

Фильтры по ингредиентам

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

Но при этом, если вы что-то не любите, поэтому фильтры по отсутствию ингредиента помогут вам не столкнуться с блюдами, которые их содержат (аналогично аллергенам).
hardclient

Фильтр по стоимости на порцию

Какой основной фильтр мы ожидаем встретить практически в любом листинге e-com приложения в food ритейле? Конечно же, это фильтр по цене.

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

Фильтр по времени приготовления

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

А можно воспользоваться соответствующим фильтром и оставить в листинге только те результаты, которые соответствуют вашим временным ограничениям.
hardclient

Счетчики избранного

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

Такая механика наряду с отзывами позволяет создать социальное доказательство и побудить клиента присмотреться к рецепту.
hardclient

Сложность рецепта

В каждой из карточек по 5-балльной шкале подсвечивается сложность приготовления блюда, а пояснения облегчают восприятие.

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

Острота блюда

Кто-то любит блюда поострее. Кто-то, наоборот, старается воздерживаться. Хайлайт остроты рецепта с пояснением в тултипе помогает и тем, и тем понять, стоит ли его готовить.
hardclient

Наличие аллергенов

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

Время приготовления

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

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

Визуализация КБЖУ

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

Теги в рецептах

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

Пошаговые инструкции с фото

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

Режим готовки

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

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

Как произвести впечатление

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

Согласитесь, видеть такое завершение гораздо более интересно, чем «Приятного аппетита» или еще какие-то заезженные фразы. Такая вот «вишенка на торте».
hardclient

Выбор числа порций

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

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

Быстрая покупка товаров

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

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

Выбор альтернатив

Если клиенту не понравился какой-то из предложенных для рецепта товаров, велик риск того, что он просто уберет этот товар из списка.

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

Список покупок

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

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

Социальные механики

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

Кому-то это позволяет дополнить и улучшить рецепт. Кому-то – уточнить вопросы по ингредиентам. А сервису это помогает удерживать аудиторию в приложении.

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

Empty state комментариев

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

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

Прямой переход в Gmail

Казалось бы, что необычного тут можно сказать? Выбираешь почту – пишешь в поддержку. Но это пример одного интересного момента, который не могу не подсветить.

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

Фишка Food.ru в том, что вместо стандартной ссылки mailto: ребята используют специальную URL-схему, которая ведет именно в Gmail, а не в какую-либо другую почту.

Замечу, что у других приложений тоже есть свои URL-схемы, и если вас iOS сначала отправляет в Safari и лишь затем в целевой Telegram, разработчик кое-о-чем забыл 😉
hardclient

Оценка внутри приложения

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

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

Food.ru, напротив, реализует весь процесс оценки в контуре приложения, тем самым снижая риск того, что пользователь прервет свою сессию.
hardclient

Фидбэк в быстрых действиях

Когда мы зажимаем иконку приложения? Чаще всего когда мы хотим его удалить. Food.ru снимает на этом шаге фидбэк с пользователя, уточняя, что пошло не так.

А если пользователь решил ответить, это открывает для нас возможность перебороть негатив и удержать его. Редкая фича, которую хотелось бы видеть в индустрии чаще.
hardclient
To be continued...
Итак, это был Food.ru – сервис с рецептами, у которого есть много моментов, которые можно перенять, если вы запускаете или хотите прокачать схожий функционал у себя.

Что-то мне подсказывает, что его развитие на этом не остановится и ему еще есть куда расти. Поэтому буду наблюдать за ним и делиться новыми фичами на Hard Client • Daily.

Ребятам желаю успехов, а если у вас есть коллеги, которым материал был бы актуален, буду рад, если перешлете им этот пост. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce