Paul Boag - User Experience Advice

---

How to Design a High Converting Form: Quick Reference Guide Posted: 13 May 2021 04:00 AM PDT Gain more signups, sales, and leads by creating high-converting forms with this quick reference how-to guide. Almost every action we want users to take on our sites, from subscribing to our mailing lists to purchasing on an ecommerce site, requires them to complete a form. Even using your website for lead generation requires users to complete a contact form. In this quick reference how-to guide, I provide a step-by-step process for improving the chance that a user will complete any form to which you apply this process. 1. Define Your List of Critical Fields Make a list of all of the fields in your form that is absolutely required for the user to respond to a call to action. Do not include optional fields. You can always ask people for additional information later. A long-form (even with many optional fields) will reduce the chances of the user completing it. Where fields are only required for some users, only show those fields when you are sure a user requires them, otherwise give the user the option to request the additional field. For example, do not show the second line of an address by default. Instead, give those users who need it the option to add it. 2. Decide on the Flow Showing questions in the right order will increase the chance users complete the form.  – Start with questions relating to the user’s task because that is in the front of their mind and re-enforces the idea the form will help them achieve their aim. – Put personal and sensitive information nearer the end of the form when users are more likely to continue because of the sunk time they have already invested in completing the form. – Group similar questions, and for longer forms, consider breaking those groups into separate steps that are only shown one at a time. 3. Enhance Form Usability There are many ways to improve the usability of forms, from matching the field size with the intended input to using placeholders to show examples of those inputs. However, some of the most powerful usability enhancements for improving conversion are: – Pre-populating fields with known data. Do not ask users to repeat information they have provided elsewhere. – Where data is not known, show the most likely answer is a default in fields like country lists. – Avoid using dropdown lists for less than about six options. Use radio buttons instead so users can instantly see the options available. – Allow users to search longer lists of options to find the desired answer. – Show selectable images instead of descriptions where appropriate. For example when selecting a product color. 4. Consider Accessibility Make your form accessible to the widest possible audience and easier for all to use by considering accessibility. In particular, consider the following: – Ensure labels are placed directly above fields and ranged left. – Keep labels concise and descriptive. – Clicking on a label should focus on the associated field. – Clearly show which field is currently focused. – Users should be able to navigate logically between fields using tab. 5. Optimize for Mobile It is essential to consider how easy your form is to complete on a mobile device. You can do this by: Only showing the form as a single column. In fact, this is the best practice on all devices as it aids scannability. However, it is crucial on mobile. – Do not ask users to enter email addresses twice. – Allow users to see their passwords. – Don’t split fields like first and last name. – Show the appropriate keyboard for the field currently focused. For example, show a numeric keyboard when entering a phone number. 6. Deal With Spam Do not make your problem with spam the user’s issue by asking them to prove they are human. For example, captcha will reduce form submission dramatically. Instead, either use a honeypot form field or server-side anti-spam filters. If all else fails, use invisible captcha. 7. Handle Errors Gracefully How you handle errors in a user’s form submission can greatly impact whether the form is eventually successfully submitted. Some of the best steps you can take when a user makes a mistake is to: – Validate fields as the user completes them where possible. – Avoid validating until the user exits a field. – Display an error message beside the submit button they have just clicked, as that is where the user’s attention is. – Highlight fields that require attention and explain how the user can fix the problem. – Avoid errors by not requiring users to format data in a particular format (for example, phone numbers).

You are subscribed to email updates from Paul Boag - User Experience Advice. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google, 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States