When you enter “forms suck” into Google, you get 28,000,000 hits. I am not surprised. Who, after all, sits down on the couch with a tablet or a smartphone thinking: “And now, for a little relaxation, I will fill in some online forms.” Quite the opposite: forms are annoying, on paper as well as digital. First of all, they are in the way. They stand between me and online shopping, entering a discussion on social networks, or online banking. Also, I still come across terrible form usability in 2015, especially on smartphones and tablets, where usage is different because of smaller screens and touch-based entry. Bad form usability creates frustration, abandoned carts and bad conversion rates.
Difficult times for bad mobile forms
The problem with difficult mobile forms is exacerbated by these developments:
Many customers increasingly use smartphones and tablets for online shopping: in Q1 of 2015 30% of all e-commerce transaction were conducted on mobil devices (State of Mobile Commerce Q1 2015, Criteo).
Google recently announced recently that the number of mobile search queries surpassed desktop searches in ten countries for the first time.
On April 21st, “Mobilegeddon” came upon us: Google penalizes web presences not optimized for mobile usage with lower search rankings.
What to do? Catch Up.
Those who still don’t have a website that is easily usable on mobile devices, need to catch up – creating a responsive website (which is Google’s recommendation), a separate mobile site or an app. And as far as online forms go: optimize them for mobile use, as well. The same usability rules apply, only stricter because of:
- different usage contexts (e.g. usage on the road, under time pressure, with bad connections, with sun reflections on the screen)
- smaller screens
- touch entry
Here are the most important rules to make online forms perform well on mobile devices (btw: there are more rules on Luke Wroblewski’s website, which was recommended by mediaman USA Director of UX, Sylke in her blog post about user registrations):
1. Before you get started: Understand your target audiences
Before you start thinking about the process (e.g. from shopping cart to check out) and the order of form fields, take a step back (if you haven’t done so already in defining your overall strategy): Understand your target audiences, their customer journey, their devices, usage contexts and goals. Only then will you know in detail, how to design the process and the form in order to best support your users.
2. Cut and simplify
What is true for desktop devices, is twice as important for mobile:
- Cut all fields that are not absolutely required
- Simplify the process
- Use simple, one-column forms
- Spread out long forms over multiple pages and show your users where they are inside the process
- Apply understandable, clear field labels
- Use inline-validation, checking entries in real-time and providing immediate feedback
3. Be kind to stubby fingers
You don’t necessarily have to have stubby fingers, to mistype on a smartphone. Often, form elements are simply to small or too close to each other. To prevent that, Luke Wroblewski suggests a minimum size of 23 x 23 px (Designing for Touch, PDF). Elements should sit 5 px apart.
4. Use mobile-specific entry options
Touch first: use form elements that are easy to manipulate with a fingertip. Radio buttons, for example, can be problematic because of their size. Try to choose alternatives, such as buttons or tabs.
Typing on a smartphone is annoying and time consuming. If content allows, use selective options, e.g. a date-picker instead of having users type a date.
5. Combine entry fields
When possible, merge multiple entry fields into one, e.g. one field “Name” instead of “First Name” and “Last Name”, or combining street and house number.
6. Place the label above the field
This guarantees good readability and quick form entry. To conserve space, so-called inline labels are picked frequently. But having the label disappear once the field is clicked, can become problematic, especially in long forms, because the context gets lost.
7. Define the keyboard type
For each entry field, consider which characters users will type into them, e.g. letters, or numbers only. By selecting the correct type-attribute for the input-element, users immediately see the matching keyboard elements and don’t have to switch back and forth between the standard view with letters, and the views with numbers or special characters.
8. Apply “Smart Defaults”
Pre-fill your forms with data you already know, maybe through registration, IP address or GPS data, such as name, address, country. That saves your users even more time.
9. Dare to be innovative
Classic forms are web relics. I am always looking for alternative display formats that are innovative and easy to use. One recent trend was “natural language forms”, which collect data in form of sentences. Keep in mind: Don’t just use them, because they are in-fashion. Make sure they are a good fit for the task at hand. For short forms with few questions, they can be a real alternative, even fun to use. (Although, transforming a tax return into a natural language form would be an interesting challenge…)
10. Finally, remember loading times
Loading times are twice as important for mobile usage, because usage contexts are different. Users are on the move, don’t have much time, have bad connections. The quicker a form loads, the higher the chances that a user will actually submit it. Another reason to reduce the amount of elements and requests to the absolute minimum.