Use HTML5 Input Types to Improve Mobile UX


Setting the correct input type on HTML5 input elements promotes a better mobile UX and improves user experience. By not setting the correct input type on HTML5 input elements you lose built in functionality that these types give us for free. Not only that but we are ensuring that our mobile users will have a less than optimal user experience.

If you don't set the input type it will default to text. When a mobile user touches the input the mobile device will launch a keyboard that is optimized for entering text .

Touch the text input to launch the text keyboard. Notice that the keyboard is configured for entering text and letters are uppercase.



  
 

This is a great keyboard for entering plain old text but not for most other input types. If the user is shopping for example and wants to add a product to the shopping cart they would have several options for entering the quantity. As an example, here are the different ways to enter numeric data in an input with a type of text.

Disclaimer: Not all mobile keyboards are the same, your keyboard will probably differ from the screenshots seen below. Your device's keyboard may require more or different steps.

Option 1:

If I had to enter a quantity of 15 on the text keyboard I could long press the “q” and “t” keys in sucession which takes a little longer than using the number keyboard because of the small size of the keys, key placement and the extra milliseconds it takes to long press each key.


Option 2:

I could press the button in the lower left hand corner which toggles the keyboard below.
Android Number and Symbol keyboard
It’s a little easier since each number has it’s own key and is larger however it’s still not the best experience and displays many symbols and punctuation that we will never need for entering a quantity. This option also requires the user to take an extra step that they normally wouldn’t have to.


Option 3:

I could press the button in the lower left hand corner as I did in the pregious step and then press the number button shown below.

Android Number Symbol keyboard with num key

 

Doing so would display the numbers in a larger format. 

Android keyboard that involves t button clicks to get too from the default text keyboard

This is better because the numbers are larger, however we still have keys that we don’t need and it took us two extra button clicks to get the keyboard to display. I "as a user", don’t want to have to think about which keyboard to use. 

Let’s see what happens if I set the input type to number.

  

Touch the number input to launch the number keyboard. The keyboard consists of numbers, a comma.

You should get a keyboard with nice big numbers that make it easy to enter the desired quantity.

Also notice that there is no option to change the keyboard. I think it's clear from a UX perspective that specifying the correct input type benefits mobile users by allowing them to enter form data faster when presented with the correct keyboard.

I have discussed the keyboards associated with text and number types but HTML5 offers 13 new input types all with similar benefits. You can get complete details on all 13 input types at w3.org.

Categories: Web Development, Mobile
Tags: ;

SEARCH ARTICLES