10 Best Practices for Designing User-Friendly Forms
Forms are difficult. Forms have been difficult since digital ever came to exist. A lot has been said on this topic, from the discussion on usability of web-forms in the 90s , to when these web-forms were tailored to handsets, and to current day when UX experts have various opinions on what makes forms user-friendly (as in this, and this, and this). Forms make or break your online interactions. They usually require users to do a lot of typing, checking the accuracy of filled-in information, and often error-fixing. Since forms are usually not the users’ most favourite thing, it is essential to make filling out forms as easy and user-friendly as possible in order to keep your users interested.
While working on an insurance application app, which required a lot of forms and data inputting, we discovered a lot of inconsistencies across what is considered a good mobile form user experience. What was considered common-sense in form behaviour to some, was not clear to others. So, we decided we should create a rule. More like a best practice, really. In the end, we made ten of them, because, you know, all the good things come in top 10 lists.
And thus, without further ado, when designing usable and useful mobile forms, please consider these 10 practices.
Best practice 1. Minimise the forms.
Before you even get into the details of your forms, ask yourself: “Is this form really necessary?” If you hesitated while answering that, re-think the purpose of the form.
Best practice 2. Minimise the typing.
Let’s just admit it, typing on a smartphone, no matter how big they are getting, is a pain in the fingers. For the convenience of going through the forms without the keyboard appearing and disappearing all the time, make use of all the amazing possibilities of touch interfaces, such as swiping, scrolling, tapping, multiple choices, and so on. Works like a charm, I promise.
Better yet, check if you can you use camera, GPS, or other sensors in the smartphones to make filling out the form easier.
Best practice 3. Simplify the typing.
If you really do need your users to type, at least make it easy to do so.
3.1. Use the right keyboard (to match the input data you need).
Depending on the type of input that your field requires, you can match the keyboard to the input field, so that your user can start typing immediately instead of having to switch to the desired keyboard. Does the input field require numbers as input? Then display the numeric keyboard — it will save your users one click of changing the alphabetic keyboard to the numeric one.
The keyboards that have the controls with next/previous arrows and “done” make navigating through the multiple-field screens much easier.
3.2. Prefill whenever possible
Has the user given this data previously in the app? If there are recurring instances when a certain piece of information has already been provided by the user, make sure the information is saved and can be reused (pre-filled) as much as possible throughout the app to avoid extra work. Don’t you love having conversations with people who remember things you said to them previously?
3.3. Be smart
Can you fill the field based on other information you have at hand?
The credit card type can be recognised from the card number.
In the Netherlands, the street name and city can be filled in automatically by knowing only the postcode and house number of the user.
Best practice 4. Offer field focus.
When users are required to fill in multiple fields, you don’t want them to get lost in the form. The input field that is being edited should always be visible, along with any hints, or error messages associated with that field. The form scrolls upwards as the user types so that they see what is coming up next.
Best practice 5. Validate errors as you go.
The last thing you want is for your user to realise they’ve made an error just after they’ve finished filling out a form and must now go back and correct them. Instead, check and reveal their errors in real time. While you’re at it, if the field is mandatory, mark it as such. Saves a click and inconvenience to the user. As Nick Babich puts it ‘prevention is better than cure’.
Best practice 6. Do not mask your passwords.
A lot of mobile forms involve registration or some sort of sign-in. An essential part of such forms are passwords. While there is the legacy of security coming from web forms, we highly recommend not to mask passwords. Pioneered by Luke Wroblewski, this behavior is becoming more usual: due to the personal nature of mobile phones, it is natural for users to hide their device out of prying eyes when typing in passwords. In addition, as it is known that people stick with default choices, not masking the password by default cuts down on typographical mistakes while still providing the option to hide the password when necessary.
Best practice 7. Auto-everything.
Automatic capitalisation. Autocorrection. Autosuggestion? Sure, do all of that.
Automatically capitalising words, such as names or surnames when filling out forms may help the user go through the form faster without having to switch between lower and upper cases. However, avoid enabling anything auto on email and password fields. If the emails are auto-capitalised, the user might want to edit the first letter in order to avoid delivery issues. And don’t even get me started on how big the problem would be if the password fields were also auto-capitalised.
Best practice 8. Let the users know where they are.
If your app involves not only multiple-field screens, but also multiple screens of forms — make sure to give the user a progress status. Knowing where the user is in their progress of form-filling can help improve their orientation within the app, and provide an easy way to go back to previous screens when necessary. These can be accomplished using progress bars, breadcrumbs, or simply a counter for the amount of steps.
Best practice 9. Optimise the mobile real estate.
Visual design has a great deal of influence over the user’s experience of the app interface and, in this case, the mobile forms. If the user lands on a screen with an overwhelming number of input fields, they might get the urge to quit. In order to reduce the cognitive load for the user, it is important to keep the visual clutter to a minimum. While the highly-respected Nielsen Norman Group promotes otherwise, I believe that having the labels or placeholder texts within the input field may save some real estate space and provide an aesthetic appeal. The experience can be enhanced by transforming the placeholder text into labels to remove the short-memory strain and other concerns presented by Nielsen Norman Group. This way, you can achieve a visually attractive view, because allowing your users to easily complete your form is the first step to winning their hearts.
Best practice 10. Test across systems and users.
Last but not least, after you have created your awesome forms, remember to test the experience across systems, screens, setups and users especially, if you support small-screen devices, such as the iPhone 4 or Samsung-mini series — make sure your forms are consistent to the original designs..
In conclusion, sticking to the principle of “less is more” when designing mobile forms does half the job for you. By requiring as minimal user input as possible, and making the essential data-filling feel as painless as possible, you can help enhance the user’s interactions on your app. These best practices will hopefully help you in creating usable, useful and beautiful mobile forms.
