Facebook

Mobile-Friendly Sign Up

Bag and hands

It may seem like a small improvement, but displaying the right keyboard to a user can help ease friction on sign up, and make the whole process faster and more pleasant.

Ever notice your mobile phone’s keyboard varying from one that displays an ‘@’ sign beside the space bar and one that doesn’t…

Screenshot of keyboard

…or, one that only displays numbers in bigger key sizes?

Screenshot of numeric keyboard

Imagine filling out a form field that asks for your email with the keyboard below.

Screenshot of keyboard

You’d have to switch to the layout that displays numbers and special characters, and look for the ‘@’ sign among the 25 keys in that layout.

That’s probably around half to a minute of your time depending on how fast you are at spotting things.

This can be achieved by using the right input type on the form field.

Use  type="tel"  to bring up the numeric keyboard.

Screenshot of numeric keyboard

Use  type="email"  to bring up the keyboard with the ‘@’ sign beside the space bar.

Screenshot of keyboard

This feature is currently supported by most mobile browsers except Opera Mini, which has a current market share of 4.92%. It will simply fall back to type="text"]

Ericsson’s Mobility Report stated that there are 2.6 billion smartphone subscriptions globally. That’s 1.35 billion ahead of the population in more developed regions reported by the United Nations Population Division. The same report forecasted that by 2021, the number will grow to 6.4 billion smartphone units globally. In a 2015 report by Forbes, combined global conversion rates in 2014 of smartphones and tablets outpaced desktops. These figures suggest that it might be a good idea to start designing a better sign up experience for users of mobile devices, and not just by reducing the number of fields to fill out.