Typing is easy when users do it on a desktop computer. But it’s harder to do on a mobile device because not all the keys are visible on the keyboard at once. A smaller screen can only display a limited set of keys.

Most mobile operating systems have designed separate keyboards optimized for specific form field inputs. These optimized keyboards are there to use, but most developers fail to include the right input types in their code to take advantage of them. This leads to slower form completion rates on mobile devices.

Input Type is Not Always “text”

Most developers make the mistake of setting the input type of every form field to “text”. This is a problem because the input of every form field is not always plain text. Most forms usually have fields that ask for information with numeric or alphanumeric characters. When users try to fill out these fields, they should see a numeric or alphanumeric keyboard.

Unfortunately, when every field input is set to “text”, it forces users to use an alphabetic keyboard to type in numeric and alphanumeric characters. Typing on a mobile device is hard enough. But not having access to a numeric or alphanumeric keyboard when you need it makes it even harder.

Email Address Fields

It’s common for forms to ask users for their email address. When you set the input type of your email field to “email”, it’ll give users a keyboard that’s optimized for typing in email addresses. This keyboard not only displays letters, but it also displays the ‘@’ and ‘.’ characters that make up an email address. Users can easily type in their email address without struggling to find the necessary alphanumeric characters.

Web Address Fields

To make things easier, there’s also a keyboard that’s optimized for typing in web addresses. When you set the input type of a web address field to “url”, it’ll give users a keyboard that displays a ‘.’, ‘/’, and ‘.com’ key. You can even “long-press the ‘.com’ key to choose other common suffixes like ‘.org’ or ‘.net'” [1]. This keyboard can also prevent typing errors. It removes the ‘space’ key so that users won’t accidentally add spaces in the web address field.

Number Fields

It’s important to give users a numeric keyboard when they’re filling out number fields. Setting the input type to “number” gives users a numeric keyboard with number keys to type with. Users save time when they can immediately type without needing to manually switch to a numeric keyboard.

Telephone Fields

You can even go so far as to make it easy for users to type in their telephone numbers. Setting the input type to “tel” gives users a telephone keypad to type with. This keypad mimics the user interface users are familiar with when they make phone calls.

Mobile Form Input Types

The details for mobile usability are not always in the pixels. Sometimes they’re in the code. These input types were introduced with HTML5. Not all browsers support the full capabilities of HTML5 yet, but all of them do support these input types when users submit their data [2]. If you want to improve the usability of your mobile forms in a big way, update your fields with the right input types to give your users the right keyboard to type with.

References

[1] No. 9: A Form of Madness

[2] Current State of HTML5 Forms

[3] HTML5 Input Types

Toolkits