Zuko Blog

Form UX Design Tips: Best Practice Examples

Form design patterns that help optimize conversion

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:

  1. Use defaults and smart search on your dropdowns
  2. Use live inline validation
  3. Break long forms into multiple steps
  4. Don’t use overly strict validation on the phone number field
  5. Use radio buttons for small option lists
  6. Use microcopy to provide hints
  7. Use 3 text boxes for date fields
  8. Include a progress bar and let the user move between stages
  9. Label optional fields clearly
  10. Make tappable elements mobile friendly

1. Use defaults and smart search on your dropdowns

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:

Putting common options at the top and including a search function means this user could easily find the country they needed

2. Use live inline validation

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.

Live validation means that users are notified immediately if they make a mistake

3. Break long forms into multiple steps

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:

Breaking the form into multiple steps avoids overloading the form visitor

4. Don’t use overly strict validation on the phone number field

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.

Keep the phone number field simple - let the user dictate how they want to enter their information

5. Use radio buttons for small option lists

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.

Radio buttons only require one click to complete

6. Use microcopy to provide hints

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.

This is a great use of microcopy to reassure customers and to explain what is needed

7. Use 3 text boxes for date fields

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.

8. Include a progress bar and let the user move between stages

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.

A progress bar shows visitors how much of the form they have completed and how many stages are still left

9. Label optional fields clearly

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.

A clear "optional" label leaves no room for doubt

10. Make tappable elements mobile friendly

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.

Zuko Form Builder specifically included elements that can easily be tapped by a human thumb!

If you’d like more advice on optimizing your form experience you can download our Big Guide to Form Analytics & Optimization.

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
DOWNLOAD THE EBOOK
(No email needed)

More from our blog:

Video Workshop: eCommerce Checkout Teardown
We review an eCommerce checkout, looking at the good, the bad and the ugly
Video Workshop: Fixing your forms
Check your form for these common UX issues that are causing abandonment
How to Break Your Online Form and Why It’s Good for Business
Uncover UX issues by behaving badly on your form

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
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io