Forms may not be the most exciting part of web design, but they sure are important. Forms help users send information to sites or apps in order to achieve their end goal.
Your users should be able to complete your forms quickly and easily. However, if you’re not following form design best practices, your forms may be confusing, chaotic and hard for users to navigate. And as you may know, sites with high interaction cost tend to have low conversion.
Spending a little time reviewing your form design could do wonders for your site’s usability, user experience and conversion. Here are ten important lessons for UI/UX designers who want to perfect their web and mobile form design.
Let’s dive in!
10 form design errors and 10 easy ways to fix them
#1 Form design error: poorly-ordered entry fields
The entry fields in your web and mobile forms should follow a logical order. This will help to ensure that users don’t get lost when filling out your form or leave before completing it.
In order for sites and apps to process a user’s request, they need access to the data that users introduce in input forms. If your users get tired, bored or distracted half way through filling out your form, then the form has failed and quite possibly cost you a potential customer.
A good trick Formisimo Co-founder Tom New suggests is ordering your entry fields from easiest to hardest to fill out.
Tom says that users are hardwired to want to finish something once they’ve made some progress. Filling out easier fields, such as name and email address, at the very beginning of the form don’t require as much concentration as filling out harder fields, such as credit card details.
#2 Form design error: vague entry fields
Designing forms with custom fields are great because they give users the freedom to customize their entry.
However, custom fields afford action (meaning users will need to manually input a specific answer), and if your field labels are too vague or your form doesn’t include any labels at all, users won’t know what they’re expected to do. This could either result in users leaving the form before completing it or completing the form with inaccurate data — both of which are conversion killers.
A great way to help users identify what they need to do in a form is with fill-in-the-blank placeholders. Placeholders provide direction to the user, telling them what information is needed from them. Ideally, your placeholders will adjust to the user’s natural thought process, such as this Airbnb example:
Here, a single search field includes a helpful placeholder that helps users kick start their accommodation search.
#3 Form design error: unclear field format
While custom fields like the Airbnb example above offer users more freedom when filling out forms, they can also be overwhelming if the required format isn’t stated.
If you do decide to use custom fields in your form design, you may want to try using in-line validation to help users determine the required format of the field.
Your in-line validation could be in the form of tooltips, popups or red text. Form validation should be instant so that the user can correct their mistake immediately. If the user has to return to an earlier portion of the form later on, their memory load will be heavier and the risk of error even higher.
As UX Guru Luke Wroblewski states, use of inline validation has seen a 22% increase in success rates, 22% decrease in errors made and a 42% decrease in form completion time.
#4 Form design error: long forms
In form design, less is more. There’s no shortage of studies showing that keeping questions brief and only where necessary is going to do wonders for your conversion rate.
However, sometimes long forms can’t be avoided. When that happens, the best way to tackle form design is with stepped forms.
Stepped forms allow you to break up your forms into sections, and if necessary, different screens. Use drop downs or multiple choice with radio buttons instead of custom fields to help users get through lengthy forms quickly and efficiently.
You may also want to include a completeness meter or progress bar to show users how far along in the form they’ve come.
#5 Form design error: input controls are all mixed up
As mentioned above, input controls like radio buttons and check boxes can be a great time saver in form design. However, make sure you stick to standard use to avoid confusing the user:
Check boxes should enable the user to make a multi-selection from a list. Don’t use them if the user needs to actively opt into something, such as a newsletter subscription. As Salesforce points out, it’s not always clear if a user has left a checkbox intentionally or unintentionally blank in forms.
Radio buttons enable users to make a single selection. They shouldn’t be split into sub categories in form design.
And remember, sometimes neither input control is ideal. If you’ve got more than 5 options for the user to choose from, go for a dropdown list instead.
#6 Form design error: users can’t find your form
This one’s a no brainer. If users can’t locate your form or its fields, they won’t be filling anything in.
To make sure your form is easily to locate, pay attention to color and contrast. When designing the visual hierarchy of your site, make sure that your form appears in the foreground, rather than getting lost in the background.
Additionally, think about where you place your form on your website or app. Forms placed towards the bottom of the page are likely going to be ignored.
Heather Mueller has some great tips on form placement, and one of her suggestions is to use a slideup box for capturing leads. As the user scrolls down the page, signalling that they are interested in your content (hopefully!) the slideup box with your form in it will appear.
#7 Form design error: there’s no field focus
Similar to lesson no. six, make sure you offer field focus so that it’s clear which field is being edited at any given moment. Field focus should be a visual cue — such as changing the color of the border or background of the selected input field, or simply showing the cursor in the input field.
#8 Form design error: users have to do all the heavy lifting
Forms that slow users down are frustrating and can lead to increased drop-off, according to Google. One way to alleviate this frustration, particularly in long forms, is to offer autofill or prefill options.
Autofill helps the user complete forms more quickly by saving basic information, such as names, addresses and credit card details, in the user’s browsers. When the user is asked to fill in a form, they will be prompted to autofill the fields with their pre-stored data.
#9 Form design error: unknown errors
Errors are often introduced by the user when filling out a form. It’s normal and can’t always be avoided.
That’s why you need well-designed error messages. If you’ve ever received an error message like this, you’ll know how important error message UX is to the overall experience of completing an online form:
To keep users motivated, make sure your error messages have a clear message and are highly visible. Here’s an example of great error message design:
The error message appears in red (the warning color), right next to the corresponding input field, with a clearly-defined solution to the problem.
#10 Form design error: mobile un-friendly forms
Mobile form design presents additional challenges to UI/UX designers.
For starters, forms are displayed on much smaller screens, with much less real estate to design with. Copy in mobile forms should be short and sweet to keep users focused. Consider using multiple choice input controls to avoid data-input fatigue.
Additionally, think about mobile functionality. Form buttons, check boxes and radio buttons will need to be tapped rather than clicked, and pages swiped rather than scrolled.
Form design for web — Conclusion
Forms need to be usable in order to enable users to achieve their goals. How you design your forms will determine their usability.
We hope these ten lessons have inspired you to take another look at your site’s form design. And if you need additional support, we suggest designing your forms with Justinmind. Our pre-baked UI elements make form design extra-easy. Download your free trial and see what we mean!