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:
- New (blue) - Item has not been seen or processed yet
- Good (green) - Item has been processed in the past, and has no pending task associated with it
- 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.
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?
Answer
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:
- How do I qualify the types in the array (new, good, due)?
- 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.
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.
Here are some other real examples of the same idea with slightly different implementation:
No comments:
Post a Comment