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?

  • 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 '16 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 '16 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 '16 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 '16 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 – shahar Oct 29 '16 at 20:18
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%.

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)
  • You tricked me. I thought this was a new question because I saw it at the top of the list ;) – maxathousand Jul 28 '17 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 '17 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 '17 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 '17 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

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?

  • 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 '16 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 '16 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 '16 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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