From hating the paperwork at their desk jobs to filling out their insurance form online, the one activity that users disdain most is filling out forms. And yet, forms are an absolutely unavoidable part of our business.
When it comes to designing UX, forms are an uphill battle for every designer. You want the users to give you the details you need without feeling bored or intimidated. You want to meet user expectations and increase engagement, but you also want them to stay patient while you ask them a dozen questions. The only way to do that is by making your forms as unobtrusive, short and simple as possible, reducing the amount of typing, clicking as well as reading your users have to do.
Here are 10 best practices that will help you design better forms that gather the information you need, without making your users want to abandon ship:
1. Strictly Censor Your Form Fields
Baymard Institute, an independent web research company found that an average checkout flow has 14.88 form fields, which is two times more than the required number. For users with low attention spans and far too many options, such long forms are a major put-off. If they have to answer too many questions before being able to get any real benefit from your app or website, they may not want to continue.
To give your users a better experience, you need to keep your forms short, concise and to the point. Here are a few tips:
- Only ask the most essential question and eliminate anything you can do without
- Have only one form field for name, instead of separate first and last names
- Use collapsible fields to hide any form fields that apply conditionally
- Use smart defaults like ‘billing address = shipping address’ and ‘default area code’ based on user’s location
2. Auto-detect City and State from Zip Code
You don’t want to make your users work too hard. Mobile phones and apps are after all meant to make their lives easier. So make your forms navigable with as little work as possible. Users should be able to get through with the least amount of typing and clicking.
One very effective way to do this is to auto-detect the user’s city and state based on the zip code entered. This is a really simple step but yet, 60% of the top e-commerce websites don’t do it. When the user’s city and state show up automatically upon typing the postal code, not only does it minimize their work but also adds a surprise element and delights the user by personalizing their experience.
3. Explain Your Requirements
When you ask sensitive personal information like phone number, home address or social security number, it is easy for a user to feel skeptical. Be sure to clearly explain why you need this information and assure them that their privacy and security is your top priority.
Use messaging like “Give us your phone number so we can call you before we show up at your door with a delivery”.
Be honest, be casual and don’t make your messaging sound like a legal disclaimer that is only more intimidating. Avoid overly formal language like “The provided phone number will be used discreetly and your privacy will be held supreme”.
4. Use Single Column Vertical Forms
Eye-tracking studies have found that single column forms are less intimidating and better accepted than multiple columns. Google’s UX researchers also observed that aligning labels above the form fields gives users a more linear and comfortable interface compared to aligning them on the left of the field. This is also more conducive to the mobile screen interface which is probably the medium most of your users are adopting.
Image: https://research.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html
5. Auto-format Appropriately
Credit card numbers, phone numbers and other such numeric details should be formatted appropriately so that they auto-space for easy readability without the user having to add spaces.
Yet however, have them in just one field. Don’t slice fields for phone number or credit card numbers. Slicing fields adds confusion and cognitive as well as click-type load, even if you deploy auto-advance.
Don’t Do This
Also remember that if you have users from different countries, their phone numbers will be formatted differently. Even their zip codes are formatted differently. Be sure to account for international conventions in such fields.
6. Use Placeholders and Field Labels Carefully
Field labels are the questions you are asking. They sit above the field, indicating what needs to go into that field. Placeholders are example inputs, giving the users a hint of how to fill this field. The two are very different, and both need to be used wisely.
The form field must always sit vertically above the form field. It cannot be replaced with a placeholder, as placeholders are meant to disappear when users click inside the field. In the absence of a label and when the placeholder has vanished too, users have to strain their memory to remember what that field was for, and strain is your enemy.
Placeholders are only required in a few places. Do however make sure they disappear as soon as a user clicks inside that box. Some forms require the user to manually erase the placeholder and then enter their text which is too much extra work, and confusing as hell. Don’t be that guy.
7. Use Images Wherever Possible
When offering the user a choice, use clickable icons or images wherever possible instead of plain text. This helps you minimize clicks and reduce cognitive load, leading to far greater engagement.
8. Use Predictive Search and Auto-Complete
Add all possible pre-defined options in the fields so as to minimize typing and giving the users ready-to-use words and phrases. In case the users types out the entire word anyway, be sure to employ auto-correct and don’t offer a ‘no-match-found-please-check-your-spelling’ page.
9. Nobody Loves Captcha
Using Captcha in your forms could lead to a whopping 30% drop in subscribers/signups. Yes, spam management is an issue but your users don’t have to share the burden for you. You need to device other mechanisms and leave the users out of it as much as possible.
10. Denote Errors Very Very Clearly
There is nothing more annoying than a form not going through to the next step or indicating an ‘error’ without clearly communicating ‘where’ the error is. Indicate errors using very clear, well highlighted messaging, leading the user’s eye to the exact field that needs correction.
Image: https://material.io/guidelines/patterns/errors.html#errors-user-input-errors
Wrapping Up
Throw in animation and color if that suits your audience, and see if you can make forms fun, but that could be hard, as forms will be forms. All you can do is make them easy to fill, non-intimidating and as less boring as possible. And that, you will be able to achieve if you follow these 10 best practices. What else would you like to add to this list? Go on, share with us.
Author Bio:-
Almeda Brook is a freelance writer for MoveoApps,her skillfulness is writing about technology, business and digital marketing. Previously, she worked as a Content Marketing Strategist at a software startup. She graduated with honors with a dual degree in Business Administration and Creative Writing.
Showcase Image Credit: Pexels
