Form fields are the life blood of any web or mobile app.
At some point your user will encounter a form in your product (they might want to personalise their experience, you might want them to buy something) and a good form will allow this to happen in a painless, transparent way.
A bad form, however, will turn them off of your product, perhaps for good.
Good form design is a commitment to testing and the power of small incremental changes until the form’s conversion rate is as high as it can be.
When you reach this beautiful promised land, you can be confident in getting return from any investment in user acquisition.
Entire books have been written on form design, but I’m going to give you fixes for 5 common form mistakes.
1. Poorly structured forms
Users scan webpages to see if it is relevant to their interests and forms are no different, so the structure of your form is vital.
Not grouping form fields
Having your form fields all contained as one indistinguishable group will make it hard for your users to scan through and understand the information they need to enter.
Chunking your form into distinct clear groups with subheadings will help a user to understand what information is needed at which point.
Examples of distinct chunks could include Personal information, Address, Payment details.
The number of form fields
Received wisdom in form design states that more form fields increases the drop-out rate.
With this is mind, fewer form fields must equal a better performing form right?
Well, not necessarily so.
Studies have found that removing required form fields or breaking the form into distinct steps can have a negative affect on conversion rates.
How to get around this? Well this will sound flippant, but include as many form fields as necessary. No more, no less.
If you need a user to sign up before allowing them access to your app then ask for those details. If you need to capture payment details before allowing a user in then ask.
But the key point is, do you need to capture that information before the user has the essential core experience that you want them to have? If not, don’t include them.
Single vs multiple columns
This one is quite simple, don’t use multiple columns for forms.
Having a single column of form fields allows for easy scanning, creates a clear path to completion and increases conversion.
2. Poorly labelled forms
Position of labels
Research has shown that placing labels above the form field increases the speed at which a user completes a form and gives the best form completion rate.
Labels placed to the left of the form field slows the user down by increasing the eye movement required to process the form. Sometimes you want to slow a user down so that they’re aware of the information they’re inputting, so left-aligned labels might be more suitable.
Unclear text labels
Form field labels should succinctly tell the user what information is needed. They shouldn’t contain extra words or hints.
3. Bad Form field design
Poor helper text
We’ve all entered a new password, pressed ’Submit’ and have been thrown an error saying that the password didn’t have the right number or type of characters. Ugh! Frustrating.
Helping a user understand what input they need to add is vital in creating a form that converts, and helper text (when needed) should be carefully considered and placed.
Studies have shown that helper text should be shown below the form field, not on it.
If the helper text is shown on field, users can mistake the field as having been completed.
It’s also confusing when a user selects a field and the helper text disappears. How many characters did the password need to be?
Form fields are too large
Where possible, give the users a clue to the type of information they need to add. If you want them to enter a date, break the form into separate fields or select boxes, one each for day, month, year.
Formatting form fields
Input masks can help guide users for the information that they need to enter.
Although they look like in situ helper text (bad) they don’t disappear when the user starts to input values. This can help users understand whether they’ve entered the correct credit card number for example.
4. Unhelpful forms
With more and more people accessing forms on a variety of devices, anything that can be done to help pre-fill a form will help the completion rate.
Pre-filling location information for dropdown menus, such as country will require one less field to enter, and speed up the process of completing a form.
Filling out an address is often the most time-consuming and problematic part of a form, so allowing a user to find their address from a postcode lookup will reduce the number of fields they need to enter.
Services such as PCA Predict allow you to easily implement address lookup without having to build the complex tech needed.
5. Bad button design
Volumes have been written about designing buttons that convert; these quick tips will help.
Buttons that don’t look like buttons
Buttons should look clickable. They should be distinct from a text link, and should have a colour that brings them forward. It should be blatant that the user should click the button.
Generic button labels
Generic words like ‘Submit’ give no idea what will happen when you press a button, which raises a user’s apprehension (the fear of Mystery Meat).
State what action will happen when the button is pressed.
’Create account’, ‘Complete order’, ‘Download document’ are more compelling and give the user an idea of what will happen.
Who’d have though the simple form could be so complicated and yet so important? But it really is.
If you can avoid these five common mistakes then you’ll have a good basis for creating a web form that converts:
- Poorly structured forms
- Poorly labelled forms
- Bad form field design
- Unhelpful forms
- Bad button design
We’ve spent years improving forms through design and usability testing, so if you’re a startup or small business that needs help getting a form to convert then get in touch.