Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Possible Duplicate:
How to build a budgeting interface (sum of items must equal 100)?

I need the user to be able to change the ratios of items adding up to 100%. Essentially, I'm talking about an interactive pie chart, but even if such a thing existed, it would probably not be very usable (especially with a large number of slices), or accessible.

I currently have a vertical series of 0-100% sliders (with adjacent text field readout, also editable), with a dynamically updating total below, labeled "must be 100%". The form cannot be submitted until the total is 100%. There can be up to 14 items in the series.

Can anyone think of something better?

share|improve this question

marked as duplicate by Patrick McElhaney May 19 '11 at 14:04

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
Related: ux.stackexchange.com/questions/6063/… –  Jan May 19 '11 at 11:42
    
I don't see the connection between this question and UX. –  Marian May 19 '11 at 11:53
    
Marian: it depends on whether your definition of UX includes interaction design. –  francois May 19 '11 at 12:49
1  
Jan: this one (linked from there) is even more relevant: ux.stackexchange.com/questions/3736/… (and includes the Photoshop gradient control Rahul suggested below). Some very good suggestions there, which I'm still digesting. –  francois May 19 '11 at 12:54
    
The demos here: buger.github.com/skill_weight_ui/# essentially answer my question. (They come from this question, ux.stackexchange.com/questions/3736/… which Jan's comment lead me to. I think I'd go for the "standard" version (with the "over 100%" warning), rather than one of the relative ones, as they effectively destroy data that the user might have wanted to preserve. I'd need to work on the affordances, as the slide behaviour is very hard to discover, and I'd also want to retain text fields for manual input. –  francois May 19 '11 at 13:09
show 1 more comment

3 Answers 3

Answer by @francois, as indicated above:

The demos here: buger.github.com/skill_weight_ui/# essentially answer my question. (They come from this question, ux.stackexchange.com/questions/3736/… which Jan's comment lead me to. I think I'd go for the "standard" version (with the "over 100%" warning), rather than one of the relative ones, as they effectively destroy data that the user might have wanted to preserve. I'd need to work on the affordances, as the slide behaviour is very hard to discover, and I'd also want to retain text fields for manual input.

share|improve this answer
    
I have to admit that this is pretty much the same as my existing solution, except for looking like bars instead of sliders, and also adding a bar for the total, which is useful visual feedback. –  francois May 19 '11 at 14:22
add comment

This is something I'm thinking about at the moment, so I'll be curious to see any other answers.

In my case, the user has a certain amount of money/credit/points/whatever to use up, and they need to allocate it between several different options.

All I've come up with so far is, as you've mentioned, a slider for each option. The only other thought I've had was to display something that looks like a progress bar on the screen that would display how much stuff the user has left to allocate, and would deplete to zero as they move the sliders.

But this doesn't particularly help with giving the user feedback on what options they've allocated while they're still in the process of doing it. I may try messing around with (tastefully!) changing the colour/size of the options as the user moves the sliders.

share|improve this answer
add comment

Have a look at the Google API. As well as pie charts there are untold other types of chart, plus code examples that show how these can be made to respond to user interaction:

http://code.google.com/apis/chart/

share|improve this answer
add comment

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