How behavioural design creates the best user experiences
This is the second post in a two-part series: 10 quick wins to increase your web form conversion rates. You can find part 1 here.
6. Inline question mouse highlighting
Comparethemarket.com offers a great way of using the user’s mouse movement to highlight the question they are on.
This helps to keep the user focused on what’s important – completing the quote. However, if the user does happen to become distracted, upon their return, the field will continue to stand out. This will again reduce the effort placed on the user.
As you’ve got this far I’ll give you another free tip (turning your forms up to 11)! When a user completes a field, why not offer them visual confirmation of their achievement? At the start of 2014 we user tested a number of Axure interactive wireframes. We found that placing a tick next to a completed field, not only offers the user visual confirmation and reassurance, it also helps to offer a visual progress bar throughout a question set.
7. Placeholder text in each field
Rather than leaving fields blank, pre-populating them with common answers can really help.
Hopefully, you have a rough idea of your primary persona. Do you know what users normally select in your form? Could you pre-populate less business-critical questions with some answers? This will reduce interactions, increasing the completion rate for those types of users.
On questions where you can’t pre-populate the answer, be sure to add placeholder text. By leaving the field blank, you’re missing an opportunity to help your users. Being able to see an example of the answer will help to reduce the effort placed on the user. We also found that it helps to reduce the chance that users inadvertently skip a question.
8. Tooltips accessibility
During usability testing, we noticed that a particular field was causing users to question “why” the company actually needed to know this information (“what is your marital status”). The reason why the company wanted to know this was explained in the tooltip. However, the tooltip in question could only be accessed once the user clicked into the field.
Forms and tooltips go hand in hand. If you’re asking users to spend time filling out their information, make sure information within tooltips can be accessed before the user interacts with the field. The most standard way of displaying a tooltip icon is a small question mark.
Bonus tip: If you do implement tooltips, be sure to check them on phones and tablets, they’ll need to be tappable with a minimum of 36px to ensure they’re easily interacted with.
9. Progressive disclosure
Users are put off at first sight of a long and complicated question set. It’s no coincidence then why moneysupermarket.com, confused.com and comparethemarket.com ask users registration numbers before starting a quote. By presenting a basic question to start a quote, users are not immediately put off, whilst the initial investment (no matter how small) increases the likelihood that they’ll complete the rest of the form. This is because of the sunk cost bias – once a user has already committed to and spent time on a part of your form, they are motivated to see the task through to completion to avoid the initial effort going to waste.
Whilst gaining commitment from the user can help to reduce bounce rates, there are other techniques to hide a large question set.
A simple option would be to hide certain future questions until the user has filled in another. Google Compare does this dynamically with the protected no claims discount field. There are quite a few different ways of applying the technique to reduce the initial impact on users when they first see the form.
One last way of reducing the impact on users would be to split the questions over multiple pages – a progress indicator is something worth considering here too, to let users know where they are in the process. However, as with any changes you make, be sure to test it thoroughly as also having a ton of pages can just as easily put users off. The trick is to tweak and test iteratively until you find the perfect balance.
10. Ambiguous Answers
Finally, let’s look at the pre-set answers to your questions. When analyzing them, you’ll need to ask yourself “what happens if the user doesn’t fit into that option you’ve provided?”
Users will likely do 1 of 4 things:
- If you have a telephone number/email/live chat, (hopefully) they will contact you to find out what to do.
- They may try to guess the answer (your analysts will hate that)!
- They may search online to find out the answer, and if you are not hot on search marketing search terms, then you may lose your business here.
- They give up, and you’ve lost a potential customer as well as damaging your brand.
The answer to this is to offer an “other” or “not sure” option. This won’t please analysts who want clean data, but it’s better than losing the sale. Once implemented, it will significantly reduce the chance of users dropping out over confusing or complicated questions.
If you’re interested in capturing more information (and you don’t mind analyzing it), it’s worth displaying a free text field to capture what those “other” responses are. This way you can work them back into the question set and clean up your data.
I’m conscious that we’ve gone through a lot of different points in this series. We’ve covered a lot of common mistakes in form usability that can affect the user’s journey and ultimately your conversion rates, many of which can be very quick and easy to change. However, whilst we’ve seen that these common mistakes can reduce your conversion rates, please do not make the number one mistake of making changes without testing them first. What works on one site may not work on another.
The primary reason behind this article is to help you to find ways of improving your form usability. It pains me to visit a website and come across, time and time again, some easy to rectify mistakes. The user experience of your site matters, do not underestimate the value of a good experience.