The Big Guide to Form Optimization and Analytics: Section 3

Best Practice Form Design

This is the final substantive section of the web version of Zuko’s eBook guide on web form optimization and analytics. A downloadable version of the guide can be found here.

The web version of the guide is split over multiple sections to make it easier to parse. This page contains advice on designing your form. The other sections to check out are:

Section 1 - General Principles of Form Optimization

Section 2 - Common Form Issues and High Impact Tips

Form Analytics and Optimization Glossary

Navigation

If you are interested in a particular piece of advice you can navigate to it by clicking the appropriate link.

Clearly Identify Optional Fields

Avoid Drop Downs

Size Form Fields accordingly

Set HTML types to the appropriate format

Be careful with Static Defaults

Don’t use CAPS for labels

Use Mobile’s native features

No “Nuke” Buttons

Use Single Column Layouts wherever possible

Easy before Difficult

Finger Friendly Touch Buttons

Accessibility for All

Zuko's Big Guide to Form Optimization and Analytics Cover Shot

"If you want higher conversion, download it!"
Craig Sullivan - CEO, Optimise or Die

Best Practice Form Design

Our final section gives you specific tips on the design / UI of your form. There’s  a wealth of advice out there from the UX professionals. We’ve  collated only  the most impactful points on best practice. Rather than going deep into each topic, we’ve opted for a “quickfire” overview of each tip. By providing you with the essential starting points, you can make your own mind up whether  you need to dig deeper. 

1. Clearly identify optional fields

Before you include optional fields,  be darn sure you need them. Don’t lengthen the process with information that isn’t necessary. 

Assuming there is a good reason to include the field, the key things to remember are:

Tips on identifying optional fields


2. Avoid Drop Downs

Who wants to scroll through a list of 195 countries to find the right one? Drop down menus are notorious for negatively impacting user experience. The problem is exacerbated further in mobile where fat finger syndrome adds another layer of potential mis-taps.

Avoid drop downs if you want to maximise your form's conversion rate
Not a great user experience


The pitfalls of dropdowns are:

Unless absolutely necessary, we recommend avoiding dropdowns and instead, try one of these alternatives:

(i) Radio buttons.

Let your user pick from the options displayed on screen. It’s a one click solution compared to the 4+ interactions needed for a dropdown. If your list of options is so long you think it is unmanageable, consider using an “Other” button alongside the most popular options.

Radio buttons are a good alternative to dropdown menus on your form


(ii) Slider or increase / decrease buttons

If your field is numeric with a wide range of possible values, these give a great degree of flexibility whilst keeping the user experience as seamless as possible.

A slider is a good form option for numerical values
Slider
Example of form field increase and decrease buttons
Increase / Decrease Buttons


(iii) Autofill text field

If you have a huge list of options that are specific and well known (think countries), you are best using an auto search / auto fill text bar. Users know their own country so it’s  a much  easier experience for them to tap in  the first few characters and select from a smaller range of options, rather than giving them no option but to trawl through a list of 200.

An example of geographical autofill text
A good example of autofill hooked into Google’s API


(iv) Simple text box

When you’re looking to capture a date of birth or something equally simple, just stick with a text box. It’s 6 key presses and done. No messing about with scrolling or other interactions.

Eye-tracking research commissioned by Zuko revealed that simple text boxes that were clearly labeled, distracted the user least and were completed in the shortest time.

Simple text boxes often deliver the best UX for your form optimization
The most user friendly way to ask for DOB


3. Size Form Fields Accordingly

A field’s input box should be in proportion to the amount of information required. This acts as a visual constraint and manages the users expectations on how much text to enter (rather than having to give them complicated instructions). As an example, a “House Number” input box should be much shorter than a “Street Address” one.

Keep the field sizes on your form the appropriate length


4. Set HTML types to the appropriate format

To optimize the mobile experience of your form, you need to make sure the end device renders the most appropriate keyboard for each field.

To do this, you must set the field to the appropriate input type. The relevant types you should be using are:

The correct HTML settings for your mobile form fields

Screenshot examples of correct and incorrect HTML formats on a mobile form


5. Be careful with static defaults

Static defaults are the answers the system pre-selects for all users. The user must then make an active effort to change this default. This way of doing things is  popular with dropdowns (another reason not to use them). The danger is that the user sees an answer and hops quickly on it, without checking it properly. This leads to error messages later in the form and inaccurate information within your CRM system.

Only use static defaults if the vast majority of your users fall into that category (think country if you only sell into one geography). We’d only consider using them if 90%+ of your users fall into the default.

Pro Tip - If you need to add defaults, it’s much better to use smart defaults. They suggest an input based on what you know about the user already. For example, if you know the user identifies as male, you can set the default Title field to “Mr”.
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

"If you want higher conversion, download it!"
Craig Sullivan - CEO, Optimise or Die

6. Don’t use CAPS for labels

We’ve  discussed how to make sure your labels are clear and next to the relevant input box. You should also avoid going into SHOUTY mode. Studies, such as this one by Miles Tinker show that the use of all capitals slows down the user from scanning and processing the label. They create unnecessary delays in form completion.

Example of not using capital letters in your form field labels


7. Use Mobile’s native features 

With all the inbuilt functionality that mobile devices have today, it would be crazy not to take advantage of it and use it to improve user experience. Specific functions worth exploiting are:

(i) Camera

The mobile devices camera can be used as a scanner to pick out relevant information from a document. Rather than forcing a user to manually input their passport, drivers license or credit card details, why not scan them and have the form fill them automatically? (Make sure you allow access to review and edit afterwards though).

(ii) Voice

Google reports that 27% of the global online population are using search on mobile. If you have a form  requiring particularly heavy text  input, why not provide a voice option for completion instead? Or make the whole form interactive so users can complete it while on the move (useful for takeaway food or ordering a taxi perhaps). 

(iii) Location Services

If you’re using smart defaults for a location field, you can hook into the user's GPS location (assuming it is enabled) to display the most accurate options.

(iv) Biometrics

We’ve discussed the issues around passwords at length. If you have a form that users need to return to regularly, a biometric login will cut out all associated problems with forgotten or misspelt passwords.

Example of biometric form login
An example of biometric form login from Android


8. No “Nuke” Buttons

Under no circumstances should you add a reset button that allows the customer to remove their previous work. You may think it’s a handy little shortcut, should   the user change their mind on some inputs. But believe us, the amount of customers who rage quit after pressing it accidentally,  means its inclusion will significantly outweigh such perceived benefits.

Tesco checkout nuke button example
A classic “Empty Basket” nuke button from UK supermarket Tesco


9. Use single column layouts wherever possible

The CXL Institute found that layouts consisting of a single column were completed 15.4 seconds faster than multi-column formats.

Research showing you should use single column layouts to optimize your form
Source: CXL Institute


The multi column layout requires eyes to jag back and forth, disrupting the experience. Stick with a single column if you can (particularly true for mobile devices).

10. Easy before difficult

Ever been asked to write a 1,000 word essay at the start of a form? Of course not, that would be a horrible experience. There’s a reason that forms ask the easy questions first. By easing the user into the form with simple requests, you make them comfortable and increase the probability they’ll answer more involved questions later on.

Pro Tip - The psychological principle of consistency means users want to follow through once they’ve  committed to something. By getting them to commit to something small upfront,  you increase the chances of them becoming a paying customer.

11. Finger friendly touch buttons

The average adult index finger is 16-20mm wide according to the Massachusetts Institute of Technology. You need to accommodate for that when designing your mobile form. Specifically:

12. Accessibility for All

This is a bit of a passion of ours at Zuko and is critical for all forms. There are numerous studies analysing the money left on the table because of the lack of accessibility on websites.

Our key recommendations to make your form more accessible are:

Webflow's vision preview tool for forms and websites


That’s it for now. Thanks for getting this far! If you want to check out the other section of the guides you can use these links.

Section 1 - General Principles of Form Optimization

Section 2 - Common Form Issues and High Impact Tips

Form Analytics and Optimization Glossary

Alternatively, to download and keep a permanent copy of the guide that you can share with your colleagues, click here for the eBook download landing page.

Zuko's Big Guide to Form Optimization and Analytics Cover Shot

"If you want higher conversion, download it!"
Craig Sullivan - CEO, Optimise or Die