Let's say I have a web app that offers widgets to be used by a user. A user can deplete widgets to zero, at which point, they would be shown that they need to buy more in one or more packs of 50. From a UX perspective, how can I show this visually?

I considered doing something like:

sample image

But I want to also make it clear that the user can buy as many packs of 50 as they need (no limit). I like the concept of the meter in that it shows that they are running low, but I'm having trouble with the upper bound.


Update based on response:

enter image description here

  • would prefer having the earlier option.
    – NB4
    Jun 14, 2017 at 4:52
  • Like with the meter? If so, what would be the upper limit? Jun 14, 2017 at 13:38

2 Answers 2


You are following a subscription model which allows the user to buy something and use it until the subscription ends. The general nature of a subscription is to either be once-for-life or for a specified period of time after which you'll be required to re-subscribe.

There's no limit on number of subscriptions until explicitly mentioned so I don't think that's something you need to worry about being represented in your fuel bar.

I like the representation you've shown and I also like the fact that you've shown the "Purchase more" button. I'd only ask you to change the color from a positive, to mid to a negative one to represent the urgency of the need to refill.

PS: I really like the SE way too as it's simple and you can add the "Purchase more" button where the "Flag Question" button is -> SE remaining flags view

  • This is a good suggestion. I posted one way it could look to my question. Will let this stew a little longer before accepting. Jun 13, 2017 at 15:17
  • I think the button is fine as is, but I would change the bar (or circled number in second image) to yellow and then red once low enough.
    – DasBeasto
    Jun 13, 2017 at 15:57

Do you want to show purchase more everytime? Instead, you can show Purchase more after the user has 10 widgets left. As Shreyas already said regarding the color you can define three color levels.

Red being low level
Orange being mid level
Blue/green high level

In addition to this, you send the user with notification option.

  • Yes, I'd rather not limit anyone from purchasing at any time. Jun 13, 2017 at 23:52

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.