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.
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:
Never only use an asterisk. You may think your asterisk clearly denotes a “required” field but the user may not see it that way. They may think it means “optional” or that they should start looking for explainer text at the bottom. Make it clear with text which fields are optional.
Make a decision on which fields to mark based on their relative frequency. If you have ten fields, one of which is optional, you shouldn’t mark the nine required fields. Simply label the other field “Optional” and leave it at that. If the scenario was reversed you should only label the mandatory one.
Don’t use a negative. “Optional” is a better label than “Not Required”, which pretty much guarantees the user won’t fill it in.
Dropdowns require a higher number of minimum interactions to select a value (tap, scroll, scroll, tap Vs a single tap)
Only a small number of options are visible at any one time on mobile screens
If lists are not ordered, finding the correct value can be time consuming and tedious
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.
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.
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:
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”.
Learn how to use data to identify and fix the UX problems on your form
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.
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).
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.
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.
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.
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.
Optimize your form’s tabbing navigation. Users who struggle with accessibility may use tabs to move through your form. Make sure that every field in your forms is accessible through tabbing and that the tab flow is intuitive and comprehensive.
Label your fields well. As we mentioned earlier, this is important for any user, especially those who may be visually impaired. It should be clear which labels apply to which input boxes and they should be legible enough for all users.