.svg){kind=small}
This is the final substantive section of the web version of Zuko’s eBook guide on web form optimization and analytics.
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
If you are interested in a particular piece of advice you can navigate to it by clicking the appropriate link.
Clearly Identify Optional Fields
Set HTML types to the appropriate format
Be careful with Static Defaults
Our final section gives you specific tips on the design / UI of your form to help you optimize form conversion. 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.
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:
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.
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.
(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.
(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.
(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.
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.
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:
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”.
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.
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.
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.
The CXL Institute found that layouts consisting of a single column were completed 15.4 seconds faster than multi-column formats.
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).
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.
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:
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:
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. You may also be interested in Zuko's Step by Step Guide to Using Data to Optimize Forms or our White Paper on Optimizing Financial Forms.
