101 UX Principles – 2nd edition - Second Edition

#19

Use Numeric Entry Fields for Precise Integers

If you’re trying to get an integer (a whole number) from a user—for example the number of widgets they want to order or the number of days an event runs for—it makes no sense to offer them a free text input field where they can enter “a few” or an emoji. A numeric entry field in HTML is:

<input type="number">

This will display slightly differently on different devices—and that’s the whole point. By adapting to the control system of the client’s device, the user gets a simpler entry and makes fewer mistakes. You also get fewer emojis in your database.

Users abandon forms because:

1. they’re too long,
2. they ask for too many details, or
3. because it’s difficult to enter information into the form. ...