0

I'm building an app to calculate/track meals based on one's own macros but I'm having some trouble finding the right way to design it.

What I'm trying to create is something very minimalist and uncluttered that allows the user to add meals and having it update carbs,fat,protein,fiber and calories in real time. This is what I've come up with for now: without progress bar

and with a progress bar: with progress bar

It looks off but I have no idea why, and I know other people interacting with this design would feel the same way. No idea if it's because of the spacing or anything else. What can I change to make it more pleasing to the eyes? I'm focusing on the macro design, so don't mind the still incomplete section where you're supposed to add meals. Although it's a rough example of what it will look like when it's finished, minus a few additions.

Improve this question
2
  • 1
    Have you checked myfitnesspal? They have a UI that tackles the same issues. Perhaps you can find some learnings there? Problem I see so far is that you try to show both macro AND food from the day. Usually people want to see one or the other. Try split the functionalities, it'll create better focus.
    – Wendy Wojenka
    Mar 1, 2018 at 12:12
  • 1
    I understand, just wondering what the point is. If someone eats appropriate amounts of protein, but eats the rest in fat rather than carbs, how is that going to be reflected in your progress bar? They're going to be going way over the calorie limit, while the progress bar implies they still need to keep eating to hit that cap. I guess whether this works out depends on your app; is it for anyone on a diet or is for people who are really trying to hit that perfect macro.
    – Wendy Wojenka
    Mar 1, 2018 at 12:35

1 Answer 1

Reset to default
1

I'll choose to explain concisely and hope that would be pretty straight-forward with a simple illustration below.

  1. You may simply add Progress bar for each (Protein, Fat, Carbonhydrates, Fybers, KCal) categories and filled each one of them with just the progress especially belong to that item.

  2. By placing this progress bars displayed next to the each meal you may gain lots of benefits like saving space and creating a superficially unclattered table like outlook.

Option 1

enter image description here

Option 2

enter image description here

Option 3 as an alternative display of Option 2

enter image description here

Improve this answer
7
  • My intention with the progress bars for each categorie like a table for each meal and you may wish to fulfill that table's rows in a progress bar fashion with a 'name of the categories' in it. Let me make it visualise simply at least
    – Erhan Yaşar
    Mar 1, 2018 at 12:36
  • I added an illustration to be able to make you emphasize better but of course it would be looked better when completely finished visual provided @dotbitcode.
    – Erhan Yaşar
    Mar 1, 2018 at 12:49
  • 1
    This implies you need to hit 135g protein, 40g fat and 130 carbs on EACH meal, rather than it being a cumulative amount.
    – Wendy Wojenka
    Mar 1, 2018 at 12:54
  • This would work if you had a setting where you set goals for each meal though, because then there is a separate progress bar for each meal's macros.
    – Wendy Wojenka
    Mar 1, 2018 at 13:01
  • Well I understand the situation was like this as @dotbitcode said and visualized the same way hence, there mignt be simply a choice to display them just once on top of the meals and would be more simple also which I'm added as a second option. I edited the answer above for both needs.
    – Erhan Yaşar
    Mar 1, 2018 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.