Is it better to put text field for drop down with more than 15 items?

Question

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:

^{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?

Answer 1

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".

Answer 2

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.

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

Answer 3

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

^{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

Answer 4

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>