05 November, 2015

Contextual Keypad - Engaging Users via Mobile Inputs

Engaging Users
In September 2015, I was at Los Angeles, California for STARWEST 2015 conference. I was staying at a hotel, stone's throw away from Disneyland. I took some time to attend Color Show at Disneyland. The first thing I spotted was the Mickey Mouse Wheel. I was mesmerized by the colors on the wheel. Walt Disney and his imagineers must have put lot of heart and soul into Disneyland. Otherwise, how would they think about engaging tourists by letting them control the lights on the wheel. This Mickey Mouse wheel displays a visual pattern to people gathered in front of it using different colored lights. Users can access 'Mickey Mouse Wheel' website and repeat the pattern on the screen. (Note that website URL was simple to be shared verbally over a microphone and free wi-fi was provided to everyone in that play zone.) Whosoever got the pattern right could control the lights on the Wheel for one whole minute. And this went on for  15 minutes before actual Color Show began. What I witnessed was thousands of tourists - both adults and kids playing this game on their mobile devices. Walt Disney must have accomplished his dream - of involving adults and kids alike in having fun, together.

App Usage Statistics
There are different ways of engaging users, yet very few organizations like Disneyland think about it and take the effort to put it to use. More engaging an app is, more users use the app often. 
The Nielsen Company reported that mobile users use up-to 37 apps per month as per last year's reports. Studies by Google in 2014 revealed that users use up to 8 apps in a day. This data only increases the pressure on App based companies to make their apps better.
Contextual Keypad for Touchscreen devices
Reading content on mobile devices is one thing. Accepting inputs from users and providing context-specific output is another thing. Whether users provide suitable values or not depends on how input fields are designed to capture inputs. In this article, we look at how to optimize mobile input experience by providing contextual keypads.
Consider a form with different input fields  like text, email, post code, phone number, IP address, Web URLs and so forth. By default, input type is set to 'text' for most part. When users enter data into these fields, an alphabetical keypad is displayed. If user has to enter an email address, he must go looking for '@' and '.' by tapping on respective soft key. 

Lets take an example of how mobile app 'Polar' handles contextual keypad on their registration form title 'Join'. 

Text Field
When a user taps on Username\Full Name field, an alphabetical keypad is displayed. Note that a button 'Next' is placed on the keypad, letting users know that they can move to next field on the screen, without moving away from the keypad. When user now taps on Full Name, the 'Shift' key is automatically activated (not captured in the picture.) This way, user doesn't have to explicitly tap on it to write 'Full name' in title case. 

Suppose user taps on Email field to enter an email address, suddenly, there is a need for '@' and '.' fields, but they are not available on alphabetical keypad on many apps. Polar app displays an email field optimized keypad. Note in the picture how space bar key compressed itself to make way for '@' and '.'. 
Interestingly, when user taps on 'Password' field, alphabetical keypad returns without 'Next' button as 'Password' is the last field on the form. This is a good example of how keypads are displayed based on context.


Placing focus on a web address field displays slightly different keys including '.', '/' and '.co.uk'. 

Numbers - Phone numbers, Post codes, Others
Numeric keypad is displayed for phone numbers. For post codes, a little different keypad is used.

How to test contextual keypads?
  • Make a list of all screens which accept input fields
  • Categories input fields into Text, Email, Password, Phone number and so forth
  • For each input field, review if correct keypad is displayed

A general rule of thumb is to use minimal forms on mobile apps. Better, if we avoid text inputs from users, as much as possible. Even better if contextual keypads are used whenever users are forced to provide inputs. If you want to improve the experience of your mobile apps, then code the app to display contextual keypads for corresponding input fields.

What's your experience with contextual keypads?