Displaying information hierarchy and readability on mobile app

Question

I am working on a personal project that is a training log fitness app. On the meal section I want to display what time the meal was had and all the food that they had as well. Each meal being separated by from top to bottom. The food description is broken into two lines separated by commas. I was wondering if that is a good idea or could it cause readability issues for users?

Great ideas everyone, I also considered doing something else too. I looked at the myfitness pal app and like how they lay out the foods from top to bottom so that no matter if I add a few foods or a lot then it stacks up and makes it easy for a user to read. I separate my categories by calling it meal instead of breakfast,lunch and dinner which myfitness pal did. I also saw how I can improve what they did by adding the time of the meal to the right of the meal category. Here is a solution I came up with.

Answer 1

Supposing that most people won't add a lot of foods per meal (lets say 6 each meal at most) I'd prefer to place each food above/under the other, since it's much easier to scan.
As a reference, it's also the common way that recipes are presented.

btw, I'd try to reduce the "layers" of the design:

• Use lighter colors for titles and time boxes to reduce visual clutch.

• Does each meal has only 1 time inside? If that's the case I would merge them.
  It could be something like Meal 2 (11:00AM).

Answer 2

I have been doing research about healthy eating for 6 months.Based on my invesitagtion of the best applications on play/App store, I would recommend you to look at

• Lost it
• Nutrition Menu
• MyFitnessPal
• My personal Diet

Based on my experience in that project, I can easily say that there's no "One-size-fits all " pattern for this but I can advise you to do formative evaluation and get your target-user involved.Propose different design layout for this and show them, get their comments and then evaluate it. Here's a nice layout pattern as shown below;

Additionally, you can be more creative, you can use a product-card if you are building your application using material design. Try to minimize your design and be consistent when you are making the layout. Reduce as much as possible of contents and show the importance of details "I personally avoided using pictures". If you wanna show note maybe you can "implement a note viewer button" so if the user wants to see what he/she wrote about that meal they can easily enable that functionality.

Answer 3

I would suggest a Horizontal RecyclerView with icons for food with name below it. You can also use tick icon to show whether each item was actually had or not; if you are maintaining a Diet with items in it.

For example: https://www.google.co.in/search?q=play+store+ui&client=ms-android-oneplus&prmd=inv&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjy3MKn3KnKAhVBcI4KHUAYDuUQ_AUIBygB#imgrc=91JsKUjMAczTeM%3A

In this link the third screenshot shows items like rating and genre. So it's more appealing and gives better understanding.

Answer 4

I would make the food-items into tags like in WordPress and then have a cloud of frequently eaten items. That way, it makes it easier for the user to add new foods, to enter frequently eaten items, and to delete mistakes.

It would also be handy to have the ability to copy yesterday's meals and edit them.

Here's a possible popup box for selecting frequently eaten items:

Your meal listing would then look something like this:

Answer 5

Since it is a fitness app, I am sure the users are quite interested in knowing Calories consumed per meal and per meal item. The screens shared by Serag does that well.

It might also add value to show the budget per meal, and how much excess/shortage there was in the meal

Another thing that iv seen on myfitness pal - everytime you log a food that is high in a nutrient it shows a small temporary message right below the item saying something like "this food is high in protein"

It just adds to the entire experience of wanting to stay fit and in budget.