What is the best method to get a number from an user?

Question

Hello all, I was wondering for a small list of numbers [1..20], what kind of control will you advise to prompt the user for his selection.

I was thinking of a NumericUpDown control but it does not exist for WebForm and to make matters worse, I am deploying on a Pylons application (Python Framework)

Do you feel a DropDown control will suffice? I somehow still feel a NumericUpDown control is much more intuitive and easier to use from a user standpoint.

Will love the opinions of the SO community and perhaps advise about best practices.

thanks so much!

edit: forgot to mention that I am using the YUI library and the webhelpers library and to the best of my meagre knowledge, there is no such control with equivalent functionality to the numericupdown

Answer 1

A drop down is fine, smallish range of numbers, allows quick access to numbers at either end of the range quickly. Remember though that a user could change the selected value of the drop down using firebug or something so use validation to ensure the number provided is in range.

Answer 2

If the user is interacting mostly with the keyboard, consider just a regular edit box with a test on the limits. It's much easier than banging the down arrow to choose some other number.

If it is mouse-based and you have room, a grid of buttons or radio-set would be quick.

If it is keyboard based, then Jakob Nielsen wrote in his Alertbox article Drop-Down Menus: Use Sparingly, this note of caution:

Designs to Avoid

Drop-down menus do have their advantages. First, they conserve screen space. They also prevent users from entering erroneous data, since they only show legal choices. Finally, because they are a standard widget (even if an unpleasant one), users know how to deal with a drop-down menu when they encounter it.

Despite these advantages, Web usability would increase if designers used drop-downs less often. To that end, here are some examples of designs to avoid:

• Menus of state abbreviations, such as for U.S. mailing addresses. It is much faster for users to simply type, say, "NY," than to select a state from a scrolling drop-down menu. Free-form input into fields with restricted options does require data validation on the backend, but from a usability perspective it's often the best way to go. (This is guideline #178 for e-commerce usability because of the many errors we observed in check-out forms with state drop-downs.)

• Menus of data well known to users, such as the month and year of their birth. Such information is often hardwired into users' fingers, and having to select such options from a menu breaks the standard paradigm for entering information and can even create more work for users, as the following example shows.

Answer 3

Thanks for the kind replies guys.

From some usability testing, I figure that

1. the NumericUpDown control aka NumberSpinner is the best for picking numbers within a small range eg 1-100

2. a validated textbox works well for entering in large numbers

3. a drop down menu may be only suitable for smaller number ranges eg 1-10 due to the length of the drop down (netbook users? mobile phone users)

4. a grid of radio button is not as good as a drop down menu since the user have to scan the entire screen length to pick his number

a hats off to damien to his tip about validation to prevent alteration of numbers using firebug.

Answer 4

If you prefer the NumericUpDown style, you can make a simple version pretty easily using javascript. I've done it with jQuery, so I can't really give you specifics on doing it with YUI, but in general, here's what I've implemented. Create a standard text box with the default value pre-set in it, and it set to readonly. Add up and down buttons and style them how you want (I used divs, down on the left of the box, up on the right). Add a click event to each button set to increase or decrease the value of the text box. In your script, limit the range of the values, but also validate the input to be sure it isn't changed as advised before. I'm admittidly no expert on any of this, so there may be easier ways to do it.