Slider with 3 handlers vs Input fields

Question

I am working on a feature were you need to distribute the total of the feature value (100%) between 4 factors, I think the best option is the input fields, but I like the visual feedback from the slider, any suggestion?

Answer 1

The slider design as shown above could be incredibly confusing from an accessibility standpoint. What if someone could not properly see the colours?

I see 3 slider "handles" but 4 fields. That seems odd, too.

What happens when vector 1 needs to be 25% and vector 2 needs to be 26%? That seems like some very tedious mouse dragging.

Using form fields, you can quickly tab to each one or after a value is filled in, automatically move to next form field.

This is precise work, I think direct number entry is the best choice.

However, if you want something more visual, show a graph or something of how the 4 values are distributed across the 100%; for example, in vector 1, they enter 25%. Draw a graph then that shows the progress left or something.

Answer 2

I think your slider could certainly work, but a) I fully agree with the color accessibility issues, b) make sure that the slider track clearly represents 100% regardless of the position of the handles, and c) you might change a few things around a bit to make the associations clearer:

Keep the fields and vector names centered (as much as possible) over/under their related segments (they could both be over or both under, whatever), and don't let color confuse the issue. I also wouldn't use any light grays: low-contrast controls are NOT cool, they are just harder for a segment of your customers to use.

Just $0.02.

Answer 3

Using bar-chart that auto-completes to 100 can work better. Connecting them on a linear scale is more complex action than deciding on each variables. when you increase one, automatically decrease the neighborhood variable.

You can add unassigned percentage bar, to make things a bit clearer...

Answer 4

I think that you're spot on with the form fields being the best way to get user entered data, it's not as difficult as trying to move around handles on a bar; I'm thinking Fitts' law. No reason you couldn't have both though.

As for displaying the information, a bar graph works well, or a 'donut' graph might also work. I like this idea as it shows a complete circle so you can easily see it total up to 100%.

Out of interest, do you have a default factor that always fills up the rest of the percentage? Like if I put 20%, 20%, and 15% - will say factor 4 automatically fill in to 45%? I ask because a linear slider might not represent that there is a percentage missing. If I put 20%, 20%, 20% and 20%, I might not realise that the bar is only 80% long, as I don't know what 100% looks like. If you used a donut graph you would have an incomplete circle indicating the totals don't add to 100.

If you wanted to stick to a linear slider/bar, I would just recommend using and 'end point' indicator, so you could see if the 100% total wasn't reached, and obviously use something other than just color to distiguish between the factors.

Example 'donut' or pie chart: