Showing excess usage in a progress bar

Question

I am working on a web app and would like to display the amount of transfer (bandwidth) that the user has used for that billing period.

They are given a certain amount of bandwidth per billing period. There is no hard limit on the bandwidth and the user simply pays for any extra bandwidth used.

One of the things I would like to do is to provide a progress bar to show the user how much they have used.

In cases where they have not exceeded the limit, it's a pretty easy case with just a simple progress bar:

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

However, how do I display excess usage once they have exceeded the limit?

I can think of 2 options:

^{download bmml source}

^{download bmml source}

With the first option, since the excess amount can extend horizontally infinitely, it can break the layout as horizontal space is limited.

With the second option, it is misleading as it feels like the excess amount is part of the 100%.

What are some other ways to display excess (more than 100%) in a progress-bar like widget?

Update Thanks to everyone for the great answers! Some things that I must apologize for not being more specific:

• Excess usage isn't a "bad" thing.
• The usage limits are on a monthly basis, so while Awesh's solution is nice, it isn't suitable here.

I have selected Aditya's answer as it suits our use-case the best. However, I must stress that all the other suggested solutions are also very good for this question if the constraints are a bit different.

Answer 1

I like the solution by @DesignerGuy which aim to give visual cue that something is wrong coupled with smaller textual footnote to describe the status.

Websites like Kickstarter takes similar approach when it comes to indicate funding progress vs goal.

Regardless of your choice, IMHO progress bar is not the best way to accurately depict ongoing process without hard limit.

Answer 2

You can display vertical graph to display bandwidth limit with usage. you can have multiple vertical lines/graph for each billing cycle. display green graph till the acceptable limit and red graph to display excess data usage.

here is an example:

Android already take this approach, so here is an example.

Answer 3

If you use a progress bar, I would do it like this

Use color to communicate that they have exceeded their limit.

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

• Pro: Clearly communicates they are over their limit

• Con: Doesn't visually communicate the weight of how much they are over.

All in all, the main goal is to get their attention that something is wrong.

---

If you have more room for a detailed view, try a bar chart

@Awesh offered a good solution for a more detailed view. The nice part is that is more clearly shows how much they went over by. This is good if you are charging per X GB over.

^{download bmml source}

Answer 4

I would suggest when the user goes over their alloted bandwidth that you fill the bar up completely and then change the color of the filling to red (which inherently indicates danger!). Next to this text, I would place the percentage of bandwidth used in bold (and red if you fancy) and then additionally add a (?) next to the percentage with the styling of a hyperlink. When the user clicks the hyperlink it should explain to them the situation. If nothing needs to be explained, feel free to ignore the last suggestion.

Answer 5

I think of "exploded progress bar" solution. The metaphor of "overload and breakthrough" is used.

The advantages are:

• needs small amount of fixed extra-space
• visually distinct even without colors
• easy to implement (just static image)

Besides red color coding (which indicates danger) could be wrongly understood by users, like: are any punishment or sanctions would be applied to me when I am at red (prohibited) zone?

Answer 6

I'd put the excess number (in GB and/or $) to the left of the completely filled progress bar. There's no problem with the progress bar itself. That indicates how much of the pre-paid allotment is consumed. If it breaks out the right side, you're right that you can't continue the bar there, but it is the logical position to put the number.

If you put a reasonable header above this field, e.g. "Excess charges", you can even display the number 0 if the progress bar is still filling up.

/--------------------\ Excess charges
|====================|  2.1 GB
\--------------------/  $ 5.23

Answer 7

You could create a progress bar (or gauge) that has extra space at the end designated for excess values. In other words, 100% usage doesn't completely fill/empty the meter. As an example, here's how Cox presents Internet bandwidth usage to customers: