.svg){kind=small}
Although we’re big fans of A/B testing different form patterns to find the optimal design for you, sometimes this is not possible. You may not have large enough sample sizes to draw a statistically significant result or you may be designing your form from scratch so have no point of comparison.
For these cases, there are form patterns that, on average, have been shown to smooth the user experience, minimizing unnecessary drop-off and optimizing the number of people who complete the form meaning that you can use them “off the shelf” without worrying that they’ll wreck your form experience.
At Zuko Analytics we’ve seen these patterns work very well in forms that have added Zuko to track user behaviour and, of course, we made sure we incorporated them into our new form building software when we created that.
This article shares 10 of these top tips to deliver a great form experience for your visitors with live examples from Zuko Form Builder to show how they work in practice:
Dropdowns (also known as <SELECT> elements) aren’t the most user friendly formats, particularly for mobile devices, but sometimes they are a necessary evil (if you have a long country list for example).
If you absolutely have to use a dropdown there are a couple of things that you can do to make the experience less annoying:
Error messages are critical in guiding users through your form to a successful completion. If they make a mistake then it’s important that you tell them right away. If you wait until they reach the bottom of a long form and click submit before triggering errors then they’ll be pogoing up and down to try and locate where they’ve gone wrong.
Just as importantly, if they input a valid answer then giving them that big green tick immediately provides a sense of reassurance and removes stress from their form journey.
Don’t just take our word for it, this famous study by Luke Wrobleski showed a 22% increase in form success rate and a 22% decrease in errors made when using inline validation Vs validation on submit.
Have you ever tried to complete a form with dozens of fields all on one page? We have and it’s not a pleasant experience. You’re constantly wondering whether you’ve entered everything right and when the madness will end.
Breaking your form into smaller, manageable steps will keep your user from suffering cognitive overload and dropping out from the accumulation of stress.
If you’re going to do this then we recommend:
Phone number fields are often tricky for users. They’re not sure whether they should include the country code. Are spaces OK? What about dashes?
If your validation is too strict and stops people entering their phone number the way they are used to it leads to annoyance and abandonment. That’s one of the reasons why ‘Phone Number’ is the third most problematic field based on Zuko data.
Instead, limit your validation to the minimum characters needed to determine that a phone number has been entered (usually 8).
Then, use your back end to reformat the number if necessary. Or, more commonly, the people who will actually have to dial the phone number are more than capable of interpreting what the number is themselves.
When you’ve only got a small list of options for a user to choose from, radio buttons are the most elegant way to ask them. One tap and you’re done.
Using other methods such as dropdown menus mean the user has to click to open, scroll down, select their option, adding unnecessary complexity. You can see some of the distraction they introduce in an eye tracking study Zuko ran.
Only consider using dropdowns over radio buttons if you've got a long list of options that would be too unwieldy to put in a radio option.
Microcopy is the lubricant that helps guide a user through the form journey smoothly.
Without copy to provide context and explanation, some questions can lead the form visitor to distraction, confusion and second guessing. Just a small piece of text can be the difference between the user successfully progressing with the form or quitting in anger.
Some good uses of microcopy include:
When you use microcopy, make sure it is clearly visible to the user. Don’t hide it behind a tool tip which most people won’t see.
We’ve all been on forms where we’ve had to scroll back 20+ years (at least) to add our year of birth. Dropdowns and date pickers are hugely inefficient for date fields. Instead, use a simple three text box pattern - three inputs and the user is done.
This isn't just us making it up. Zuko Analytics has eye tracking research on DOB fields that helped us come to the conclusion.
If you’ve got a multi-step form, using a progress bar helps manage user expectations. They know how many stages to go before they are done.
If you are using a progress bar, make sure that the user can bob back and forth between the stages. If you don’t let them go back they’re going to quit in frustration when they realise they’ve made a mistake on a previous stage.
And be darned sure that their previous inputs are saved for them when they do go back. If you’ve nuked all their data they are not going to be happy.
We don’t always want to make a form field compulsory. Some may argue that if a field isn’t important enough to be compulsory then why are you including it at all. However, there are circumstances where it may be warranted.
For example, if you are asking for contextual feedback then forcing people to answer may mean you get nonsense (people answering for the sake of it rather than entering what they believe) that pollutes your data.
If you do have optional fields, make sure they are clearly labelled so there is no confusion.
Ever spent ages prodding your finger at a mobile phone screen trying to tick a checkbox that has been designed for the desktop format?
If you’re designing a form, avoid that scenario by making your radio buttons, text boxes and checkboxes large enough to easily accommodate the average meat puppet of a digit.
If you’d like more advice on optimizing your form experience you can download our Big Guide to Form Analytics & Optimization.
Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.
PRODUCT TOUR
