9

I have max limit (in this case $180) and progress indicator how much was spent ($50)

What is the best/effective way to show user that he/she

  • Has max limit $180

  • Spent $50

  • Can spend $130 more

It seems to me progress bar is not right solution because it must indicate Discharge / Spend / Waste not Progress / Fill

May be it's more like UI question than UX but main point is how to represent something that is spend/discharged. Example would be: Car fuel indicator, it goes down (from right to left, anti clockwise) when we burn fuel and goes up when we fill fuel tank.

For new viewers: Original post was edited and some comments may be differ from question.

enter image description here

Improve this question
3
  • 1
    If your concern is that you want to indicate "spent" instead or "progress", try flipping the colours around. Also, be careful with labels aligned with progress, easy to get overlap issues.
    – musefan
    Commented Feb 19, 2021 at 13:02
  • Sorry to point this out, and how to indicate spend limit is clearly not what you're actually Asking. To indicate a spend limit, you simply Post a slidey graphic, as yourn above, showing "Current Limit $180" and that's all. A major part of the "problem" is that you want to pay attention to $180 not being the main balance You might well have $500 of $50,000 main/total balance and please explain what that has to do with your set limit of $180 for a day, a week or whenever?
    – Robbie Goodwin
    Commented Feb 21, 2021 at 0:50
  • I agree question was little bit confusing so I edited original post and removed part of 1000$ main balance, it's nothing to do with problem, question is how to indicate something that spent not gained. when you accumulate something progress bar is perfect but for spend i think it should indicate discharge, its more like UI question how to represent it, Good real life example is: Car fuel indicator, when we burn fuel it's go down, something like that.
    – dvalish
    Commented Feb 21, 2021 at 6:36

4 Answers 4

Reset to default
4

Your progress bar isn’t bad if indeed the user’s task is to “push” the bar to the max. But is that really the users’ task? Maybe the user’s main concern isn’t spending to the limit but rather keeping enough for future expenses. If they’re trying to decide if they should buy X, that would be the main concern. In that case, maybe you should emphasize amount remaining, not amount spent.

In either case, it seems invoking a physical metaphor is the solution. In the case of dollars, you could represent the amount as a stack of bundled dollar bills. A simple notional drawing may be sufficient and allow pretty precise reading:

Bills stacked like a bar graph

However, your user may need a more realistic representation of cash, maybe even a 3-D drawing of the stack so they can see the faces.

If your users are really concerned with amount spent, then you can represent that as “ghosted” bills:

Now with faded bills and label for amount spent

Improve this answer
4
  • I liked your analysis so much, but everything is much easier i don't want to emphasize nor spend nor left money i just want to nicely (I mean do good ui but not over ux) represent chart with all 3 data. 1. Limit 2. Spend 3. Left I made research i couldn't find chart or bar where it was represented with good ui/ux
    – dvalish
    Commented Feb 19, 2021 at 15:45
  • 1
    Best real life example would be if poker player went to casino with 1000$ and sad i don't want to lose more then 400$ today and set limit. During the play he wanted to check his limit balance
    – dvalish
    Commented Feb 19, 2021 at 15:48
  • How much left, or how much spend its more like half empty/full glass of water for me.
    – dvalish
    Commented Feb 19, 2021 at 15:58
  • 1
    If you're looking for an existing graphic element/ control for an app, have you considered a stacked bar chart? My second illustration is basically that with a physical metaphor overlaid. You can use a dark bold color for remaining, light faded color on top for spent, and total height is the limit. You can have multiple days/ weeks/ categories side by side for comparison.
    – Michael Zuschlag
    Commented Feb 19, 2021 at 17:47
10

Ignoring there's missing data at the image of the question, the representation of the figures is actually a past-present-future diagram where:

  • Past = money spent
  • Present = money to spend
  • Future = total money

What leads to seeing the graph as a progress bar is that the numbers are linked to the diagram. Isolating the figures from the representation as a fixed info avoids interpreting it as a progress bar. In this way, if the bar is necessary, it can be shown as an approximate preview of the data advance over a total.

enter image description here

Improve this answer
2

If the concept of the progress bar doesn't work for you, that may be because it is showing an increase instead of decrease. Is it an idea to turn it around?

My attempt:

enter image description here

A difficulty is to show the proportion of the day limit opposed to the total amount without giving the impression of it being a percentage. The gap/zigzag line was the first thing that came to mind.

Not my finest drawing but I hope the idea is clear ;)

Improve this answer
1
  • It could be progress bar but it's not correct with my opinion. Imagine if car fuel indicator was increasing when driving car. Time problem is solved by tabs i have 3 tabs with 1 day, 1 week, 1 month and each tabs represents new progress bar with new data.
    – dvalish
    Commented Feb 19, 2021 at 16:35
0

Perhaps a pie chart would work?

enter image description here

(source: jsfiddle with Google Charts)

Alternatively, you could make the progress bar thicker and display both the 50 and 130 inside the bar.

Improve this answer
3
  • It's not really what i want. I may have 1000$ in total balance but set limit 180$ for 1 day
    – dvalish
    Commented Feb 19, 2021 at 12:58
  • 3
    Where is that 1000$ coming from? It's not in your question ...
    – Glorfindel
    Commented Feb 19, 2021 at 13:00
  • Right i must edit post
    – dvalish
    Commented Feb 19, 2021 at 13:01

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.