2

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?

Improve this question
1
  • 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
    Commented Apr 9, 2019 at 14:15

3 Answers 3

Reset to default
8

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.

Improve this answer
1
  • neat answer!!!!
    – colmcq
    Commented Apr 8, 2019 at 15:38
3

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, e.g.

Compact Space Progress Bars

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.

Improve this answer
2

Have look at modern mobile phone, they invented round progress bars

enter image description hereenter image description here

In your particular case you may go with filled pie indicator and text nearby. Most of the time it will take less space than a title label.

upd: enter image description here

Improve this answer
2
  • 1
    Those are lovely, but I'm not sure they save space, unless it works to use vertical space to save horizontal space. For my situation, I'd have to try and see.
    – Joshua Frank
    Commented Jan 23, 2020 at 19:09
  • this is what I meant
    – ADOConnection
    Commented Jan 23, 2020 at 22:24

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.