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: