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
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
No comments:
Post a Comment