UX For Forms That Convert
Any kind of site that uses input forms needs to consider the UX (User Experience) if those forms are to do the job that they’re intended for. As mobile is now used so extensively to access the web, forms also need to be mobile compatible. Whilst it’s desirable to ask for as much information as possible, this is something that can easily put a user off. With that in mind, let’s have a look at how to design forms that users want to fill in.
Depending on the type of site you have, forms will make up some part of it. For many sites that don’t sell products, these will take the form of contact and newsletter forms. For ecommerce sites however, input forms make up a part of the overall checkout flow and care should be taken to ensure that the flow is logical and that it prompts users to progress further towards checkout.
Before you begin, think about what the form is for and where it can be best placed on the site to encourage signups or any other action. For some sites, this will just be a case of placing a contact form on the right page. For others, it might be about setting up a specific landing page so that you can capture the details of people interested in a certain product. Or it could be that you set up a page for your users to access downloadable content such as whitepapers, eBooks, case studies or other content.
Whatever the case, your forms should:
- Encourage the user to take action
- Contain input fields that gather specific information
- Have labels that display properly both on desktop and mobile
- Be well positioned
According to Justin Mifsud, writing for Smashing Magazine, forms are generally made up of six elements.
- Labels – these tell the user what to type in which field, e.g. name, address, etc.
- Input fields – the boxed area in which a user types the information.
- Actions – button or link that accompanies the form and performs an action (sending information) when used.
- Help – link for users to understand how to and why they are filling in the form.
- Messages – text that tells the user either that the form hasn’t been filled in correctly, or that it’s been sent successfully.
- Validation – ensures that the information entered matches the parameters set by the designer (e.g. where the @ sign is missing from an email field).
Labels and Input Fields
It’s important in the first instance that you consider mobile users and how they will enter information. A common mistake seen in mobile when a form has been designed for desktop is that the labels are misaligned with the input fields. The way to overcome this is to align vertically as horizontal alignment can cause “a number of UX issues” according to David Moth at Econsultancy.
For example, take a look at the two forms below for Debenhams and New Look and you’ll see that the former is much more user-friendly than the latter, which appears cluttered and confusing.
You should also consider that mobile users will have to click into the input fields with their finger and as such should follow the fat finger rule. Touch targets should then be big enough for the user to click into comfortably without encroaching on surrounding targets. For example, when a user clicks into one box and the curser ends up in another.
The pixel width for a touch target for somebody using an index finger then should be around 57px. However, lots of people use their thumb on mobile too and the ideal target for these users is 72px.
Image: Smashing Magazine
Your choice of button is also important and you should consider everything from its size, to the text written on it and the colour. An A/B test carried out by Hubspot for the Performable website tested two buttons, one in red and another in green. The red vs green button debate is a familiar one to many designers as we tend to associate red with ‘stop’ or ‘delete’ and green with ‘go’.
With this in mind, you would be forgiven for thinking that green would be the better choice as a call-to-action button. However, the test found that red was the preferred colour for users and implementing the red button increased site conversions by 21%. A separate test carried out by Dmix also found that the red button outperformed the green and increased conversions by 34%.
So when it comes to your users, it pays not to assume anything, instead you should carry out an A/B test for every element on the form.
Number of Fields
When it comes to the number of fields you should have on a form, less is more. Research carried out by Formstack found that reducing the number of input fields to less than 10 increased conversions by 120%. Taking it a little further, it was also found that reducing the number of input fields to 4 or under increased conversions by 160%.
So the more you ask of your user, the less inclined they will be to take the desired action. This is especially true of mobile; it’s not particularly easy to type on mobile so if you ask the user for their name, address, phone number, DOB, name of their dog, they’re not going to be obliging. Ask for only the information that you need and nothing else and you will gain more from it.
Yes, it’s desirable to know more about your users, but it’s not necessary, so don’t do it.
Forms are often something of an afterthought for some, who simply cobble together a standard form and forget about them. But forms are incredibly important as they are a part of forming a relationship with your user. Pay careful attention to how they are crafted, considering and testing every element and you will be rewarded with users that want to give you their information.
You can consider using light boxes for simple newsletter signup forms, but you should take care and ensure that the user has been on the site for at least 30 seconds before the box appears. Popup boxes annoy the user, but these have a certain amount of success if they’re used correctly.
You can also consider using social logins, as these are a quick and simple way for users to register without the need for filling in forms.