I need to develop a kind of information dashboard, with a sizable number of widgets like this, to show progress on a bunch of things:

enter image description here

I need to show the percentage value and the percentage complete, which I'm representing here as partial fill, and I need to keep the number within the bar, because I don't have a lot of real estate to show the number anywhere else.

But I'm wondering if this is hard to read when the number falls right over the completion line, as you can see in the Subtraction 7% case.

I've tried various color schemes, as well as positioning the number so that this doesn't happen, but that feels confusing too, when the numbers move around.

Is there a better way to show this kind of information?

  • Consider offsetting the text by a few pixels, so it does not overlap with the bar. The difference in alignment might be too small to be perceived by end users. – ralien Apr 9 at 14:15

Increase the contrast so users can see the values at a glance. The progress bar can visually support the number without taking up additional visual space.

By trying to keep the number in the bar, users are potentially getting information less quickly, which goes against what a dashboard seeks to achieve: Insight of status at a glance.

You can get more contrast by pulling the number up, and making it larger. Then, display progress as a contrasting line, reserving the color only for the values that are progressing.

enter image description here

I'm not sure what your other constraints are, but if the purple needs more contrast, you can darken the text and the bar, but they can work visually as one unit.

It's easier to read a prominent '7%', than to calculate the fill position in the progress bar. Your current design is the other way around: the bar is prominent, but I strain to read the text.

Rather than two purple hues, gray represents the absence of completion.

  • neat answer!!!! – colmcq Apr 8 at 15:38

I agree with Mike's answer except that the title of the progress bar could actually be done so that it's on the same row as the percentage value, i.e.

enter image description here

This way you make the design even more compact and I think that was your main goal.

Then, where should you put the percentage value? I think putting it at the end (like in the first and third row of above example) is the way to go, but you could try out different position (in front of the title, in the middle of the empty space) to see if anything else makes sense.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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