Over 87% pf the world’s population now owns some sort of mobile device. That’s more than 6.5 billion people interacting with mobile UIs every day. Mobile UI design is now an integral part of everyday life, whether we realize it or not.
Among these billions of daily mobile interactions, forms have a important role. Whether it’s signing up for a service or a social media network, getting groceries online or personal accounting, forms are the gateway between users and their desired goal. Software developer Nick Babich calls it, “the final step of the journey to the completion of goals.”
However, just because forms are ubiquitous doesn’t mean they’re easy to design. Far from it in fact. The challenges of designing user-friendly forms for mobile devices range from lack of screen space and unpredictable internet connection, to user abandonment, low conversion rates and the vagaries of the thumb zone.
These 5 UI patterns will go a long way towards improving mobile users’ experiences with forms and, hopefully, improving conversion rates too.
When it comes to user-friendly mobile forms, cutting input time is the holy grail. Luckily, mobile devices are jam full of sensors and data. This can help you create a more fluid form filling experience for users. For example, GPS sensors can be used to auto-fill the location field on a form. Kayak does this for San Francisco users automatically when they land on the page.
Of course, you should give the user the option to change any of these auto-filled fields if they want to as well; a trusty drop-down menu should do the trick.
Pro-tip: Improve the UX of drop-down menus by using open predictive search fields, listing the closest relevant results as a customer types.
The more minimalist a form is, the more likely users are to interact with it. But despite our best efforts towards minimalism, some forms still turn out to be lengthy and heavy on user input requirements. On mobile, endless scroll forms with multiple input fields can lead to user confusion, missed information and abandonment. This is where stepped UI patterns come in handy.
A stepped form involves breaking the user’s input process into stages or steps (hence the pattern name) and presenting them individually, like Autoglass.
Users are entering the same amount of information, but the process is broken into bite-size chunks. This creates a sense of progression and helps the user visualize the end-goal on the interface as the final step.
This UI pattern is best used in situations of tedious data entry, such as purchasing a service or applying for official documentation. If you’re designing a stepped form in a prototyping tool like Justinmind you can test the user flow using Scenarios. They allow you to link interface components with specified actions and get a bird’s-eye view of the user flow.
Space may be at a premium on mobile, but that doesn’t mean it’s okay to create forms that sprawl off the right of the screen. This forces users to horizontal scroll as they fill them in. It’s much better to optimize the space available with a vertical alignment pattern, as UK high street store Marks and Spencer does.
This kind of top-line alignment boosts user confidence and minimizes the chances of missed fields and user drop-out.
Everyone can probably sympathize with the frustration of filling in a long, tedious form. Then they click “Submit” and see a ton of error messages next to the entry fields. Avoid user frustration by using an inline validation pattern in your mobile forms: in inline validation, the UI evaluates the data entered as the user enters it, approving or rejecting answers on the go.
This kind of continual feedback is reassuring for users and goes a long way towards mitigating the irritation of having to fill in a mobile form. Also, with the right use of microcopy it can be a great opportunity for branding: check out these 10 great examples of microcopy for inspiration.
Explicatory Error Messages
If users do enter invalid information, it’s good practice to tell them why it’s invalid. Take the example, from Amazon.
Best practice error messages follow Jakob Nielsen’s guidelines: they are written by a human for a human, precise, visible and actionable. Clear error messages should be used on both desktop and mobile forms. However, remember that mobile users are less likely that desktop uses to make use of the back or refresh buttons. Ensure that they don’t have to by providing error messages that allow them to move forward at all times.
A high fidelity prototyping tool will let you design as many different error messages as you want. Then test them out on real users before making a final decision.
Forms are often the only thing that stands between mobile users and their goal. However, users often find them tedious and irritating. Save their headaches by following UI patterns that minimize user input and enable users to reach their goal. Your users, and your conversion metrics, will thank you for it.
This guest post is by Cassandra Naji. She is the Marketing Content Editor at Justinmind, a prototyping tool that allows you to prototype web and mobile apps so you can visualize and test your software solution before writing a single line of code. Before she was a techie, Cassandra was an old-fashioned journalist and communications professional in Cambodia and Taiwan.Buffer