Калькулятори харчування UX Design
Натхнення від Sweetgreen, Chipotle, CAVA та Panera Bread.
Маша С
31 жовтня 2019 · 6 хв читання
Як хтось, хто любить відстежувати калорії та макроси, я люблю, коли ресторани публікують інформацію про харчування в Інтернеті, і тим більше, полегшують налаштування замовлення, не відходячи від поживної цінності.
Насправді, коли я харчуюся поза домом, я зазвичай вибираю собі місце, виходячи з того, чи доступні його факти харчування в Інтернеті. (Очевидно, я не роблю ЦЕ ВСЕ час. Тільки коли я сам і/або це будній день 🙃).
Оскільки я вже досить давно відслідковую, я зіткнувся з численними підходами до проектування калькуляторів харчування. Є кілька чудових прикладів, і я із задоволенням поділюсь своїми улюбленими в цій статті.
Додаток Sweetgreen, ймовірно, має багато шанувальників як в UX, так і в спільнотах охорони здоров'я та фітнесу.
Інтерфейс чистий, процес налаштування та замовлення швидкий, а фотографії інгредієнтів просто такі естетичні.
Як видно вище, загальна кількість калорій оновлюється у міру зміни трапези, а калькулятор калорій зручно інтегрований прямо в порядку замовлення.
Однак є кілька мінусів. По-перше, у програмі відсутня інформація про макроси. Незважаючи на те, що в мережі я знайшов таблицю pdf із розбиттям макросів для кожного пункту меню, вона, здається, не відповідає застосунку та не оновлювалася останніми елементами.
По-друге, замовлення (і, отже, можливість налаштування та перевірки харчової інформації) доступне лише в додатку. На веб-сайті це неможливо зробити ні з телефону, ні з робочого столу.
По-третє, навіть не дивлячись на те, що в замовлення вбудований калькулятор харчування, існує ймовірність того, що користувач зацікавлений лише в перегляді інформації про харчування, не роблячи замовлення. Як я вже писав раніше, для користувачів може бути корисним доступ до меню ресторану (а в даному випадку - харчової інформації), навіть якщо вони ще не готові замовляти.
На відміну від Sweetgreen, Chipotle має окрему функцію калькулятора харчування, яка також відображає макророзбивку. Хоча він не доступний у програмі, ви можете використовувати його як у мобільній, так і у настільній версії веб-сайту.
У настільній версії калькулятора харчування Chipotle є фіксована бічна панель із гарною круговою діаграмою, яка оновлюється під час вибору інгредієнтів.
У мобільній версії внизу є фіксована смужка, яка відображає інформацію про харчування. Коли ви натискаєте на неї, вона відображає секторну діаграму так само, як і настільна версія:
Коли ви робите фактичне замовлення в Інтернеті, Chipotle показує кількість калорій для кожного інгредієнта. Однак він більше не відображає макророзбивку і не обчислює загальну суму калорій під час оновлення замовлення.