Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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:

mockup

download bmml source

mockup

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.

share|improve this question
add comment

7 Answers 7

up vote 10 down vote accepted

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.

One of the progress bar from Kickstarter

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

share|improve this answer
3  
I agree that a progress bar is the wrong metaphor. –  Nicholas Aug 2 '13 at 8:03
add comment

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:

enter image description here

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

Android example

share|improve this answer
    
Can you explain what it is that android did and why it is suitable to this situation. Just saying 'someone else did something and here's a screenshot' isn't really answering the question. –  JonW Aug 2 '13 at 8:12
    
hi JonW, Thanks, as suggested, i have updated my answer. –  Awesh Aug 2 '13 at 8:30
    
That's a better answer now, i've upvoted and I also added your original image back in as it's a useful example. There's no problem including screenshots within answers, providing your answer isn't only a screenshot (as this answer previously was). –  JonW Aug 2 '13 at 8:33
    
Thanks Jonw, :) –  Awesh Aug 2 '13 at 8:34
    
What if their bandwidth limit changes? –  DesignerGuy Aug 2 '13 at 19:36
show 1 more comment

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

Use color to communicate that they have exceeded their limit.

mockup

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.

mockup

download bmml source

share|improve this answer
2  
This is exactly what @TylerWilliams suggested three hours before your answer! –  Andrew Leach Aug 2 '13 at 7:46
6  
But Tyler didn't do a pretty picture –  Nicholas Aug 2 '13 at 8:01
2  
I'd think anything pleasantly designed should work just as fine if the colors are stripped away, like a red light which relies on position as well... with this there's no visual difference between 99% and 999% if you can't tell it's red ^^ –  Oskar Duveborn Aug 2 '13 at 9:32
add comment

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.

share|improve this answer
add comment

I think of "exploded progress bar" solution. The metaphor of "overload and breakthrough" is used.
enter image description here
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?

share|improve this answer
add comment

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
share|improve this answer
add comment

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:

Data Usage Meter

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.