Capacity available representation? Percentages or coloured icons?

Question

Currently, capacity available is represented using a single icon in green, yellow, or red (green = lots, yellow = some, red = low).

Due to API changes, there is an option to modify this data to show percentages.

My knee-jerk reaction is that the iconography is the superior representation because percentages are too much of an ask to the user to apply a value judgement. (I think I remember reading this once, but can't recall that I definitely did nor where.)

Additionally, there is an option to break down a whole into its parts, to show the available capacity for each remaining part. Where those would be different than showing the available capacity for the whole.

Again, my knee-jerk reaction is too much information is possibly not the best solution and that expanding the information available to the user might overly complicate both the UI and therefore influence user decision making ability negatively.

The context is retail transport.

Any thoughts on 1. percentage versus colours 2. expanding breakdown of information into parts versus whole?

Answer 1

ASSUMPTION: the users of this application are expert users (meaning that they frequently use the app as part of their job).

My first thought would be to present the icon as you're currently doing and making that icon clickable or, depending upon the amount of information, reveal a tool tip which allows users to see more detailed information.

ASSUMPTION: That it is important (as opposed to merely somewhat useful) for the users to quickly see and internalize that the available capacity.

If the users carefully examine each line (unlikely) as opposed to quickly scanning through the data (far more likely) then percentage numbers will be harder to pick up and distinguish than an icon which has three states (green, yellow,red).

Answer 2

Using color alone as a differentiation may not work for some users (e.g. users color blindness). Consider using another visual difference e.g. height difference (example 1) or make the green brighter than the yellow and the red darker than it (example 2) or perhaps add HIGH/MED/LOW (example 3) if you don't want to specify percentage (even though I think percentages are understood by most people).

Also, make sure you use ALT text for screen readers.

If there is a significance on judging based on fine resolutions (e.g. 80% vs. 90%), then you should show the percentages. If 67%-100% is all the same in your application, then you might not need to show the percentages.

If there is a significance for judging based on the parts, then you should show them, or at least enable expanding the result to show them (e.g. expand/compress all, expand/compress current), so that the user can make a fast filtering based on the overall results and then a specific choice based on the parts.

Example1 (height difference):

^{download bmml source – Wireframes created with Balsamiq Mockups}

Example 2 (brightness difference):

^{download bmml source}

Example 3 (added text):

^{download bmml source}

Answer 3

Why dont you do all of the above:

Graph with details:

or graph with sub-graphs:

You can use a bar with color and relative size to its container to quickly show the items capacity. Under that you can show the percentages for people who need to know the specifics. When you click (or touch on mobile) a panel slides down giving details for each of its parts (they still have both color icons and percentage). Since these are in a panel under the main bar the hierarchy will make it obvious that these are child parts inside the whole.

note: 1. ignore the quality of the paint drawing. 2. the numbers are just representation, you'll have to decide if you want to show % remaining, or % used, do proper math unlike my example, etc.