User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am designing a tool where the user sets a maximum total amount, and then can divide that up into smaller chunks as they so desire, based on a percentage. They may also want to adjust the total, which would then reduce the size of the "chunks" appropriately.

See a use case in my current sketch here: enter image description here

I have designed sliders and such before, but the idea that increasing the percentage of one chunk must decrease one or more of the rest is something I am struggling with. I have played with the idea of "locking" each row (the awful icons to the right of the slider line are meant to be locks) so that when playing with the slider, the locked rows won't be affected, but would love to hear your thoughts.

Bonus points if you can point me towards other UI examples of this kind of allocation interaction.

share|improve this question
Please try to come up with something better than sliders. I have never seen a user who could adjust percentages with sliders well. It takes them (or us, because I struggle with them too) way too much fiddling to get the desired result. Even in the simplest case it is totally unintuitive how a change in one slider should affect the others. And your case is more complicated than that. – Rumi P. Nov 14 '13 at 10:50
There's a similar kind of allocation interaction when you resize a table's column widths in MS Word. By default, changing the size of one column doesn't touch the others (i.e. the overall table will then be a different width); but if you've got the table set to autosize to the window, then it will change another column width to compensate and keep the overall table the same width. PS If somebody can turn this into a genuine solution, feel free to post it as an answer. – vincebowdren Dec 15 '13 at 13:55

A solution to this may be that when a maximum is reached, that the sliders cannot be moved any further, until the user reduces another. This allows them to have control of where percentages are being adjusted instead of some automatic adjustment by the sliders them selves.

Only comparable examples I can think of a data usage calculators for pay monthly tariffs. The AT&T example actually gives you a warning when you reach the limit:

iWireless change the message to red when you've reached the maximum, but still indicate the level that you're currently at. In your case, the 100% total may then change red and show 120% for example, giving the user a visual queue of how much then need to reduce sliders by:

share|improve this answer

If you do stick with slider and the lock icon, or equivalent device, it would make sense to put the icons all the way to the right (though left could work too). Oftentimes in grid views, actions are stacked on the right side of a list item.

Reason is that the range slider is giving you continuous feedback during the interaction on both the left (in %) and the right ($).

The users eyes should not have to skip over the lock to constantly read the values as they manipulate the slider.

Your inputs appear to be only for the %. Is there a reason not to let users input numerical values on the right? In a money situation, many people might consider a rounded dollar amount first ("I'm giving Gob only $200 bucks"), and then can see the percentage.

Also, with a range slider, it could be hard if not impossible to make a percentage into a rounded dollar amount. Don't increase the work for a user.

Once you've locked an individuals amount, the row show go gray, indicating a locked state, so it's clear to the user.

Kudos to you for the Arrest Development reference :)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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