For something so ubiquitous, it’s amazing how wrong websites still get forms, and the huge impact a poorly designed form can have on conversion rates.
Forms are an extremely commonplace website feature. We use them for all manner of contact reasons:
They allow people to make contact with you, without the need to list an email address in the public domain, which would ultimately end up getting spammed to death.
They’re also very convenient for conversion tracking through whichever analytics software you use.
They also give an alternative contact method for those who don’t like making telephone calls, and give the impression of less commitment.
For something so ubiquitous, it’s amazing how wrong websites still get them, and the huge impact a poorly designed form can have on conversion rates.
So here are 11 UX tips to help you get your all important forms right.
It sounds obvious, but it’s amazing how often this is forgotten; whether for stylistic reasons, or because forms are an afterthought. Your CTA button should be clear, should contrast from the rest of the form, and be labeled descriptively.
Contrast is important for accessibility, as using low contrast colours can make things difficult for colourblind users, and those with other visual disabilities.
Users need to be able to easily see how they submit their form entry, be certain they are clicking the right button, and the label should be concise and action-orientated to leave them in no doubt.
Form fields should be of a size that means they are easy to use across devices. So this means they need to be large enough to be finger friendly, for those on mobile devices.
It is infuriating if you want to complete a form on a website in your mobile browser, and the form fields are so small you struggle to click into them, or see what you’ve entered clearly.
Think about how users on different devices will view and interact with your forms.
Test your forms and test them often. Things break. So regularly checking your full form process is working correctly is important.
If you’re using an API call to feed data into your CRM, then test that too. Test that email confirmations or notifications are working properly. Someone may have contacted you and you missed the notification, and a week later they call – sound familiar?
Have your form submit onto a confirmation page, not a thank you message, sometimes these are completely missed. Not an iframe, and not a page refresh that takes the user back to the top of the page. These are just annoying at best, or plain confusing.
Use form states to make it clear to the user which field they are currently in, and automatically activate the first field, as a clear signpost of where to start.
Your form may use pretext within the fields, such as examples of how to fill. Make sure this pretext disappears when a field becomes active.
If your forms make use of dropdown fields, ensure there are not too many options. The user shouldn’t have to scroll through a huge list. This can be time consuming, and particularly awkward on mobile. Also make sure and drop down menus are sensibly organised; whether alphabetically, thematically, or in some other way that makes sense.
Limit the length of your forms and don’t add too many steps. People are weary and don’t want to hand over too much information. Keep it to what you absolutely need. Numerous studies have shown that conversion rate is dramatically affected by form length.
In wanting to qualify them as a good prospect, it may be tempting to ask them a million questions. Resist this by asking as little as possible, and think about whether there’s a single question you could ask them which will qualify them adequately.
Are your forms compliant with privacy laws in your country, or the countries you operate in. For example GDPR. Are you automatically adding entries to your database? If so, ensure you are getting explicit permission to do so. Implied consent is not adequate.
Keep your form to a single column. It is better for mobile users, and less overwhelming in general.
On top of this, nearly everybody reads a web page in z pattern. A single column prevents distractions and reduces completion time, as it funnels the users focus.
Prefill form fields like those which use postcode lookups etc, can save your user a lot of time and irritation.
Alongside this, many browsers now offer autofill options, which fill form fields using information a logged in user has entered into forms previously on their device. So make sure you use field titles that browsers will recognise eg. name, phone number etc.
So there you have it. 11 tips to improve the UX of your forms.
If UX is something you’re looking at in more detail, but you don’t know where to start, we offer a free UX review for WordPress websites. It can highlight key areas of frustration that your users might be finding, and provide recommendations on how to make the experience easier so that your website converts better.
They may sound obscure. But wireframes are actually a core part of the web design project, helping you prioritise UX and reducing subjectivity in the success of your web development project.
So you’ve spent time researching the product you are about to buy, read reviews and done your due diligence on ...
Forget what you know about WordPress, we make it even easier. Want to know how?
