Making the Most of Mobile – Mobile Forms

Data input is very different in the entire mobile device because we are using our fingers as opposed to a keyboard and mouse. One of the interesting stats around a particular form (shopping cart) is its abandonment rate. On a desktop computer, shopping cart abandonment is around 72%; on mobile devices, it’s at 97%. Some of that is due to behavior. People do research on mobile devices and will not purchase immediately. It’s also because it is harder for people to check form contents on mobile devices. They usually give up. In a recent webinar, Ian Everdell talked about the may factors of mobile forms, specifically on mobile devices. 

Facilitating Behavior

Now, how do we make our forms easier to use for our visitors? One of the best ways is through facilitating behavior. And this can be done in several ways, namely:

1. Label Positioning
2. Taking advantage of input type
3. Utilizing auto-capitalize and auto-correct
4. Taking advantage of built-in properties of mobile devices
5. Taking advantage of input masks

Label Positioning

Label positioning is considered to be one of the best practices for mobile marketing. Generally, you should … [Tweet “Always have the labels and fields visible at the same time when someone is interacting with the field”]

Ian Everdell has experience in the market with his work on his own company, Mediative, a digital marketing company. In the webinar, Everdell showed three examples on how to make it simple for people to interact with your forms.

First, you can have the labels appear above the fields. When you click a certain field you can still see the label above it. When you tab or press the next button you don’t have to do anything to see what the next field is asking for. Best Buy has this kind of approach. This takes up a little bit more of vertical space, but by now, people are very used to scrolling on mobile devices.

Another way to do it is assigning the fields to the left. When you tap into a field, they stick to the way of the view port in a way that it does not zoom in. One of the challenges of this approach is that if you have big labels or small fields it can be difficult at times to see what the text is actually saying. You can see an example of this at the Costco mobile site.

Finally, if you look at Walmart, they have actually incorporated the labels into the fields. This again, is a very good approach. One thing that you want to make sure here is that your label does not disappear until the user starts typing. As soon as it disappears, the fields come into focus and there might not be a chance left to read the labels.

Input Types

HTML files and mobile phones have brought about a great way to simplify the data input process. When a field needs, let’s say, an email address field, an email specific keyboard pops up. That’s the great thing about soft keyboards. The keys now have whatever you need.

There are 4 binary input types: email; URL; number; telephone. Three of them are shown. If it’s a URL, the keyboard changes the dot and slashes to “.com” buttons at the bottom. If you change it to email, there has to be a @ symbol at the bottom. If you specify info type to number, it goes automatically to a number set of keys. If you specify telephone info type, it brings up a telephone keypad, wherein you just get the digits 0-9. This makes it incredibly easy to fill in things like phone numbers or credit card numbers. Taking advantage of these input types on smart phones makes it a great way of simplifying the way users input data.

Auto-capitalize and Auto-correct

Auto-capitalize and Auto-correct have been great innovations in terms of helping us type faster and better on mobile devices. But they need to be used properly. For auto-capitalize, you should turn it on for things like main names and locations. Turn it off for emails, URLs, passwords, or anything where potential capitalization is going to be an issue.

In terms of auto-correct, you want it on for free text but turned off for emails, URLs, passwords or anything that is non-alphabetical that you don’t want the phone to try and replace with something that makes it sense. It’s also important to trim off trailing spaces. For example, if you want to accept an auto suggest correction, you can just press the space bar. This will take you to the next word and accept the change. That means that any input has a space at the end of it, if people have accepted it that way. That will screw up your CRM or whatever database that information is going into. You need to make sure that you trim off that trailing space before it is submitted into your system.

Built-in Controls

In addition to the soft keyboard layouts there are other touch interactions things available in smart phones. You have sliders, radio buttons, bars, scroll wheels, or multiple scrolling wheels. You also have toggle switches. These are different ways to present data options on a mobile device that could differ from what you do on a desktop computer because of the way people enter data. If you use these to present data options such as drop down lists, you should be careful where to position it. Also, make sure that the options you are showing are not overly long, else they get cut off in the middle. If you have a long list, it might be better to have an auto-complete function when someone starts to type the first letters.

Input Masks

Switching between keyboards can be tedious. If they require formats for data input, you can set those up ahead of time, so that people can only input data in a particular way. For example, you can set up a date field wherein users have to type 8 numbers only. They don’t have to find the forward slash. They don’t have to guess whether it needs a slash or a hyphen. All they need to do is type in the numbers. Things like phone numbers, tax IDs, credit cards, or social security numbers are all great examples of where you can use input masks to simplify and speed up the data input process.

Summarizing

These are all great practices that you can use in optimizing your mobile forms. The easier it is for users to use your forms, the more leads you’ll get in return. Think about it. Utilize it. If you want to find out more about mobile forums, you can view the full webinar here.