Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Easier on the eyes: just tone down the colors to less saturation, essentially making them more "pastel" like. –  Marjan Venema Feb 1 '13 at 15:50
    
Is there a particular reason that they are so small? is this for mobile? –  Charles Wesley Feb 1 '13 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 '13 at 17:34
    
@Charles yes, they are for mobile use, and so adding much more information isn't possible. –  JohnGB Feb 1 '13 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 '13 at 17:59
show 1 more comment

2 Answers 2

up vote 5 down vote accepted

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

share|improve this answer
    
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 '13 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. –  Charles Wesley Feb 1 '13 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? –  Charles Wesley Feb 1 '13 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 '13 at 17:52
add comment

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

share|improve this answer
    
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 '13 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 '13 at 18:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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