31

I’m currently working on a budget management mobile app. The app has a screen which shows a list of categories, and for each one the following information is displayed:

  • How much spending money the user has allocated to the category
  • How much money was actually spent the category this month
  • An indication on whether he has spent more or less then the allocated amount

The purpose of the screen is that the user can see an overview of all the different categories, and realize whether he/she is overspending (or underspending) on any of the categories on a given month.

A very rough illustration:

A very rough illustration

What I’m looking to add is some sort of indication of the time elapsed since the beginning of the month, since, if we are nearing the end of the month and the user hasn’t used up all his budget, it means he is close to reaching his goal of not over-spending, so it should be indicated as a good thing.

On the other hand, if it is just the beginning of the month, even though the budget limit hasn't been reached yet the month has just started, so I'm thinking the indication should be different (so the users still know they need to be careful to not overspend for the rest of the month).

I’d be happy to get ideas as for how to incorporate such information on the screen, keeping in mind I’m doing a mobile version only so screen estate is obviously limited.

Thanks!

Improve this question
4
  • 9
    Side note: Not everyone gets paid at the end of the month, so make the payday configurable (ideally, also the payment frequency).
    – Erlkoenig
    Dec 11, 2019 at 5:45
  • 9
    Note that this can be very different for different categories. Groceries would be more or less linear to the progress of the month (in most situations). For rent, it's completely different as it always goes from "nothing spent" to "everything spent". For clothes, it may differ a bit per person, but in general running out in the first half of the month just means you can't buy new clothes during the second half, which generally isn't a problem. I don't think there's an answer that is as generic as you seem to want it.
    – Jasper
    Dec 11, 2019 at 12:43
  • Following on from @Jasper, one way of measuring time might be counting weekends - if that's when the user can get to the shops. Thus having spent 40% of your budget on Friday 13th is bad, but on Saturday 14th is good going. It's going to be hard to match a decent fraction of use-cases without myriad options.
    – Chris H
    Dec 11, 2019 at 16:30
  • What about a "money left" or "balance" category?
    – henning
    Dec 13, 2019 at 10:27

4 Answers 4

Reset to default
110

Present their current position in time and budgets together, as bar graphs.

This will make it clear that they are either over or under budget for where they ought to be at this point in the month, or over their entire monthly budget.

Mock up of budget as bar graphs

Improve this answer
11
  • 30
    Those are some expensive plants! ;)
    – Lightness Races in Orbit
    Dec 11, 2019 at 0:25
  • 7
    +1 since this conveys a lot of information in a small amount of space, including prorated amounts. The black numbers in the center really pull focus, though, and you have to look a little harder for how much you actually spent. It might be good to swap the estimated targets with the real amount spent.
    – Nathan Rabe
    Dec 11, 2019 at 15:30
  • 6
    I like this, with two caveats: the items that are over budget still only extend to the right edge. There needs to be an overflow region to the right to really show that they are over, not just maxed out. And the items that are under budget but ahead of the curve should not be colored in a way to indicate any problem. For instance, I might have a $400 clothing budget and spend $399 on the first of the month, but I'm only planning on buying clothes once that month. No problem! Let the fact that it is ahead of the day of the month be the only thing that communicates that, not orange color.
    – David Conrad
    Dec 11, 2019 at 22:44
  • 2
    @Chronocidal Clothing was one of OP's examples, and I only go clothes shopping a few times a year at most. A phone bill is another example of a monthly bill. There are lots of discrete expenses, and some continuous ones, like food or entertainment. You should be able to tag expenses as discrete or continuous. They shouldn't all be treated as continuous.
    – David Conrad
    Dec 12, 2019 at 12:03
  • 1
    Perhaps budget items need an option for whether they should be treated as discrete lumps (e.g. rent) or evenly spread (food, though a bulk shop somewhere cheap for non-perishables can be a good strategy for saving money). Entertainment could go either way - someone may regard going out as a once-a-month treat or may be out every night. (@DavidConrad as well as maxathoudand)
    – Chris H
    Dec 13, 2019 at 9:42
15

Use a prorated amount to determine whether spending is under or over budget.

For example, a $1,000 grocery budget works out to around $33 per day. Multiply that by the current day of the month, and use that amount to determine if the user is over budget (before they've reached the full amount).

This will allow you to provide accurate feedback all through the month without needing to train the user that different colors are good or bad at different times. It also means you won't show spending $999 on the first of the month as "good" or "neutral" when that behavior will very likely lead them to being over budget very soon.

Additionally, this information can be used to create graphs that show when spending crossed the line into being over budget. (Though probably on a different screen.)

Graph showing actual amount spent on groceries compared to the target budget.

Improve this answer
3
  • 3
    I use this solution for a business budget, but for a personal budget, it's a bit 'technical' and it's very space-consuming for the OP's use case (multiple budget lines and probably a 'phone screen).
    – grahamj42
    Dec 11, 2019 at 7:19
  • 2
    I actually think I'd like this better than my suggestion! It's a two-dimensional approach that's able to show your month's historical performance rather than just the one-dimensional approach showing only where you are currently that I've suggested. What'd be really cool though, is to tap on one of my bar graph budgets, and it expands into your line graph, showing all of this historical information.
    – maxathousand
    Dec 11, 2019 at 14:26
  • 1
    Using both this @maxathousand 's solutions may be useful to the user. Max's is shown as a summary to the user. Then when they tap on one the rows, it swaps to this view to give the details of how that bucket was spent. If the user can put a description on each spend, then tapping on each up-step can show a pop-up with the description and and value of that spend.
    – CSM
    Dec 11, 2019 at 19:25
1

A progress bar should do the job in this scenario.

I would also suggest to change the font used for the date since a finance app must use a font that fits well with numbers. Here the 9 has a different base line. Roboto is good for example but not original. enter image description here

Improve this answer
1

As a possible extension to maxathousand's excellent answer, I've tried to extend the idea to cover forthcoming expenses that are planned/committed for later in the month but have not actually been spent yet.

The following shows the situation where $30 has already been planned to be spent, but has not actually been spent yet. Of the full-month budget of $240, this leaves $210 to be tracked. The "on-track" expenditure is now $140 (two-thirds of $210), so an actual spend of $128 would be $12 below that target:

enter image description here

Some design thoughts:

  • You could simply reduce the full-month budget by the planned expenditure (effectively making it $210). I have two problems with this: the first is that it hides the fact that the money is going to be spent, making it easier to be complacent about one's spending. The second objection is that – depending on the degree of commitment to the future spending – it may be possible to "un-plan" the expenditure if you notice you are going to go over budget. This wouldn't be as obvious if the overall budget were simply reduced.

  • Another alternative would be to add the planned expenditure on to the end of the "what I've spent this month" bar (the dark-green bar in the example above). This is probably more a matter of taste, but to me – because it hasn't been spent (yet) – it shouldn't be added to the "what I've spent" bar. Also, I think it might muddy the clear "am I under or over the 20-day line" effect that maxathousand's original design creates. (In the example above, the cross-hatched box would straddle the $140 marker, making it less obvious whether you are under- or over-budget.

Some notes on how to determine the size of the "what I've spent" bar:

  • To keep things consistent, the "target expenditure" marker ($140 in the example above) must be in the same physical position as other categories of spending.

  • The amount of the target expenditure is calculated taking the planned expenditure into account: $240 budget - $30 planned = $210 remaining for the month. In this case, £210 * 20 / 30 = $140.

  • The clarity of maxathousand's original comes from whether the end of the "what I've spent so far" bar is to the left (=good) or right (=bad) of the 20-day line. Therefore, the size of the dark-green bar is determined relative to the $140 point. In the example above, it is 128/140th of the 20-day line. An expenditure so far of $140 should just touch the 20-day line.

  • When the planned expenditure turns into actual expenditure, the cross-hatched box would be removed and the dark-green bar extended as in the original.

  • One potential problem with the above is that if we get too close to the end of the month with planned spending remaining, the target-marker ($140) may clash with the "$30 Planned" legend. If so, it may be necessary to merge the information into the legend below the line (e.g. "$128 + $30 of $240").

Improve this answer
1
  • 1
    It adds confusion rather than simplicity as I spend time trying to understand it.
    – Erhan Yaşar
    Dec 12, 2019 at 20:16

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.