Mobile devices are ubiquitous now.
People use them every day to book hotels, flight tickets, shop online and much more. No wonder there is a constant surge in the number of mobile users and it will increase with each passing year.
According to a report from Forrester’s Retail Wave, smartphones contributed retail purchases of USD $1 trillion in the US in 2018. Because of this, you must consider creating a mobile-friendly user experience so you don’t miss this potential audience.
Mobile forms are a key part of the conversion equation on phones. Be it an eCommerce checkout form or just a signup form. You don’t want users to abandon your website or app because of poor user experience.
In this article, I share a range of effective mobile form design tips that will help you drive more conversions on mobile devices.
#1. Understand the difference between the mobile and desktop UI
Before you design a form for mobile users, you must have an idea about the differences between the mobile and desktop user interface (UI).
Navigation
Here, users don’t have a large screen to scroll and navigate with a mouse. You need to consider touchscreen navigation to apply the proper size of the elements. Make sure there is no hover condition between any elements that hide important information.
Aspect Ratio
Almost 80-90% of smartphone users use their phones in portrait orientation so vertical scrolling is more spontaneous.
Additionally, the phone size is small compared with the desktop, so it is next to impossible to show your entire form at the same time, without scrolling.
Font Size
For mobile devices, 16px is the standard size for body copy. Using smaller or larger fonts can cause different issues, including visuals effects.
Research by MIT that included two different font sizes 8px and 10px provides these suggestions:
- Never use font below 10px.
- Make sure you have a standard lettering width.
Image Source: nngroup
#2. Design mobile forms for users
Don’t ever design for yourself. Design for users.
Users may not like the design that you like. To make a great form, you need to consider the phone size and understand the users’ requirements.
Single Column Form
Research from the Baymard Institute explains that cart and checkout processes with multi-column layouts are vulnerable. Users may skip the fields which are required or put the wrong information in the multi-column form layout.
Single-column mobile form layouts help reduce the chance that a user will be distracted while filling in a form. Helping increase conversions. Hence, single-column should be applied for mobile devices.
Image Source: Baymard Institute
Multi-step Forms
If you have a lot of questions to ask, multi-step forms can be useful as it splits a form into steps. It helps users understand the process and remember what information they have entered. Make sure you put a progress bar to show the entire process to inform users about their progress.
Image Source: Dribble
Minimise Total Form Fields
Shorter is better.
Users don’t like a form which asks for too much information as it takes a lot of effort, hence they abandon the form. The longer the form, the more complicated it is. Ensure you only include the important fields to simplify the process and increase conversions.
#3. Apply automation to your mobile forms
Who doesn’t love automation? Users love it when a mobile form is filled automatically. Here are some automation tricks you can apply:
Autocorrect
Autocorrect helps users enter the correct information if it is placed incorrectly. For instance, their city name or address. This will eliminate the user’s effort to rectify it.
Autocomplete and Autofill
Autocomplete helps users finish a known address or city and can be used to fill the zip code by identifying the city name. Using this automation hack will lessen the user’s effort and reduce the chance of them abandoning the form.
Image Source: Google
Autodetection
Autodetection is one of the best automation tricks you can employ to make your mobile form more user-friendly.
For example, location detection recognizes the user’s location or country using geolocation APIs. Just make sure you request the location information from users to respect their privacy.
This can also be applied for credit card information. Asking for the credit card type can be avoided as it can be detected with the first four digits of the credit card.
#4. Avoid dropdowns
Dropdowns should be avoided for small screens as it will take more steps to choose an option.
Instead, other options can be used to reduce the required interaction from a user.
Sliders
Sliders can be used when you have large ranges to choose from. Users can slide up to the exact range.
Image Source: Smashing Magazine
Steppers
Steppers are great controls that can be used to increase or decrease the range by a consistent number when users have to choose an option.
In the case of a hotel or flight booking app, this option can be very useful where users are supposed to book a room or flight for a limited number of people.
Image Source: Lukew
Segments
Segments can be applied when you have limited and mutual choices.
Image Source: LukeW
#5. Use field labels and masks
Using field masks can help users decrease errors and indirectly lessen their efforts. By displaying the proper format for each input field, like the credit card number, you can speed up the form completing process.
Image Source: Baymard
According to Luke Wroblewski:
- Field masks should be visible as soon as the user starts filling in the form. There is no point making it visible gradually as the user is still guessing the input type.
- Avoid including placeholder text. Users may skip these fields as they look pre-filled.
Keep in mind that the form label shouldn’t be used as placeholder text as it will disappear once the user starts typing in the field.
Field labels
Field labels are important as they describe the purpose of the input controls. There are different ways to place labels in a mobile form. Developers should think of the place for the labels before thinking of the controls.
You could use floating labels, using CSS or JavaScript. This will appear as an inline label in the text box. When the user starts typing, it will start floating upwards and settle at the top of the control box.
Image Source: Android Tutorials Hub
Pro tip: Nail your call-to-action (CTA)
So, you’ve designed your form by following all of these tips but your mobile form still doesn’t convert?
All conversions on different devices, be it desktop or mobile, depend on the call-to-action (CTA). The CTA tells users what to do for the next step and gives an idea about what will happen when they do so.
To have a great call-to-action:
- Ensure you use action words that encourage users to act.
- Clearly, describe the benefits of the step.
Image Source: Dribbble
Wrapping up
Mobile form design is the most significant driver of conversions. When it comes to small screens, it is an even more complex process to understand and optimize when compared with desktop forms.
Following these tips will help you boost conversions on mobile devices.
Guest author: Pete McCain is a technology startup enthusiast, associated with AppVelocity – one of the best mobile app development companies in Canada. He has collaborated with more than 50 entrepreneurs – over the last decade – to maximise growth and contribute to technical excellence.
The post How To Design Mobile Forms To Boost Conversions appeared first on Jeffbullas's Blog.
