User input is what drives a lot of conversion points on many sites. Whether it’s signing up for an event, sending a donation, purchasing a product, or dropping a comment, user input should be a very fluid part of your UI. Responsive Web Design (RWD) can throw some wrenches in the works for user input when you have to tailor to many different devices and input methods.
When it comes to user input, touch devices are an area we should all focus our attention. With the ever increasing numbers for mobile traffic, touch devices are a growing area.
The type attribute is an attribute that helps the browser or device software recognize the type of input your interface is looking for. It provide the user with a different set of controls based on the property of the attribute.
Keypad with Type
The type attribute on an input can help direct a device on how to let the user interact with your site. By specifying
type="tel", the device knows to bring up the appropriate keypad for the user to use. This aids in the ease of use for the field. Other helpful type attributes are email and search, and should be implemented on all applicable fields. For a complete list of type attributes, see MDN for reference.
Keypad with Input Patterns
Sometimes we have an input that does not match any of the HTML5 type attributes, but we still want to provide the user with a different keypad for easier input. A good example of this would be a credit card number. Using the “number” type for a credit card can actually cause issues because Safari and mobile Safari tends to round large numbers, so stray away from this. Instead, a credit card isn’t really a number, but a string or digits, so the “text” type is most appropriate.
In order to bring up the appropriate keypad, we need to use the “pattern” attribute. The pattern attribute is a regular expression (regex) for the pattern of the input. You can specify numerical input with the
pattern="*[0-9]" pattern, which will bring up the keypad for your user. This is also helpful for US postal codes as well.
Validation with Type
Another advantage to the type and pattern attributes is with HMTL5 validation. Setting the property type can help the browsers or devices recognize the value of the input and check it against a set of criteria. For example, the validation can check to see if the value a user added into an input with type “email” is a valid email address. On the other hand, if you use the pattern attribute to specify a numerical input, the validation will flag alpha characters as invalid.
Input zoom is another area I often see overlooked when it comes to UX on touch devices. Some touch devices like the iPhone will zoom into an input that has focus. This can help the user see what they’re typing better, but can get tedious if you have to fill out a long form. I find it best to disable this behavior all together. If your site is built mobile first and the font size is 12px+ the user should be able to see what they are typing just fine.