How to display zero percent of progress?

Question

I want users of my application to perform 5 exercises a day. I'd like to have a GUI element which shows their current progress, which can be 0,1,2,3,4 or 5. I thought about using something like a progress bar build of 5 squares arranged horizontally, or something like a pie-chart with 5 wedges. The problem is that none of this metaphors seems to be obvious when the progress is 0%. In other words, if you see 5 wedges of the same color it is not obvious if the value is 0% or 100%, or if this is even a progress bar at all!

I've come to realization that cellphones have similar problem when they have to display that battery is discharged: AFAIK iPhone shows 1% in this case, Windows Phone shows heart symbol inside battery. Also when the battery is discharged and I start to charge it, then my Android shows an animation, and Windows shows a thin red line at the bottom of the battery (something like the 1% trick).

So perhaps this is a good idea, to display 0% as 1%, just to make the distinction between "done" and "todo" areas obvious?

I also considered the most obvious solution, that is to use numbers and/or text. But then again: is there any reason for using progress bars instead of numbers? I think there is.

Answer 1

Here you have 3 options.

In the first sample, you have 2 states with "voids" that are filled as the tasks are completed

The second sample is useful if your tasks are numbered in an amount sequence (x amount of tasks completed) and the order doesn't matter

Finally, the easiest and most clear option: a big number with progress status. Straight and to the point. I've built something more or less related to what you're doing and this is what I used with 0 issues reported: it's absolutely clear the 0 is a zero and can't be anything else, no matter how you want to stretch it, there's no room for confusion. And Obviously you can fill the circle, just mocking a quick example

Answer 2

Opening

Interesting question. Let's see what we can do.

Don't make them think

Let's take color out of the equation for the moment and think about solid shapes. We can use the gestalt principals to somehow differentiate 5 sections. If the section is outlined, it's "empty"--if something is empty, we usually consider it to be not finished. If it is full of a color, pattern, etc, we consider that it is "full" or "completed"!

So to your phone point, either way, the battery begins to lose portions of the solid color inside of it. The amount of solid-to-outline ratio is what lets us know just how empty it is.

Don't use Charts

Why not? Well charts show us parts of a whole. I suppose you can consider their "activity" the "whole", but typically we see data and statistics in charts and graphs. It may be more difficult for a user to comprehend within a short amount of time the "meaning" of the chart if it shows the amount of activity you've done in a day.

Progress Bar! ... ?

You say "Is there any eason for using progress bars instead of numbers? I think there is".

So my question to you is: why is that?

In YOUR situation, what is the benefit?

My suggestion is that people hate to read and I would include numbers in reading. We can read "2", then we have to read "out of 5" or "2 / 5" or something to show us our ratio.

The progress bar shows us visually, so if executed properly I believe it takes less mental comprehension.

---

Good luck! :)

Answer 3

Very valid question and a UX Challenge.

I think it can only work with a workaround as what the device manufacturers have done with the battery indicator. Personally, in your case, I think you could work with progress bar and a text as below:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

I think it really depends on the behaviour that you want the users to adopt, and how these exercises relate to the goals and tasks that the users want to accomplish.

From what you have described, the five exercises seem more like a checklist of things to do, and they don't have to be done in any particular order so I don't really see the progress bar metaphor working because it doesn't seem to match with the behaviour (i.e. what if I do exercise 1 one day and exercise 2 the next, then I will never complete the task). It could be easier just to put a label that says 'x out of 5 exercises complete' and you will have solved the problem.

But is seems like you want to drive the user to some end goal and create a behaviour that matches this. What you actual need to do then is use the individual days as the main display (perhaps using a weekly or monthly calendar), and show the benefit that relates to completing the 5 exercises instead of just 1 or 2 per day. So in the calendar you can provide simply a tick if all the exercises are complete, and another indicator if not all 5 are complete (so they don't think about just doing 1 or 2 or 4).

Answer 5

in your graphic examples, a faded (like 10-20% transparency) version of the filled in graphic indicates that something belongs there, but it's not complete. When each activity is done, more of the shape is filled in solid. It's pretty obvious when 0% has been completed.

This also has the advantage of playing on the desire for completeness. (which is why many progress bars have outlines or shaded areas of "progress not finished")