Friday, August 3, 2018

interaction design - How to build a budgeting interface (sum of items must equal 100)?


I'm trying to build a visual web interface where users can distribute a budget over some (varying) number of items. For example, if the budget is 100 points, I might allocate:


50 points to 'Apples'
50 points to 'Oranges'

or:



75 points to 'Apples'
25 points to 'Oranges'

If the user wants to add a new category, something like this should happen:


30 points to 'Pears' 
60 points to 'Apples'
10 points to 'Oranges'

but without the 'jump' the allocation above would give if the points where just represented as a bar chart. I'm imagining a kind of audio equalizer interface where users can just move sliders around for each item, but I can't get the "math" right and feel like I'm missing something important. Here are the constraints:




  • I want all numbers to be between 0 and 100

  • I want the budget to always be satisfied (i.e, sums to 100)

  • I want users to be able to add/delete items to their 'cart'

  • I don't want the user to have to do any math

  • I'd strongly prefer that all slider movements are continuous (i.e., no "jumps")


Update: I have some prototypes for people to try out / vote on:


http://buger.github.com/skill_weight_ui/#




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...