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.

UXMovement.com recommends over 15 items in a drop-down should be a text field.

I have a drop-down on a form field, on a web page, which has more (about 40) items to choose from. Dropdown value represents hours, and system can only take a full or half hour measure. On a page, there are ~20 of these drop downs.

They are a series of consecutive numbers and halves. Like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I get that if a person needs to pick 20 they have to go down about 40 items, but

  1. I don't want to create an error state
  2. Scrolling down is not that hard.

I also don't want to create 2 separate drop-downs for 0-20 and .0 and .5 because there are rows of these drop-downs on the page, so it will multiply.

What's your better recommendation?

share|improve this question
    
See related: ux.stackexchange.com/questions/39860/… –  Dvir Adler May 30 '13 at 4:51
    
Knowing a bit more about the context would really help - what do the values represent? Are inputs likely to center around a small number of values? I guess the main question is, why don't you want to use a text input box? –  Peter May 30 '13 at 7:29
    
Numbers represent hour duration. Text input box will create an error state, which I want to avoid, since there are 20 of these on the same page. Sliders will cause too much of visual clutter (imagine 20 slider). –  Jade Jun 6 '13 at 18:41
add comment

4 Answers

up vote 3 down vote accepted

Sliders are OK, but hard to use for people with limited motor control, such as the elderly. I would consider getting the user to just type the value into an input box. If there are already rows of dropdowns on a page, being able to type in a value would be simpler and be a change in interaction type (using a lot of the same control can be visually unpleasant). Using a slider with an input box can work, but I've found people don't always understand that they can type directly into the input box. You could also include an example that disappears onFocus such as "e.g. 10.5".

share|improve this answer
add comment

Seems like the perfect scenario to use an incremental slider.

Increment slider values with the step option set to a value, commonly a dividend of the slider's maximum value.

enter image description here

check out the jQuery UI Slider

UPDATE: In addition to the slider, a number type input would be more useful (as depicted in the mockup in rk.'s answer)

Check out jsfiddle demo (number input added to rk.'s jsfiddle)

Reference: HTML Input types

share|improve this answer
add comment

You might want to investigate on the HTML5 datalist attribute of the input type. It's a free input type text but with a fixed set of possibilities, like the old-school d-HTML search. However, there is some validation/correction required since the user is able to enter something else...

http://www.html5tutorial.info/html5-datalist.php

<label for="num">Please select your number : </label><input id="num" name="num" type="text" list="all_numbers" />
<datalist id="all_numbers">
   <option value="1.0">
   <option value="1.5">
   <option value="2.0">
   <option value="2.5">
   <option value="3.0">
   <option value="3.5">
   <option value="4.0">
</datalist>
share|improve this answer
add comment

A good, balanced alternative would be a slider linked with an input box.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Gives the user the freedom to input a value than fiddling with slider (specially helpful when slider is sensitive/range too big). Also, in terms of universal design, an input box has better accessibility than a slider.

A jsfiddle demo

share|improve this answer
add comment

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.