Web Form Design Best Practices To Optimise Conversions
Whether it’s a contact form, registration form or check-out process, web forms can be a significant barrier to conversion. Even a simple opt-in web form can create friction and anxiety about entering personal information online. Use these web form best practices to improve your conversion rate.
A well designed and optimised web form is an important feature of any website. People usually expect the option of a form to be available on most websites as a way of leaving feedback, making an enquiry, asking a question, receiving updates, opening an account or making a purchase.
In this post I outline 62 best practices for improving your web form design and completion rate. If possible validate changes with an A/B or multivariate test before rolling out to all users. If your completion rate is relatively poor (e.g. less than 40%) then try a total re-design of your form to see if you can achieve a large uplift in conversion. There is no point wasting time with little changes if your form is dire.
Before you start optimising your web form:
Ensure your prospect is ready to complete your web form before asking them for any information. Think about the user journey from the customer’s perspective and avoid designing your site around your internal process.
Don’t let your desire to capture data from your customers come ahead of your user’s goals. For instance on an e-commerce site prospects are looking to buy merchandise and so don’t force them to register if you can allow them to buy as a guest. You can collect most, if not all, the data you need in the check-out web form. Offer live chat for visitors wanting to ask questions or request assistance? This allows for real-time interaction with Customer Services rather than relying on email notifications which creates a delay in responding.
Fix basic web form usability issues before trying to be clever with advanced functionality or psychological persuasion. If your form is poorly designed and is difficult to complete without making mistakes then resolve those issues first as they are likely to swamp any other changes you make to the form.
To make it easy for you to find what you are looking for I’ve structured this post as follows. Click on the section heading that you wish to go to.
- Mobile forms
- Design & structure
- Usability
- Data handling and error messaging
- Persuasive design
- Call to actions
A: Mobile Web Forms:
-
Mobile first:
To design an optimal user experience it may be appropriate to take a mobile first approach because the small screen size makes them the most challenging to create. By beginning with mobile devices it forces designers and marketers to be ruthless with priorities and to focus on user needs.
With a majority web visits taking place on mobile devices web forms must be mobile friendly and content should not just be copied over from a desktop site. Making visitors pinch to zoom into a form is a poor user experience and so check that your form renders correctly on most popular mobile devices using a cross-browsing testing solution.
2. Use mobile device’s native functionality:
A couple of years ago I was evaluating a brand’s desktop and mobile user journeys when I discovered that I could only upload KYC (Know Your Customer) verification documents on their desk top site and not on their mobile app. It would have been so much easier to use my phone’s camera to take a picture of my documents and instantly upload to the app without leaving the form. But unfortunately the app did not have the same functionality as the desktop site.
For customers this is a very frustrating, and disappointing experience as increasingly a majority of website visitors are mobile only users. Mobile devices have a number of features such as geolocation and cameras that should be fully utilised to minimise the amount of information requested on a form.
For example, incorporate technology shown below that scans credit and debit card details instead of making users manually input the information. This not only speeds up check out but also often reduces checkout abandon rates.
3. Input fields and buttons should be a minimum of 48 pixels high:
Google recommend that tap targets such as input fields and buttons should be at least 48 pixels high because this corresponds with the average finger pad size of around 10mm wide. However, there is no such thing as an average user and so if possible allow slightly more height for tap targets for those customers with slightly thicker fingers.
4. Don’t use fonts below 16px:
Even though many more up-to-date smartphones have larger screens (e.g. 4.7 inch), don’t forget that many users still have devices with smaller screens (e.g. 4 inch) that makes text below 16px difficult to read. As a result use text that is a minimum of 16px in size.
5. Use input masks to display the correct keypad:
Input masks ensure that when a mobile user is asked to complete a field their device displays the appropriate keyboard (e.g. numeric for phone number). For mobile devices this removes a source of friction as it removes the need for the user to select different keypads. The eight input masks that are relevant to form design are:
- Text – displays the normal device keypad
- Email – displays the normal keypad plus ‘@’ and ‘.com’
- Telephone – displays the numeric 0-9 keypad
- Number – displays a keypad with numbers and symbols
- Password – hides characters as they are typed
- Date – displays the mobile’s date selector
- Datetime – displays the mobile’s data and time selector
- Month – displays the mobile’s month/year selector
B: Design and Structure:
6. Multi-step forms normally out-perform single step forms.
In most instances breaking up a single step web form into two or three steps will improve completion rates. Single step forms tend to be off-putting to users unless they are simply an email capture form.
Three Core Reasons:
- Long forms with lots of input fields to be completed can be off-putting to users, particularly if they are on a mobile device.
- Users are more motivated by seeing how close they are to completing a task than how far they have progressed (see goal gradient effect). Use a progress bar to show progress and how close customers are to finishing the form (i.e. show progress even on the first step of the web form).
- By breaking a long form up into multiple steps you can ask sensitive information (e.g. personal information) on the last step. Once users have completed the first step of a multi-stage form they are more likely to complete other steps because of the emotional investment they have already made. This is known as the sunk cost fallacy.
Casumo, the online casino, decided to take this approach to its natural conclusion by asking one question per step. To avoid information overload and to allow the user the concentrate on one question at a time Casumo serves each input field on a separate page.
Casumo.com 12 step registration form
You might think creating a 12 step web form would be off-putting for users, but from looking at Casumo’s affiliate page it appears they have a very high conversion rate. Further, usability research conducted by the UK Government’s Digital Service found the one question per page approach consistently worked best for their users.
What we don’t know is if there is an optimal number of pages for this strategy and so some caution may need to be taken when copying this approach.
7. Single column forms outperform multi-column forms:
Most A/B tests indicate that single column web forms outperform two-column layouts. This may be because multi-column layouts are more distracting for users as their eyes are drawn to more than one question at a time. However, it is still appropriate to use multiple columns for dates (e.g. date of birth) and time as users expect such fields to be on one line.
8. Remove all non-mandatory fields:
It stands to reason that the more input fields you have on your web form the lower the completion rate will be. Removing non-essential fields such as gender, password confirmation and any other fields that you don’t need for any regulatory or critical business purpose can lead to significant improvements in form completion rates. Be ruthless with evaluating each field and if it’s not absolutely necessary get rid of it.
9. Clearly label optional questions:
Although I recommend you remove optional fields or move them to another stage in the user journey (e.g. confirmation page), some organisations insist on them for compliance or other reasons. However, if they are asked use placeholders to make it clear they are optional so that users can decide whether they wish to complete them.
This example above from Liz Earle clearly labels the mandatory fields, but fails to label the one optional field (Telephone). This can create uncertainty about whether it is necessary to complete the field or not. By simply displaying the word ‘Optional’ to the right of the field we eliminate any unnecessary uncertainty.
10. Don’t repeat questions:
This is related to the above point as it should not be necessary to repeat any questions. Apart from annoying users, repeating fields just adds to the length of your form.
Rather than asking users to re-type their email address or password simply display it as the default setting (i.e. Show characters) and if necessary ask them to confirm it is correct using a radio button or other appropriate CTA.
Further, if you also automatically email users their login details there is no real need to ask them to confirm their details are correct on the form.
11. Display password characters as the default:
Most input errors occur because users can’t see what they have typed and so don’t hide the characters of the user’s password. Set “Show password” as the default experience.
Here we can see how Amazon’s sign in web form has evolved over time to have show password characters as the default.
12. Give a clear reason for why users should complete your form:
Research by Dan Ariely found that people are less motivated to complete tasks if they have little or no purpose. Ensure you help motivate users by giving a clear benefit for completing your form, whether it’s a free e-book, regular updates or to redeem vouchers.
In the test below for BettingExpert.com, Michael Aagaard achieved an uplift of 32% by amending the form title to communicate a clear reason why visitors should sign up.
13. Apply conditional logic to reduce form length:
Conditional logic refers to where a question is only displayed if a visitor has answered an earlier question in a certain way. This approach shortens the form length and prevents users being asked irrelevant questions that could trigger abandonment.
14. Align field labels to the top left-hand side of input boxes.
UX researchers at Google discovered that labels which were aligned on the top left-hand side significantly improved form completion. They believe this may be because it reduces the number of visual fixations required by the user.
15. Don’t ask for phone numbers unless absolutely needed:
Asking for personal data is always problematic, but many users are particularly concerned about entering their phone number into forms. Research shows that adding a phone number can reduce form conversion by between 5% (Unbounce) to 49% (Vital Design).
16. Create sections for related questions:
Create a logical flow to your form by grouping related questions together into homogeneous sections or steps. This helps set expectations of the type of information to be requested and should avoid customers being surprised by the questions you ask.
17. Use smart defaults:
When asking questions such as country or phone number you should offer a default country or phone code based upon the user’s IP address.
18. Avoid splitting single input fields:
Splitting input fields into separate chunks (e.g. separating post code into two input fields or having a separate field for area code for telephone number). This increases the number of clicks a user has to make and the division may be perceived as illogical by some users. Further, it may also create uncertainty about what’s required.
If you must ask for an extension number for instance, hide it behind a form control rather than showing it as a default. Hiding irrelevant form controls has been shown to reduce error rates and improve form completion.
19. Clearly state why you require sensitive information:
As privacy is a major concern for many users it is important that you give a valid reason for requesting any sensitive personal information. The reason behind a request should be shown as either a tool tip or supporting text below the field.
20. Enable predictive search when large number of pre-defined options:
When users are faced with selecting a train station, city, country, occupation or something else with lots of predefined options, it’s a much better user experience if there is a predictive search feature to minimise typing and cognitive load.
21. Select field types that minimise the number of clicks or taps needed to complete a question:
Generally the more clicks or taps required the lower the completion rate will be. For this reason Luke Wroblewski recommends using drop down menus as the UI of last resort. For a date of birth or time question a drop down menu will require 3 or more separate clicks to open each drop down. If a multiple date picker menu is used instead (see image below) this only requires a single click to access all the columns in the field.
Image Source: 32red.com
- Use radio buttons when there are multiple options but only one option can be chosen.
- Use checkboxes when more than one option can be chosen. Always stack radio buttons and checkboxes vertically as it makes it faster to process them compared to displaying them horizontally.
- Use a stepper for small increments rather than a drop down menu.
- A table view is good for short lists.
- Drop downs are more often used for lists with more than six options. However, for long lists (e.g. country) don’t show in pure alphabetical order if most users are known to select an option starting with a letter near the end of the alphabet (e.g. USA or United Kingdom).
22. Avoid Placeholder Text:
A placeholder is the light text that is shown in a field to guide users on how to complete a field. They are usually employed to reduce any uncertainty about the required format or content of the field.
Designers like placeholder text because it can reduce visual clutter by removing field labels. However, usability research by Nielsen Norman Group has shown that it causes many usability problems. For example, it makes it difficult for users to remember what information should be entered into a field and to check for and fix errors.
23. Always show a field name:
A label describing the nature of the information required should always be visible outside the input field and should not be replaced with placeholders. Using placeholders as the field label is problematic because as soon as a user begins to enter text into the field the placeholder text will disappear. This means the user would then have to rely on their memory to remember what information is expected.
To save space some web forms use inline labels as these are always visible. This is the only occasion when you may want remove field labels.
24. The length of text field should reflect nature of question:
It is important to adjust the length of a text field to allow for the amount of text the user is expected to enter. A phone number field for instance should be shorter than the address field. For instance in a returns form users can get annoyed if there is insufficient space to enter a full explanation of the nature of damage or other information that has been requested.
25. Use address lookup services for address verification & completion:
Minimise user effort when asking for their address by employing an address lookup and verification service. These tools are now able to suggest addresses as soon the user begins to type their details or the user can enter their post code or zip code to select from the options available.
26. Clickable images are an engaging way to ask a question:
Leadformly has found that selectable images are one of the most engaging way of asking a question. Below Animal Friends Insurance uses images of different animals to make the process more engaging.
27. Use the welcome page to direct users towards the next step:
Your thank-you page should be used to direct visitors to the next action you want them to take. Use the thank-you page to clearly communicate the next step in the user journey so that visitors can continue without any uncertainty about what to do next.
28. Use encapsulation to reduce distractions:
Encapsulation uses formatting, directional cues, boxes, colour or shading to frame a form to remove distractions and improve prominence. This often means removing banners, ads, social media icons and other links that might take users away from the form. The primary navigation is also often hidden, though it is worth A/B testing this change as sometimes users can respond negatively to all exit points being removed.
C: Usability:
29. Don’t use CAPTCHA’s:
CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) have been found to significantly reduce form completion rates as they act as they reduce accessibility for many users. In one study it was found that by removing the traditional word format CAPTCHA form conversion increased by 3.2%.
CAPTCHAs also ask frustrating questions like “Are you a robot?” which can create unease and increase the cognitive load on users. CAPTCHAs are a lazy way of dealing with spam on a form as it puts the responsibility for preventing it on the user. Apart from phone or email validation, there are a number of other ways of protecting your site from spam and bots, including creating a honeypot (using a hidden field).
30. Avoid only using colour to communicate:
One in twelve (8%) men and less than 1% of women suffer from colour blindness which means they can’t differentiate between certain colours. Red-green colour blindness is the most common form. This means that yellow and green appear redder and users find it difficult to differentiate between violet and blue.
When using colour to communicate, such as for input errors and progress indicators, ensure you display text and/or icons to ensure clarity of the message.
31. Use cross-browser checking tools:
Check that your form works and renders on all major devices and browsers. When I reviewed a major bingo site I noticed that the load speed for the web form page had doubled after the new site was launched. When the developers investigated the problem they discovered that the form was not loading properly in Internet Explorer.
Check out the cross-browser checking solutions in this post: 12 cross-browser tools to boost conversion.
32. Allow users to navigate your form using the tab key:
Disabled users often rely on software that is operated by the tab key to move between questions.
33. Provide an explanation for questions which users may have difficulty understanding:
Many forms have sector specific questions that users may struggle to instantly understand. Some of these questions are mandatory and are needed for regulatory and compliance purposes. Use clear visual explanations such as tool tips that display when the user hovers over the question.
34. Avoid assets or text that flash:
Flashing or moving buttons and text can be very distracting to users because our brains are programed to respond to movement in case it signals some kind of threat. In addition, if an asset flashes more than twice per second it can also cause a seizure in some people.
35. Ask for additional information using milestone submissions:
Milestone submissions give users the option to continue to provide additional information when they get to a certain step in the form. This allows you to remove non-mandatory information from your form, but then give those users who wish to continue the chance to enter additional information.
Jack Wills effectively uses this approach in its check out form. Rather than forcing visitors to register an account before purchasing, the site asks customers on the purchase confirmation page if they wish to set a password and create an account. This ensures that setting up an account does not prevent the customer from buying merchandise.
36. Ensure high contrast between fields and the background:
As a majority of users on many sites are now on mobile devices it is especially important that web forms are designed with good contrast between fields and the background. Otherwise users may struggle to see where to tap in bright sunshine or low-light situations.
37. Don’t auto-advance to the next question:
As auto-advancing (automatically moving onto the next question) is not standard on most forms it is not expected and can be off-putting for users.
38. Don’t have spell checker turned on for all fields:
Having the spell checker or auto-correct activated for input fields such as username, email address or name can be very annoying and frustrating for users. Only activate spell checkers and auto-correct when it is clearly beneficial for the vast majority of users.
39. Allow browser to auto-fill:
Most popular browsers like Google Chrome now retain certain personal information to allow you to use their auto-fill function. This can save users time in entering personal information into your form but you must properly tag fields with terms that the browser recognises (e.g. ‘first name’ or ‘city’).
40. Monitor the load speed of your forms:
Research by Google shows that load speed is important to prevent users abandoning your site. Form pages are just the same, make sure you optimise them for load speed. Use Google’s free developer tool or your web analytics to monitor load speed.
41. Visual cues and recognisable icons can improve usability:
People don’t read text on websites; they scan it to save time. Displaying visual cues can assist users because we process visual images faster than text. However, don’t invent new icons as if they are not already in common use visitors will not instantly recognise them and the icon will potentially slow cognitive processing and confuse users.
D: Data Handling and Error Messages:
42. Explain formatting requirements:
Don’t be too prescriptive of how you want data to be entered to fit in with your perception of the ‘correct’ format for a field. People use various different formats for fields such as telephone number (e.g. +44 1829 281771, 01829 281771,+ 1829 281771). To make your form user friendly get programmers to use rules to convert data to a consistent format after it has been entered rather than forcing people to conform to the format that your back-end systems has been configured to.
In addition, display tool tips to show users the correct format.
43. Use inline validation and display error messages soon after completing the field:
Error messages should be inline (to the right of the field), and should be displayed soon after the user completes a field to prevent them clicking on the form CTA. The validation should not be real-time either as otherwise this will report an error before the visitor has completed the field. It is recommended that error messages should be displayed around 500ms after the user has moved onto the next field.
E: Persuasive Design:
44. First impressions count:
Visitors expect your form to look professional and well designed. Don’t cut corners on the quality of design as first impressions are important and poor design does create anxiety about how trustworthy a site might be.
Image Source: Partycasino.com
This welcome page on partycasino.com creates the impression that little thought has been put into the design of the screen. Users are likely to be less responsive to the offer of making a deposit when so little effort has been put into the design of the page.
45. Use risk reducers to manage expectations and prevent user anxiety:
People often have concerns about completing web forms that can significantly reduce completion rates if not dealt with appropriately. This can range from will they pass on my email address to other companies? Will I have to enter credit card details? Will I get sales calls as a result of entering my telephone number? How long will it take to complete the form?
Display appropriate risk reducers such as “No credit card required”, “No deposit required” or “No booking fee” on or below the call to action.
46. Avoid negative influences:
Be careful to avoid negative influences like unnecessary graphical elements near the CTA that can cause a momentary pause as the user considers its meaning. Don’t use stop words with negative associations like for example “spam” in your privacy statement.
Most people would expect displaying a privacy message to reassure visitors that they won’t be spammed would be a good idea. Well, you would be wrong, as Michael Aagaard found that adding a privacy message reduced form conversion by almost 19%. The word “spam has such strong negative connotations that it appears to automatically raise concerns in the user’s mind.
47. Avoid security seals unless you are asking for payment:
Be cautious about displaying a security seal on a form as it may raise un-necessary concerns about site safety. Further, security seals are associated with payment and so visitors may think you are going to ask for payment during completion of the form. I have seen a number of A/B tests where adding a security seal before the payment page actually reduced form completion rates.
48. Use live chat to offer instant support to users on your form:
Live chat is a powerful tool to assist users in real-time to answer any questions or deal with problems completing a form. Display a live chat window within close proximity of your form as it helps build social proof and can be used to gather real-time feedback on any problems encountered by users.
Image Source: Betfair.com
49. Use social proof to establish credibility:
Display evidence of social proof, such as number of customers (if large), testimonials, logos of well-known partners or customers, awards or social media likes/shares close to your form. People have a strong herd instinct and so relevant and compelling social proof can be very persuasive.
50. Display progress indicators on multi-step forms:
Research by psychologists has shown that people are more motivated by how close they are to completing a task than the progress they have made (see goal gradient effect).
Progress indicators have been shown to improve completion rates because they reduce a visitor’s anxiety by communicating how close they are to completing the form. Further, starting your progress bar with some progress already made has been shown to also improve completion rates.
51. Clearly signpost number of steps together with progress:
To benefit fully from the goal gradient effect make sure you clearly display the total number of steps and which step the visitor is currently on to eliminate any uncertainty. In this example below you can clearly see that the progress indicator shows the number of steps and the CTA text reinforces this by saying what the next step is.
Image Source: partypoker.com
52. Take care with transition speeds:
Be careful not to have too fast a transition speed as users may not notice the form has moved to the next step if it is too fast.
F: Call to Actions:
53. Call to actions should complete the sentence “I want to ….”
Use verbs that match what the user is looking to achieve by clicking or tapping on the CTA. Avoid ambiguous and generalised text such as “Submit” or “Send” as these do not inspire action. Ideally the text on a button should answer the question “I want to” from the customer’s perspective.
For example, if the web form creates a new account the CTA copy could be “Create my free account”. Making the copy more personal by using the word “my” rather than “your” has also been found to sometimes improve conversion.
54. Make your call to action look like a button:
Designing your CTA to look like a button removes any uncertainty about it being clickable and makes it stand out from your input fields. Hyperlinks have been found to significantly reduce click through rates. Further, by giving your CTA the same width as your input fields it helps to ensure it is prominent and easy to locate on the screen.
55. Call to actions should stand out from the page:
The colour of your call to action on your web form can make a difference to your conversion rate, but normally this is due the lack of contrast between the button colour and the background. To avoid this problem use a colour that has a high contrast with the background colour of the web form and ideally is not already is use on the page.
56. Use logical sequence for questions:
Order questions logically to assist with form completion and do not automatically follow the sequence of your back-end systems. For example, use the same order that information is shown on a credit or debit card (i.e. card number, valid from date, expiry date and security code). For field values consider the frequency of usage and list the most common values first when possible. To assist keyboard users test the Tab-key navigation to check that it follows the correct field sequence.
57. Don’t use ‘reset’, ‘cancel’ or ‘clear’ buttons:
Avoid including CTAs that cancel or clear your web form as they are un-necessary and create a risk that users will accidentally delete all of the information they’ve input. This is frustrating for users and most people understand that they can clear a form by refreshing the page.
This registration page from e-commerce site Liz Earle has a ‘Cancel’ button on the bottom left-hand corner. It’s unnecessary and runs the risk of users clicking on it by mistake.
58. Don’t automatically opt-in users to your mailing list:
Auto-enrolling visitors to your mailing list forces users to make an extra click to opt-out and can create anxiety that you will be spamming them. You should also avoid tricking users into agreeing to receive promotional material as this can also harm trust in your organisation.
I came across this example from Littlewoods.com which attempts to automatically enrol users into their mailing list.
59. Avoid complex legal messages adjacent to your CTAs:
Displaying long and complex legal disclaimers next to your CTA can create anxiety and be off-putting to users completing a web form. Where possible combine them into a single message and keep them as concise as possible.
Below you can see how William Hill have used links to minimise the amount of text for accepting terms and conditions. Betfair on the other hand have much more text which could be quite off-putting.
60. Disable form submission CTA after it has been clicked once:
Disable the web form submission CTA immediately after the first click. This prevents duplicate clicks on the CTA leading to data being re-submitted and/or multiple charges being made on the user’s credit card.
61. Send a confirmation email:
A confirmation email should be used to reinforce key messages and actions communicated by your welcome or confirmation page. This is your opportunity to establish your authority in your customer’s email inbox. Ensure you have an email autoresponder cycle set up to build a long-term relationship with your new customers.
62. Re-target visitors who abandon your form:
Don’t forget to have a re-targeting strategy in place to deal with those visitors who abandon your form. There are solutions available to send emails in real-time to users who abandon forms and on-site re-marketing techniques to capture email addresses for those customer who are not logged in. It is also worth considering re-targeting ads.
Conclusion:
Web forms are ripe for testing. For any site with a reasonable amount of traffic I suggest you regularly A/B test your form designs to improve their performance. Validating changes with A/B or multivariate tests helps to ensure that the changes you make are improving your success metric and not just pushing through more unprofitable users.
For this reason don’t just set your success metric as web form completion, but also measure your most important conversion metric (e.g. sales or average order value). You can then identify if the changes made are impacting upon your bottom line and are worth implementing.