6

I'm designing a budget planning tool for sales reps. The reps must spread their budget across 5 different categories of spend, three of which have a minimum spend allocation. The organization would like to see reps spend more in the categories with minimum requirements.

My initial solution has been to implement a progress bar to each category to gamify the system. As the user allocates budget, the bar for that category fills up. The minimum marker is just beyond the half way point of the progress bar, leaving room to encourage additional spend. The issue is that I have an unknown maximum spend.

How do I create a progress bar with no maximum?

Improve this question
6
  • Presumably the user has preferences in allocating budget to things. Hence the ability to do this. Is gamification in an app really going to outweigh the real-world benefit to them of allocating the budget to the category they want?
    – user31143
    Oct 28, 2016 at 16:11
  • That's what I'm going to find out! It's the same idea of gamifying fitness, nutrition, homework or anything the user doesn't really want to do but should.
    – Sara Scheuermann
    Oct 28, 2016 at 16:55
  • Eve: Online is a game that exploits this mechanism better than any other I've seen. However... it's got a bit of a steep learning and entry point. But well worth it. This is the most successful of this genre of game, too. A good deal of that success, as you'll see when you play it, comes from getting the process of progress better than just about any game before or since. And it's as you require, with nuance to the balance and directions one can take with "expenditure" of effort, learning and resources. Perhaps one of the most influential and significant UI/UX designs in the past 15 years.
    – Confused
    Oct 29, 2016 at 8:45
  • 1
    The real key to success here, from the organisations point of view, is to provide actual rewards for making the desired choices. But, like rich old men, most organisations will never concede that WIIFM is important to everyone, not just themselves. So good luck with that. The model to follow, charity dollar matching. For every unit over a certain amount allocated in the 3 desirable categories, give a bit more for spending on other categories. Every user will attempt to extract the most from the system, this way, and the outcome can be engineered to happen as desired.
    – Confused
    Oct 29, 2016 at 8:49
  • 1
    Why not default to the minimum value, then if the user changes it to less, tell them there's a minimum? To keep your progress bar you can make the minimum value the left value with an unspecified max, which programmatically would be calculated according the the reps budget
    – Steven
    Oct 29, 2016 at 20:18

5 Answers 5

Reset to default
2

You could try using a logarithmic progress bar. A linear progress bar always advances at the same speed, but a logarithmic one fills quickly at first and slows down as values increase. This way you could either emphasize the progress for the first points towards the maximum value (maybe the currently highest "score" in the system?) or create a progress bar with an infinite maximum value that never reaches 100%.

Improve this answer
2

If the budget is known beforehand, would something like this work? enter image description here

Which would work as follows:

  • in each category, the user assigns a percentage of the budget (which solves no-maximum issue)
  • some categories have a minimum percentage (which can be calculated once the budget is known)
  • users cannot slide to the left of minimum
  • sliding will change amount assigned (on the right on each line)
Improve this answer
4
  • You tricked me. I thought this was a new question because I saw it at the top of the list ;)
    – maxathousand
    Jul 28, 2017 at 16:34
  • Well, it was still unanswered, as I saw it too at the top of the list today. I like your answer too. Hope our answers help :)
    – wintvelt
    Jul 28, 2017 at 16:37
  • You should more explicitly explain how this interface encourages (not just allows) going above the minimum. I see that the default values are set above the minimum, which is a form of encouragement. Though I feel like there must be ways to encourage allocating to those categories even after the user drags the slider to the minimum value.
    – Rory O'Kane
    Jul 28, 2017 at 20:37
  • Yeah, there are surely ways to encourage going above the minimum, like red-green coloring, incentive messages etcetera. My answer specifically addresses the question in OPs post "How do I create a progress bar with no maximum?". And only minimally the incentivize to spend more than minimum.
    – wintvelt
    Jul 29, 2017 at 8:56
2

Motivate

This reminds me a lot of how workout apps work. Obviously, a workout app should inspire you to continue working out, even if you've already met your goals.

Apple solved this with a circular graph. Once you reach your goal, the circle is complete, however you are free to workout longer to loop the graph around as many additional times as you wish.

Additionally, using casual language to provide encouragement makes the user feel like they actually are doing a good job. "You doubled your Move goal. Keep it up, Susie!" feels a lot more sincere than a simple "Progress: 200%" data point.

Apple watch workout goals

Improve this answer
1

What if your 'progress bar' was implemented as a 'milestone bar', so that there is no established top end, but a moving milestone indicator (or series of indicators) that appear above the bar?

Improve this answer
3
  • I'm having a hard time imagining how this works. If the bar is a certain size, won't a bar that is half filled in when set to, say, $100 be perceived as having a maximum of $200?
    – user31143
    Oct 28, 2016 at 16:12
  • 1
    Yes, that's the challenge I'm facing, because while I have a set minimum value I don't know what the maximum is and I don't want to imply it's something it's not. So perhaps a bar is not the right visual language.
    – Sara Scheuermann
    Oct 28, 2016 at 16:58
  • You don't have to label the top end, though you could represent the value by way of tooltip. Just keep some extra unfilled space always showing at the far end.
    – Lynn
    Nov 11, 2016 at 23:26
1

Could you draw a red or yellow progress bar until they reach minimum and then switch to gold stars or something as they exceed minimum? As there is no upper limit I cannot see how you can always draw a sensible progress bar.

Eg. Assume minimum 200.

When at 0. Draw 0% in red

When at 30. Draw 15% in red

When at 140. Draw 70% in yellow

When at 198. Draw 99% in yellow

When at 200. Draw one gold star

When at 400. Draw two gold stars

When at 3000. Draw 8 gold stars

You can scale the rate of gold stars so that 1 to 2 might only be 200, but getting 5 stars needs thousands.

Humans also like to compete, so perhaps also either show other users results, or at least tell user where they are (5th best) compared to others. But remember to handle different budget amounts.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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