How to arrange a Slider control with DropDown option

Question

I have a form with many fields. One field is numerical and it can have these 3 values (option A: 2.0, option B: 1.5, option C: 1.0, and also an extra option CUSTOM: any value the user wants).

Problem is, how to let the user know that he can choose 3 default options or that he can input his own value (betwee 0.0 and 2.0).

Currently i have a DROPDOWN with options "A", "B", "C", "CUSTOM" and a Slider that goes from min value 0.0 to max value 2.0. When the user changes the dropdown option, the slider updates it's position to the selected value. If the user drags the slider then, the dropdown displays the "CUSTOM" option.

Is there a better way to present this field?

Answer 1

I'd use a radio button with a custom input, like this:

o Option A: 2.0

o Option B: 1.5

o Option C: 1.0

o Custom: [_________________]

Or:

o Option A: 2.0    o Option B: 1.5    o Option C: 1.0    o Custom: [_________________]

Then it's clear that you have canned options or that you can easily enter your own chosen value. Validate that any custom value is between 0 and 2.0 with feedback. You could also disable the custom text input unless the custom radio is selected. A preview value in the input can inform users of the appropriate value range.

Answer 2

Why not just use the slider as the selection instead? That way you can present the default values for them to choose (as the tick marks on the slider) but if the user selects something between then you just automatically mark it as a custom selection.

Answer 3

Is there a reason why

• A = 2.0
• B = 1.5
• C = 1.0

It seems counter intuitive to have them this way, but maybe it is because I don't understand why you have the values like that.

It seems like it would make more sense if they followed the alphabet

• A = 1.0
• B = 1.5
• C = 2.0

Especially if you are using a slider to pick / show the values. Does your slider go from left, small to right larger?

In my experience, people get confused over very small details such as this.

I would suggest only using the slider (without the dropdown box) and have the values go from small to large, and having tick marks be labeled at the 0,0.5,1.0,1.5, and 2.0 marks, but able to move anywhere in between and have it choose that value.

I would have the slider default to be chosen to 1.0 in the middle (or whatever value you would like them to choose and make them change it if they don't want it on the predefined value) This way it guides them and kind of makes decisions for them when possible.

Showing a live preview of what they have chosen to the right of it (or above it like the mockup I made for you). kind of like this but with your values instead:

Here is an example of what I am talking about with your values:

Answer 4

Make the dropdown a combobox (a dropdown that you can write in), so that the user can type the value directly into the dropdown box. Make the slider update the value of the drupdown to the actual value. Allow dialogue based entry if possible.

This way you address all mental models, the dropdown type, the typing, the dialogue and the slider one.

If it's web though, it might be difficult to provide the dialogue, how ever is a last resort for people that do not cope well with presets or drag and drop, which might account for a minority. As a rule of thumb think about all possible ways, I can see value in answer by Surreal Dreams, if space is not a problem, however, don't horizontally align the radio group.

Have you identified who is your target audience, that might give you a hint on how to approach the problem.

^{download bmml source – Wireframes created with Balsamiq Mockups}