When designing form elements for numeric input, these questions could help:
1: Are you selecting from a short range of numbers?
If you’re selecting a short range of numbers, say 1 – 5, then consider using radio buttons, or a group of buttons with a label for each number (combined with a hidden form field to retain the selected value). This is easier for users than a text box for several reasons
- For touch/mobile, it’s one-action: just tap the number.
- For desktop, the user can just click the number. (They won’t have to position the mouse cursor, and then press the key on their keyboard for the correct number.)
- The selection can be designed to stand-out from the other numbers.
Some other tips when designing a selection of numbers:
- If using an accompanying checkbox/radio button, wrap the radio button and the number in a label. This allows the user to click the number, and not have to precisely touch the checkbox/radio button.
- For desktop, add a hover effect to highlight the choice the user is pointing their mouse at.
- Add a call to the checkbox/radio button’s blur() function when it’s clicked, to remove focus from an element that is so small, the user may not notice it has focus. (Useful for desktop.)
2: Are you allowing a wide range of numbers?
- HTML: <input type=”number” min=”0″ max=”5000.00″ step=”0.01″/>
Also consider the device the user is accessing your form on. If the range is, say, 0 – 100, you may be able to get away with building a slider for touch / mobile. This allows the user to perform one action: swipe the slider with their finger. The alternative, using a text field, can get annoying:
- The user has to touch the text field, and bring up their device’s on-screen keyboard.
- The user has to touch each number individually.
- The user has to touch outside of the form field to close their device’s on-screen keyboard.
…and, we know that screen space is limited on smartphones and tablets. I personally find it annoying when I have to use the on-screen keyboard to select a simple value, such as a number between 1 and 10.