Use Device-Native Input Features Where Possible

If you’re using a smartphone or tablet to dial a telephone number, the device’s built-in “Phone” app will have a large numeric keypad, which won’t force you to use a fiddly QWERTY keyboard for numeric entry.

Sadly, too often, we ask users to use the wrong input features in our products. By leveraging what’s already there, we can turn painful form entry experiences into effortless interactions.

Figure 39.1: The iOS “picker” control replaces fiddly drop-down menus

Dropdowns should let users use the device’s full-width picker control and numeric entry should show a numeric keypad. For example, you can display a numeric keypad in web forms by adding the type=tel attribute to the input field in HTML:

<label for="phone">Your telephone number:</label>
<input type="tel" id="phone" name="phone">

This...