Does anyone have any advice or examples of what to do with a progress bar that exceeds 100%.
I am working on a progress bar to indicate the status of an item. At 100% a deficiency is created for someone to take action with the item. Because the items are time sensitive we must show how far over 100% the item has gone.
What would be the best way to display this information?
This mockup maybe confusing because I was exploring styling options.
The same situation is when you display values off the scale. In most cases the most important thing is to show the user that the values are exceeded. Usually exceeded values aren't represented proportionally to the columns lenght. You could see how the problem is handle by personal finance apps, which have budgets functions - in these apps we need to communiacte user that the budget is exceeded.
This is what was inside my mind right now, maybe it isn't up to marks:
The reason behind this proposed 150% max value is because the data can be any number of percentage, even 1270%. Without the limit, there is a risk of that bar chart being render as one long bar, and make it not uniform with others bar chart around it.
Since generally the purposes of dashboard is to able the user to understand the information at one glance, we will set the max value up to 150% (...and it's up to you how far you want to put the limit) to make all bar chart in uniform size. Anything beyond 150% we consider as abnormal.
So if the user seeing any figure in solid red background, they know this bar need some extra attention to it.
The situation is not very clear, but still, since there is not more than 100% because after that what happens is a change of status, you should change the design.
Use the progress bar up to a 100%, and after that, replace the bar with an icon or a text, something that is relevant and understandable for your users and that transmits the idea that you want to show.
If anybody can interact with the item before 100% but not after, add a text indicating that.
The icon or text that would be after the 100% mark can also have a standard progression of colours, like green, yellow, orange and red to indicate relevance or urgency; although that is something that you have to judge.
After using colours, if still necessary, you can add a blinking effect, but I'd say that if a process passes thought than many changes unattended then it's not very important, there is nobody to take action or the measurement system is flawed.
Another option, is to reduce intensity of the other progress bars, reduce the saturation or add an alpha effect that reduces visibility, but still allows the data to be read, that way, you intensify the relevance of the one that has passed the 100% but the others are still visible.
One suggestion would be to have 2 designs: in-range (0-100) (eg. green) and out-of-range (100-200) (eg. red)
When the item is in-range, display one style meter.
Once the item reaches 100% replace the in-range meter with the out-of-range one.
Ensure your out-of-range meter is significantly different from your in-range meter and you will be able to communicate this information in an efficient use of space.
In "real life", pressure gauges, temperature gauges and "rpm meters" often have a indicator for a limit which should not be exceeded. Often, the unit of measurement will be the "native unit" (degrees temperature, psi, pascals, revs per minute), but sometimes they are also carry percentages (I have encountered one voltmeter which has markings of 80%, 100% and 120% - anything below 80% and above 120% was apparently so far out of the question that no markings exist).
Typically, anything above the rated 100% figure has a red sector or arc, so the user can easily see when the needle gets past the red line.
The concept of "redlining" (or, rather, avoiding redlining) should be familiar to most car drivers.
A round gauge (like the rpm meter in a car) will have a hard stop at some point; the needle won't go over, let's say 130% or so. A temperature gauge in a car will often be designed that 100% is in the center, so it could go (visually) up to 200%. An analog/digital combination can be used to give the quick visual reading of below/above 100%, with the increased accuracy and range of a digital readout.
The Area51 for staging new Stack Exchange sites has some progress bars that may be relevant.
A site in staging goes through three phases - definition, commitment and beta. Each phases has it's own progress - a set of metrics and goals to be met. So each phase has a progress between 0 and 100%. After 100% in a phase is reached, the site moves into the next phase - so progress continues. The overall state is combined into a single progress bar which looks like a single bar where 'complete' means progress reached 100% in all three phases.
It seems that the question also talks of different phases. All you need to do is define the metrics for each phase, and how many phases you require.
For example (imaginary):
My suggestion...
If it needs explaining, it's not good enough :)
Is a progress bar the best way to represent this data? How far past 100% can the values go? Is it infite or fixed.
If the potential post-100% value is not infinite then I would suggest extending the progress bar tick-marks or indicator outside of the original bar and change the color to indicate that it has surpassed the allowed time.
Here is a quick mock-up:
