I have a scenario like the one below:

There's a mobile app screen with a list view and there is FAB to add items to list view. Think of the app as something like Jira. So let's say the list items in the list view are projects where there are sub tasks under each projects, I want to show to the users how much task are done out of schedule tasks (progress) when the user take a look at the list view.

I have decide to go with one of following designs for project items.

list item design

In the same app I have a separate stats screen that shows the progress made in each project in one graph.

So my question is what kind of layout should I use for the project item? 1 or 2 or 3 or remove the progress from the list view item?

I am a developer doing designing.

3 Answers 3


I'd suggest using a circular progress bar with the number / percentage written inside of it, this way you are giving your users a more accurate information, meanwhile also making sure it's still quick to scan. Something like this:

enter image description here


It depends on how important the information about the progress is.

In 1. the information is very prominent but it has the advantage that in a list of multiple items it provides a visual anchor, when scanning the list.

Solution 2. might be confusing if used in a list, scannability is definitively worse then in 1. but it is also prominent.

In solution 3 the information is less prominent but it works well in a list.

I could see one more option: Have a vertical progressbar. This would be similar to the graph your using on the overview.

So this might not be the answer but maybe gives you some thought for the decision.

  • thanks for the answer. you are suggesting vertical progress bar align to corner, I do not think it works since list item height is small, hard to identify progress differences. why option 2 is confusing?
    – kaushalyap
    Commented Jul 24, 2019 at 8:26
  • is it because fab may cut the progressbar?
    – kaushalyap
    Commented Jul 24, 2019 at 8:27

Circular progress bar is interesting option. The choice and decision is depends on Your app design system and overall aesthetic.

In my opinion option 1 or 2 are good. Maybe You should asks your users?

For me progress bar in tasks is very important - I always know on what phase or stage it's when task is complex and complicated.

Opportunity to develop app:

  • Adding priority system

  • Divide tasks into smaller chunks (then You will have multiprogress bar (so circular won't works here)

  • thanks for the answer, my problem whether user will be able to grasp differences in the progressbars, text is more noticable while it will promote user to work more because at least they have made slight progress(emotion)?
    – kaushalyap
    Commented Jul 24, 2019 at 8:29
  • Interesting range of conversation - It's can be about gratification - When user finishing tasks, he feel more satisfied. However, if he have a lot of tasks, that he didn't finished/started he can feel overhelmed. It's difficult to answer this question clearly without any research. With a high degree of probability the most people feel good, when user see green progress.
    – Piotr Żak
    Commented Jul 24, 2019 at 8:36
  • although progress bar looks aesthetically pleasing, text would add some positivity
    – kaushalyap
    Commented Jul 24, 2019 at 11:33
  • valuable observation :)
    – Piotr Żak
    Commented Jul 24, 2019 at 12:41

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.