What sort of user interface would you use for this? [closed]

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 years ago.

Improve this question

I'm trying to make a user interface that would do the following but I'm clueless as to how to do it.

The problem is this, I want to let people allocate a percentage of their account balance to different thing, say you want to allocate 40% to rent, 30% for savings and 30% to everything 开发者_如何学编程else

How would you let people choose the percentage between these things? the problem is the total percentage will have to be 100% all the time, so say you want to put 3 textboxes on the page each indicating the ratio,

If the user chooses 80% for the first one and 20% for the next one, then the last one must remain 0, it's an awkward user interface and considering how little attention Internet users give to the pages the browse, I don't think anyone will fully understand and use it...

I was thinking about sliders like an audio equalizer, but even that is hard to make sense out of.

A pie chart of some kind that can let you change the values by clicking on the pie chart would probably be a good idea, but very hard to implement in js.

Let me know what you think

---

Disk partitioning tools address the same problem I think, with their visualisation of available space, partitions inside it, unpartitioned space, etc. Have you ever used anything like Partition Magic or similar?

But - yes, it's quite challenging UI to create in JavaScript, but still doable.

---

How about three slider bars that update each other?

Or How about an Interactive Pie Chart?

---

My vote is for sliders that update in real time; slider A is grabbed and, when changed, updates sliders B and C. You can have a pie chart update as well to reinforce what's going on.