8

I am working on an application that needs to show users their currents status / progress in performing a task on a number of items. There are three states that each item can have:

  1. New (blue) - Item has not been seen or processed yet
  2. Good (green) - Item has been processed in the past, and has no pending task associated with it
  3. Due (red) - Item has been processed in the past, but has a pending task associated with it

For a quick overview of collections of these items, a multi-part progress bar is being used. The image below shows 4 such possibilities for these bars.

Progress bars

My concern is that some of the colours don't work well next to each other - especially for colourblind people.

What can I do to make this easier on the eyes, and more accessible?

7
  • Easier on the eyes: just tone down the colors to less saturation, essentially making them more "pastel" like. Feb 1, 2013 at 15:50
  • Is there a particular reason that they are so small? is this for mobile? Feb 1, 2013 at 16:58
  • 1
    Tbh, I'm not too fond of these progress bars. It has taken me about 2 minutes to work out and convince myself I know what's going on. From my interpretation, the individual bars do not represent progress at all -- if I processed a new item, I would expect the 'blue' bar to expand. In fact, the blue bar contracts, which is against my instinctive expectations. I would reorder this bar from right-to-left and remove the blue bar -- I'd have whitespace to the right instead (with a bounding box).
    – Brendon
    Feb 1, 2013 at 17:34
  • @Charles yes, they are for mobile use, and so adding much more information isn't possible.
    – JohnGB
    Feb 1, 2013 at 17:57
  • @Brendon it isn't necessary that it is easy to know what they are or how many there are in each queue by looking at them. More detailed info is shown elsewhere. The whitespace is an interesting idea, but I can see a few problem areas in the design with it.
    – JohnGB
    Feb 1, 2013 at 17:59

3 Answers 3

7

You are correct that color alone will be problematic especially with red and green side by side.

A good nested progress bar needs elegant answers to the following questions:

  1. How do I qualify the types in the array (new, good, due)?
  2. How do I quantify the types in the array?

Color alone is an inadequate solution for either need because you have no idea how many items are within each type (you can only measure roughly what the ratio is compared to the others).

Annotated Segmented Progress Bars

One option is to add some additional visual cues and data to the bars so that the color is a secondary or tertiary indicator rather than a primary. In this case I used a text label to display the type and then a disc with the type item count.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If the quantity of a type is only 1 or 2 and the width of the nested progress bar is not big enough to fit the label and count moving some the annotations outside of the bar itself might be an avenue worth considering.

mockup

download bmml source

Here are some other real examples of the same idea with slightly different implementation:

enter image description here

source

enter image description here

source

4
  • The intention here is to give a quick visual overview. The detailed information is shown elsewhere. How would you handle it if there are 2684 new, 18 good, and 22 due? The text wouldn't fit anymore as you have it now.
    – JohnGB
    Feb 1, 2013 at 17:47
  • With a segmented progress bar with that dataset even without annotations you would have a 200px wide bar with 198px blue pixels 1px green and 1px red. I would put that info in a caption below or possibly have a hover/click to view detail tooltip of some type. Feb 1, 2013 at 17:50
  • I suppose I would ask the question what is the user trying to understand by looking at these summaries. Percent completeness? Number of items? If you have a stack of bars that proportionally equal 100% but one bar has 15 total items and the next one has ~3000 do they care/need to know that the two are massively different in scale? Or just that one is in good shape and the other has a lot to do to make it all good? Feb 1, 2013 at 17:52
  • it isn't possible to use a hover or click here as the entire area that the bar is in is active for something else. I like the examples though, thanks.
    – JohnGB
    Feb 1, 2013 at 17:52
3

How about something like this?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Grey is done

Moving texture indicates pending tasks/currently processed part

White is "missing" stuff, which needs to be processed

2
  • Interesting idea. How would you do it if the bars had to be as thin as those I have shown, or if one section is tiny compared to the others?
    – JohnGB
    Feb 1, 2013 at 17:49
  • If animation is a possibility here, you could make the "done" grey, the todo white and the "pending" pulsating or fading from white to grey. I guess simply using a brighter grey for the mid part would work, too, for smaller bars. but the animation suggests "something is going on here" and a brighter grey would suggest "this seems not really done here"
    – K..
    Feb 1, 2013 at 18:05
1

Take a look at JIRAs progressbar:

JIRAs progressbar

Colors work well and there is clear indicator which color means what. The numbers here are more clear than having them inside the progressbar like in Charles' answer, better suitable for mobile devices. Also, if you have zero items in one category, you can see that immediately as well from the number.

Your Answer

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

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