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?

  • Is this really an either/or situation? Seems like you could find a way to serve both populations of users--ones that want percentages, and ones that want the high level "ok / some concerns / critical" knowledge. Commented Aug 3, 2015 at 17:26

3 Answers 3


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).

  • Hi Mayo, Thanks. Sticking with the icons was my instinct as well. And they aren't expert users at all. Upon discussions with the team we are leaning toward only breaking down the current icon into two numbers as breaking it down into all the parts would mean a very cluttered UI indeed and possibly confuse the user from the task. However, a tool tip won't work on mobile. We are currently thinking of ways to make the data standard across mobile and desktop. Commented Jun 5, 2015 at 6:38

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


Why dont you do all of the above:

Graph with details:

enter image description here

or graph with sub-graphs:

enter image description here

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.

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.