35

I have a tricky request that requires the user being able to change the values across 4 vectors. The catch is that the four vectors between them must total 100%.

My initial thought is to go with 4 sliders.

4 sliders for the vectors

This would mean that, as the total must be 100%, the user would have to lower one value before raising another. Is this intuitive enough?

Maybe some help text and a red/green label for values under 100% (red) and on 100% (green)?

If anybody has a more elegant solution for this I'd love to here it!

Improve this question
7
  • 11
    What about a single partitioned bar, where the user can resize each section, by expanding into the adjacent section (which would shrink by the appropriate value)?
    – TJennings
    Aug 4, 2015 at 7:48
  • 7
    Humble Bundle has a solution which basically forces the other sliders up or down in response to changes to other sliders (click "Choose where my money goes"). They've done it that way for years I think, so I suppose they think that's the best way.
    – Chris
    Aug 4, 2015 at 7:49
  • 1
    @Chris As an avid humble bundle buyer, I've never liked this system. It feels terribly imprecise, and I would rather have the single bar solution as given below. However, Humble Bundle does have it right in that there are text fields next to each slider, allowing for precise control.
    – agweber
    Aug 4, 2015 at 15:33
  • 1
    The accepted answer is good for most cases, while not good for all. I fail to recall the program name with an equalizer. When the user raises one level, the others fall proportionately (instead of taking the value from a surrounding vector).
    – user3819867
    Aug 4, 2015 at 17:59
  • 1
    @Chris: I second the above comment in that Humble Bundle's UI is terribly annoying. I find it almost impossible to set a specific value, as every time I change something, some of the other sliders get changed in ways that I fail to anticipate. This is also true for the text box; when entering a value into the text box, I am never sure what other fields will change - will the difference be subtracted from several other fields? Will the total be increased? Actually, I want neither of that; I usually want to have the difference subtracted from one particular other field.
    – O. R. Mapper
    Aug 6, 2015 at 6:53

7 Answers 7

Reset to default
20

Make the user's job easy

Ask yourself if it's the system or the user that's concerned with 1% accuracy. Does the user really want to think about the distributed percentages, or just the priority of each point?

Ask for simple relative values

If a high level of precision is purely the domain of the system, consider asking your users how much they care about each point on a relative scale. You can break that down on the back-end and calculate the percentage for them. No humans doing math.

enter image description here

Let the computer do the hard stuff

So in this illustration ...

The user sees:

Low
Medium
High

The system sees:

"Meh" = ((1*20)*(100/((1*20)+(3*20)+(5*20))) = 11.11111%
"Sure" = ((3*20)*(100/((1*20)+(3*20)+(5*20))) = 33.33333%
"OMG!!!" = ((5*20)*(100/((1*20)+(3*20)+(5*20))) = 55.55555%

Easy for the user, easy for the computer. It's a perfect world!

Improve this answer
2
  • I really like this approach, what is missing is the total percentage (in system terms). For example, how do you prevent the user from selecting three 5's? And if you don't, how do you calculate the total?
    – Mitch
    Aug 12, 2015 at 11:15
  • @Mitch The formula shown there is accurate. If the user sets them all equal (regardless of the value selected) they'll end up with 33.333% all around.
    – plainclothes
    Aug 12, 2015 at 14:38
73

You could use a single bar, partitioned into four sections, labelled (or possibly coloured, as I've used in my example image) accordingly. The area where each partition meets would be resize handles, and resizing would accordingly expand and shrink the adjacent partitions, while the entire bar is capped at 100%.

enter image description here

With a legend showing the exact percentages from each colour.

Improve this answer
15
  • 5
    Very nice, Make sure that it remains user friendly when a segment is set to have width 0. (If two slider blocks are on top of eachother things could get awkward)
    – Dennis Jaheruddin
    Aug 4, 2015 at 11:28
  • 36
    This is nice and all, but let's say I wanted to deallocate some value from green (on the right) and allocate it to teal (on the left), how would I do that while preserving the values of the middle two sections?
    – Harrison Paine
    Aug 4, 2015 at 13:53
  • 1
    @HarrisonPaine You can provide a possibility to select multiple sliders at once and move them, either via Shift+Click, or by drawing a bounding box (like selecting Icons on Desktop) With this Option you can transfer any value from any one box to another :-)
    – Falco
    Aug 4, 2015 at 18:19
  • 7
    @Falco I think that's too much of cognitive load for just assigning values.
    – Adit Gupta
    Aug 4, 2015 at 18:28
  • 1
    @HarrisonPaine make it a doughnut / pie chart? You'd still have trouble if you wanted to assign from green to purple though.
    – Chris H
    Aug 5, 2015 at 9:01
34

Is it necessary to use sliders? Note that a slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, volume or brightness control.

If the user has to determine value, you can also give a simple value entry interface along with a "Remaining Value" indicator. Somewhat like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In this way, you can:

  1. Avoid using the mouse. Keyboard is the preferred medium for any data-entry activity.

  2. Lesser actions - The user will not have to go back and forth between arranging the value of sliders.

  3. Provide better control for dealing with numeric values.

Improve this answer
3
  • 27
    I'd use this and the slider in the accepted answer simultaneously. Put the slider in and add the text fields under each segment, making them act like editable labels.
    – D_4_ni
    Aug 4, 2015 at 11:15
  • 1
    IMHO, an additional advantage of this is that it gives users control over the values. As opposed to solutions that automatically adjust other fields to make up for the remaining amount in unforeseeable ways, this concept makes the action of allocating 10% from Vector 3 to Vector 2 ridiculously easy.
    – O. R. Mapper
    Aug 6, 2015 at 6:55
  • @D_4_ni In that case, would you add an extra toggle to the slider to show where the last value ended, given the total could be higher than 100%, or is there a nicer way?
    – Ergwun
    Aug 9, 2015 at 13:55
22

There is also possibility using four sliders to normalize the results, that is, if they sum up to x%, multiply each value with 100/x. Then you wouldn't have to worry the user with constraints while retaining the proportions desired by the user.

Improve this answer
7
  • 3
    I like this solution. Does the user have to know that they add up to 100% in some representation? They probably just want to set the values relative to each other, and the 4-sliders approach should be a good representation of that.
    – doldt
    Aug 4, 2015 at 13:21
  • Conceptually, this is the same as the partition bar suggested in another answer, isn't it?
    – O. R. Mapper
    Aug 6, 2015 at 6:56
  • @O.R.Mapper I think there are subtle differences - for example, a very natural thought for the user to have is: "I want more green, but I don't want less red!", which they cant simply do with the partitions - of course, the demand is slightly nonsensical in the context, but they don't need to know about this. The partition bar makes the connection very explicit, which ultimately can make it harder for the user to navigate.
    – doldt
    Aug 6, 2015 at 7:54
  • 1
    @O.R.Mapper Besides what doldt said, this approach avoids difficulties with displaying 0 amount of some of the components.
    – Cthulhu
    Aug 6, 2015 at 8:01
  • 1
    @O.R.Mapper In effect, the result will be the same-ish (not exactly, because here a decrease is always equally payed for by the other colors), you can only increase a color at the cost of the others. But the user needn't know this, and they usually just "want more red", and not "want more red at the expense of green" (which the segmented slider offers). Further discussion should be moved to the chat!
    – doldt
    Aug 6, 2015 at 11:44
11

When one slider is adjusted, auto-adjust the remaining unlocked sliders to keep their total at 100%

enter image description here

Improve this answer
9

You can present a simple UI that allows all four values to be set at once. I created a mockup that illustrates this principle. Note that I haven't particularly focused on making sure that the UI doesn't always present exactly 100% (due to rounding). I leave that as an exercise to the reader.

Inverted Control Scheme

This control scheme is an "inverted control scheme," where the closer you move the selection point to a setting, the stronger the effect. While this is usually intuitive (the picture hardly does it justice), you might also opt for a more straight-forward implementation:

Control Scheme

I've also created a mockup for this as well. You'll notice the big difference is that now, instead of "moving towards" a control to increase the value, you instead "increase the area size." Both UIs should be equally intuitive for users, so I would consider this more of a personal preference.

Edit (#2)

It was noticed that some combinations of values can't be selected. This wasn't my intent, but more to point out the fact that if all four values are interlocked, that the user should have a visual association to the four controls and their values. This means that sliders cause cognitive dissonance.

I've created a third (and final) version of a UI that would allow users to select any combination of values where the total will always equal 100%. This version still outlines the importance of linking the four controls together visually so that users can determine how moving one point will affect the others.

enter image description here

Improve this answer
10
  • 6
    this isn't making sense to me. the blue line is the longest, and yet it has the smallest value. what am i missing?
    – Woodrow Barlow
    Aug 5, 2015 at 20:47
  • @WoodrowBarlow The shorter the line, the closer you are to a maximum value. Yes, it's inverted, but this design allows you to set three values to 0%. If it were not inverted, the maximum value for each setting would be limited to 33 instead of 100 (that was actually my first attempt, and I kept wondering why my logic was wrong). You can only approach one corner at a time with the design, so you also couldn't possibly set three values to 0. However, for sake of argument, I've also presented a non-inverted scheme-- the larger area gets a bigger value.
    – phyrfox
    Aug 5, 2015 at 22:28
  • I've always thought this pattern was cool to play with, but how is this easier?
    – plainclothes
    Aug 5, 2015 at 22:51
  • @plainclothes Lock-stepped sliders are frustrating. Try playing with them sometime. You move one value, and the other three move, too! In fact, it almost doesn't seem intuitive, because there's no physical connection, so your mind struggles with it. This design actually lets you understand that four things are happening at once. Also, anyone that plays flying games or actually flies a plane will almost intuitively pick up on the control. I will admit, getting very specific combinations can be tricky, but usually you only need to be "close enough", and this design gets you there.
    – phyrfox
    Aug 5, 2015 at 23:07
  • 5
    This won't work. Try assigning 40% to red and blue, and 10% to yellow and green.
    – PixelSnader
    Aug 5, 2015 at 23:46
-1

I like TJennins answer, but considering the move from A to C comment:

Check out partitioning tools like gparted on linux.

http://gparted.org/screens/gparted-main-window.png

There it is easy to shrink the third element, then move around the second and then make the first one larger.

All depends on how accurate you need the numbers.

Or add some padding around the sliders so you can have them next to each other to represent 0%.

Improve this answer
2
  • To much learning and thinking for most users!
    – Ian
    Aug 5, 2015 at 9:02
  • "There it is easy to shrink the third element, then move around the second and then make the first one larger." - that is possible in GParted? And it doesn't have any side effects of actually changing the order in which the respective partitions are allocated on the drive? Never knew that ... which doesn't quite speak for the concept, at least at the level of in-UI explanation found in GParted.
    – O. R. Mapper
    Aug 6, 2015 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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