Food.ru: рецепт хорошего UX
30 моментов в приложении с рецептами, которые улучшают пользовательский опыт
Сейчас многие участники рынка food retail идут в тему рецептов и активно развивают этот функционал в своих приложениях.
Нередко можно встретить решения, в которые, видно, что вкладывались по остаточному принципу. Но некоторые вырываются вперед и выделяются на фоне остальных.
Сегодня поговорим об одном из таких сервисов – Food.ru – и разберём, с помощью чего коллеги на разных этапах пути клиента делают опыт удобнее.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Нередко можно встретить решения, в которые, видно, что вкладывались по остаточному принципу. Но некоторые вырываются вперед и выделяются на фоне остальных.
Сегодня поговорим об одном из таких сервисов – Food.ru – и разберём, с помощью чего коллеги на разных этапах пути клиента делают опыт удобнее.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Highlight разнообразия контента
О сильных сторонах сервиса клиенту лучше говорить с самых первых шагов. Поэтому информация о разнообразии рецептов и статей встречает его уже в App Store.
Детальные тексты обновлений
В отличие от многих участников рынка, в текстах обновлений команда детально рассказывает о том, что было улучшено и как это сделает опыт клиента удобнее.
Также стоит заметить, что клиентов в рамках release notes благодарят за обратную связь. Это также делают далеко не все разработчики.
Также стоит заметить, что клиентов в рамках release notes благодарят за обратную связь. Это также делают далеко не все разработчики.
Меню на неделю
Каждую неделю редакция сервиса собирает для своих пользователей сбалансированное меню из интересных и полезных рецептов, каждый день подсвечивая что-то новое.
Меню разбито на 3 приема пищи и призвано вдохновить на приготовление чего-то новенького. А если хочется большего, внизу клиента встречает подборка дополнительных блюд.
Меню разбито на 3 приема пищи и призвано вдохновить на приготовление чего-то новенького. А если хочется большего, внизу клиента встречает подборка дополнительных блюд.
Подбор рецепта
Если у вас закончились идеи того, что бы приготовить, можно заглянуть в холодильник и посмотреть, какие продукты у вас там есть.
А сервис сделает всю работу за вас, отыскав среди великого множества рецептов в базе только те, что содержат выбранные ингредиенты.
Таким образом, фича ориентирована на поведенческий паттерн поиска не «от идеи к продуктам», а, наоборот: «от продуктов к идее».
А сервис сделает всю работу за вас, отыскав среди великого множества рецептов в базе только те, что содержат выбранные ингредиенты.
Таким образом, фича ориентирована на поведенческий паттерн поиска не «от идеи к продуктам», а, наоборот: «от продуктов к идее».
Статьи
Приложение пронизано огромным количеством полезных статей, создаваемых редакцией и сильно переплетенных между собой (ссылающихся друг на друга).
В статьях можно найти много полезных моментов касательно питания, а интеграция рецептов и продуктов из Перекрёстка в контент позволяет компании монетизировать приложение.
В статьях можно найти много полезных моментов касательно питания, а интеграция рецептов и продуктов из Перекрёстка в контент позволяет компании монетизировать приложение.
Кулинарные мастер-классы
Помимо статей в сервисе также можно пройти кулинарные мастер-классы и курсы от шеф-поваров, прокачав свои навыки приготовления блюд.
Всё бесплатно. Но, как и в случае со статьями, мастер-классы часто завязаны на рецептах, а рецепты – на продуктах, которые можно заказать в Перекрёстке.
Всё бесплатно. Но, как и в случае со статьями, мастер-классы часто завязаны на рецептах, а рецепты – на продуктах, которые можно заказать в Перекрёстке.
Пользовательский контент
Помимо рецептов от редакции, пользователей также побуждают делиться идеями своих блюд, подсвечивая, что готовить по ним будет вся страна.
Авторов рецептов не оставляют один на один со своим контентом, снабжая гайдами о том, как всё стоит оформлять, а также позволяя задать все интересующие вопросы.
Авторов рецептов не оставляют один на один со своим контентом, снабжая гайдами о том, как всё стоит оформлять, а также позволяя задать все интересующие вопросы.
Фильтр по аллергенам
Если у вас есть на что-то аллергия, обидно будет узнать о том, что аллерген есть в блюде, когда вы уже воодушевились рецептом.
Поэтому сервис позволяет убрать рецепты с указанными аллергенами на более раннем этапе: при просмотре листинга.
Поэтому сервис позволяет убрать рецепты с указанными аллергенами на более раннем этапе: при просмотре листинга.
Фильтры по ингредиентам
Фильтры по наличию ингредиента могут помочь, когда у вас, например, уже есть в холодильнике индейка, и вы хотите приготовить из неё какое-то блюдо.
Но при этом, если вы что-то не любите, поэтому фильтры по отсутствию ингредиента помогут вам не столкнуться с блюдами, которые их содержат (аналогично аллергенам).
Но при этом, если вы что-то не любите, поэтому фильтры по отсутствию ингредиента помогут вам не столкнуться с блюдами, которые их содержат (аналогично аллергенам).
Фильтр по стоимости на порцию
Какой основной фильтр мы ожидаем встретить практически в любом листинге e-com приложения в food ритейле? Конечно же, это фильтр по цене.
В Food.ru решили модифицировать его, позволяя фильтровать рецепты по стоимости на порцию, учитывая текущую стоимость всех ингредиентов.
В Food.ru решили модифицировать его, позволяя фильтровать рецепты по стоимости на порцию, учитывая текущую стоимость всех ингредиентов.
Фильтр по времени приготовления
Когда вы хотите побаловать близких чем-то вкусным, но в распоряжении есть лишь час, можно углубляться в карточки в поисках времени приготовления, тратя ценный ресурс.
А можно воспользоваться соответствующим фильтром и оставить в листинге только те результаты, которые соответствуют вашим временным ограничениям.
А можно воспользоваться соответствующим фильтром и оставить в листинге только те результаты, которые соответствуют вашим временным ограничениям.
Счетчики избранного
Кнопка добавления в избранное в карточке рецепта содержит в себе количество пользователей, которым он понравился.
Такая механика наряду с отзывами позволяет создать социальное доказательство и побудить клиента присмотреться к рецепту.
Такая механика наряду с отзывами позволяет создать социальное доказательство и побудить клиента присмотреться к рецепту.
Сложность рецепта
В каждой из карточек по 5-балльной шкале подсвечивается сложность приготовления блюда, а пояснения облегчают восприятие.
Это позволяет лучше управлять ожиданиями клиента: так, чтобы можно было оценить свои силы и получить в итоге желаемый результат.
Это позволяет лучше управлять ожиданиями клиента: так, чтобы можно было оценить свои силы и получить в итоге желаемый результат.
Острота блюда
Кто-то любит блюда поострее. Кто-то, наоборот, старается воздерживаться. Хайлайт остроты рецепта с пояснением в тултипе помогает и тем, и тем понять, стоит ли его готовить.
Наличие аллергенов
Как мы уже знаем, все рецепты можно отфильтровать по наличию аллергенов прямо в листинге. Но если мы забыли это сделать, информация дублируется и в карточках.
Время приготовления
Если вы решили сотворить кулинарное произведение, важно понимать, к какому моменту вы успеете его приготовит и сколько сил нужно будет потратить.
Поэтому в карточках рецептов отдельно подсвечивается, сколько времени вам потребуется на всё-про-всё и сколько займет активная готовка.
Поэтому в карточках рецептов отдельно подсвечивается, сколько времени вам потребуется на всё-про-всё и сколько займет активная готовка.
Визуализация КБЖУ
В отличие от ряда участников рынка, энергетическая и пищевая ценность блюда выносится в отдельный блок и красиво визуализируется, привлекая внимание.
Теги в рецептах
Все рецепты пронизаны разнообразными тегами, которые упрощают навигацию и позволяют клиенту легче найти похожие блюда.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Пошаговые инструкции с фото
Все рецепты не только шаг за шагом объясняют, как готовить блюдо, но и снабжаются фото по каждому из этапов, которые улучшают восприятие.
Режим готовки
В карточках рецептов предусмотрен специальный режим готовки, который оставляет вас один-на-один с инструкцией и позволяет полностью на ней сфокусироваться.
В режиме появляется доп.навигация, которая облегчает переключение между шагами, ингредиенты всегда доступны внизу экрана, а сам экран не погаснет во время готовки.
В режиме появляется доп.навигация, которая облегчает переключение между шагами, ингредиенты всегда доступны внизу экрана, а сам экран не погаснет во время готовки.
Как произвести впечатление
Рецепты заканчиваются интересным пунктом: «произведите впечатление». В рамках него авторы делятся секретами о том, как подавать блюдо, чем украсить и с чем сочетать.
Согласитесь, видеть такое завершение гораздо более интересно, чем «Приятного аппетита» или еще какие-то заезженные фразы. Такая вот «вишенка на торте».
Согласитесь, видеть такое завершение гораздо более интересно, чем «Приятного аппетита» или еще какие-то заезженные фразы. Такая вот «вишенка на торте».
Выбор числа порций
Обидно бывает, когда закажешь продукты для рецепта, и в итоге приходится выбрасывать остатки, т.к. купили больше. Или – что еще хуже – приготовите, а кому-то не хватит.
Поэтому в карточке рецепта можно выбрать количество порций, которое хотите получить в результате, и сервис пересчитает объем необходимых ингредиентов.
Поэтому в карточке рецепта можно выбрать количество порций, которое хотите получить в результате, и сервис пересчитает объем необходимых ингредиентов.
Быстрая покупка товаров
Если вы воодушевились рецептом и решили приготовить блюдо, купить все ингредиенты можно не отходя от кассы, с возможностью убрать из списка то, что у вас уже есть.
Было бы круто, если интеграция с Перекрестком была более бесшовной, и вместо WebView при оформлении заказа меня переводили бы именно в приложение, если оно установлено.
Было бы круто, если интеграция с Перекрестком была более бесшовной, и вместо WebView при оформлении заказа меня переводили бы именно в приложение, если оно установлено.
Выбор альтернатив
Если клиенту не понравился какой-то из предложенных для рецепта товаров, велик риск того, что он просто уберет этот товар из списка.
Сервис снижает эту вероятность, позволяя выбрать альтернативы. Причем по многим позициям их достаточно много.
Сервис снижает эту вероятность, позволяя выбрать альтернативы. Причем по многим позициям их достаточно много.
Список покупок
Но далеко не каждый клиент все еще поддался искушению заказать продукты на дом: часть из нас все еще опасается того, что сборщик положит не то, что нужно.
Специально для такой группы клиентов в сервисе добавлена функция списка покупок, который интегрирован с рецептами и которым можно воспользоваться в офлайн магазине.
Специально для такой группы клиентов в сервисе добавлена функция списка покупок, который интегрирован с рецептами и которым можно воспользоваться в офлайн магазине.
Социальные механики
В приложении реализованы базовые социальные механики: в блоке с комментариями в карточке рецепта можно пообщаться с автором и поделиться мнением.
Кому-то это позволяет дополнить и улучшить рецепт. Кому-то – уточнить вопросы по ингредиентам. А сервису это помогает удерживать аудиторию в приложении.
Но стоит заметить, что в основном это аудитория авторов, т.к. пользователи сейчас не могут общаться в комментах друг с другом. А такая возможность была бы ожидаема.
Кому-то это позволяет дополнить и улучшить рецепт. Кому-то – уточнить вопросы по ингредиентам. А сервису это помогает удерживать аудиторию в приложении.
Но стоит заметить, что в основном это аудитория авторов, т.к. пользователи сейчас не могут общаться в комментах друг с другом. А такая возможность была бы ожидаема.
Empty state комментариев
В профиле пользователя есть специальный раздел, в котором можно почитать все комментарии, которые вы оставляли под рецептами.
Его empty state примечателен тем, что призывает не только собственно оставлять комментарии, но и нативно побуждает воспользоваться другой функцией сервиса – избранным.
Его empty state примечателен тем, что призывает не только собственно оставлять комментарии, но и нативно побуждает воспользоваться другой функцией сервиса – избранным.
Прямой переход в Gmail
Казалось бы, что необычного тут можно сказать? Выбираешь почту – пишешь в поддержку. Но это пример одного интересного момента, который не могу не подсветить.
Во множестве кейсов на рынке при попытке перейти из приложения в почтовый клиент вас по умолчанию отправят в нативную почту iOS, которой пользуются далеко не все.
Фишка Food.ru в том, что вместо стандартной ссылки mailto: ребята используют специальную URL-схему, которая ведет именно в Gmail, а не в какую-либо другую почту.
Замечу, что у других приложений тоже есть свои URL-схемы, и если вас iOS сначала отправляет в Safari и лишь затем в целевой Telegram, разработчик кое-о-чем забыл 😉
Во множестве кейсов на рынке при попытке перейти из приложения в почтовый клиент вас по умолчанию отправят в нативную почту iOS, которой пользуются далеко не все.
Фишка Food.ru в том, что вместо стандартной ссылки mailto: ребята используют специальную URL-схему, которая ведет именно в Gmail, а не в какую-либо другую почту.
Замечу, что у других приложений тоже есть свои URL-схемы, и если вас iOS сначала отправляет в Safari и лишь затем в целевой Telegram, разработчик кое-о-чем забыл 😉
Оценка внутри приложения
Большинство приложений просят пользователей оценить их в App Store. Но вопрос в том, каким образом делаются эти запросы.
Многие уводят пользователя из приложения в магазин, из которого он может и не вернуться, отвлекшись на какой-нибудь внезапный пуш.
Food.ru, напротив, реализует весь процесс оценки в контуре приложения, тем самым снижая риск того, что пользователь прервет свою сессию.
Многие уводят пользователя из приложения в магазин, из которого он может и не вернуться, отвлекшись на какой-нибудь внезапный пуш.
Food.ru, напротив, реализует весь процесс оценки в контуре приложения, тем самым снижая риск того, что пользователь прервет свою сессию.
Фидбэк в быстрых действиях
Когда мы зажимаем иконку приложения? Чаще всего когда мы хотим его удалить. Food.ru снимает на этом шаге фидбэк с пользователя, уточняя, что пошло не так.
А если пользователь решил ответить, это открывает для нас возможность перебороть негатив и удержать его. Редкая фича, которую хотелось бы видеть в индустрии чаще.
А если пользователь решил ответить, это открывает для нас возможность перебороть негатив и удержать его. Редкая фича, которую хотелось бы видеть в индустрии чаще.
To be continued...
Итак, это был Food.ru – сервис с рецептами, у которого есть много моментов, которые можно перенять, если вы запускаете или хотите прокачать схожий функционал у себя.
Что-то мне подсказывает, что его развитие на этом не остановится и ему еще есть куда расти. Поэтому буду наблюдать за ним и делиться новыми фичами на Hard Client • Daily.
Ребятам желаю успехов, а если у вас есть коллеги, которым материал был бы актуален, буду рад, если перешлете им этот пост. Всего наилучшего и до связи в следующих статьях.
Что-то мне подсказывает, что его развитие на этом не остановится и ему еще есть куда расти. Поэтому буду наблюдать за ним и делиться новыми фичами на Hard Client • Daily.
Ребятам желаю успехов, а если у вас есть коллеги, которым материал был бы актуален, буду рад, если перешлете им этот пост. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce