Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Does user need extra info on choosing numerical values like why 2 should be choosen or so? –  Alexey Kolchenko Aug 21 '13 at 4:22

4 Answers 4

up vote 0 down vote accepted

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.

share|improve this answer
    
This option looks great. The only problem i have is that i only have 1 line for this field. I can't use 4 lines. –  Herno Aug 21 '13 at 2:01
    
You can arrange the values horizontally. I personally prefer it laid out vertically, but a horizontal layout works too. That gets you to one line. –  Surreal Dreams Aug 21 '13 at 2:04

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.

share|improve this answer

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:

enter image description here

share|improve this answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer

 
discard

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.