Macro / food-tracking app UI patterns

Macro / food-tracking app UI patterns

Nutrition trackers live or die on logging friction and glanceability. The user logs many times a day and checks "where am I vs my target" constantly. Every tap between intent and a logged item, and every scroll between opening the app and seeing today's number, is a tax that predicts churn. This skill is the pattern library the category has converged on, plus the differentiators (AI photo, adaptive targets) and the anti-patterns.

The core loop, and the order it should appear on the home screen: target → what you've eaten → what's remaining → quick way to log more. Everything else (trends, score, water, streak) is secondary.

1. The calorie/macro dashboard (home hero)

The single most important component. Conventions:

• Remaining-centric. Show calories remaining as the big number (Goal − Food + Exercise = Remaining). MyFitnessPal and most apps lead with remaining, not consumed — it answers "can I eat this?".
• A ring or large numeral for calories; three macro bars (protein/carbs/fat) as eaten / target g with a fill. Cal AI's signature is the ring + macro rings; MFP uses a donut + bars.
• Keep it to one combined card, not four stacked ones (see dense-no-scroll-layout). Calories hero + 3 macro bars in a single card is the standard.
• Color macros consistently app-wide (e.g., protein green, carbs blue, fat purple) and reuse those colors everywhere that macro appears.
• A compact day strip (M T W T F S S) above the dashboard for date context — horizontal, not a date picker that pushes content down.

2. The log → remaining loop

• A persistent, obvious "+" / "Log" affordance (FAB, toolbar +, or a prominent button). Cal AI floats a camera-first button; MFP uses a center tab "+".
• After logging, return to the dashboard with the numbers visibly updated (remaining drops, bars fill). The feedback is the reward. Animate the bar/ring change.
• Meal sections (Breakfast/Lunch/Dinner/Snacks) each with their own running subtotal and per-section "add food".
• "Quick add" (just calories/macros, no food match) and "recently logged"/"frequent" lists to skip search for repeat meals — huge friction win.

3. Multi-modal entry (the differentiator race)

Ranked by speed-to-log:

1. Photo / AI vision (Cal AI's wedge): snap → AI estimates items + macros → user confirms/edits. The confirm/edit step is mandatory — never auto-save an AI estimate as truth.
2. Barcode scan: instant for packaged food; scale by servings on a review screen.
3. Recent / saved meals / quick-repeat: one tap to re-log a frequent meal.
4. Text/voice natural language: "two eggs and toast" → parsed items.
5. Search the database: the fallback; needs verified-food badges + "report incorrect".

Design rule: always show a review screen before save for any estimated entry (AI/barcode/voice), with the items, serving, and a hard-stop for allergen conflicts. The model proposes; the user accepts.

4. Food diary

• Reverse-chronological or meal-grouped list of compact rows: food name · serving · calories, with macros on a second line or trailing. Not cards.
• Swipe actions: delete, edit, copy-to-another-day.
• A per-day total footer and a "complete diary / finish today" action that can show a projection.