Who loves to fill out forms? As a user experience, it ranks somewhere between a root canal and a visit to the DMV. Sadly, forms are a necessary part of life. You can’t get a loan, see a doctor, apply to an educational institution, get insurance or accomplish just about any of the important functions and milestones of life in the modern world without first filling out a form.
Since the advent of the web, paper forms have been progressively giving way to digital forms. This has brought big benefits to businesses that depend on forms. eForms can be directly connected to business data and services. Data captured in eForms can be made instantly available from secure storage for retrieval, distribution, and processing. Data entered into eForms can automatically trigger business processes in real-time. Digital storage can be backed up and doesn’t require expensive office space. The savings in time, cost, and labor are considerable for businesses.
As a result of all of these advantages, electronic forms have become a critical UI component for both business data and services. Software applications of all kinds; web, mobile, eCommerce, and eGovernment rely on digital forms as an integral part of their user experience and business processes. There is a pressing need for a better user experience with online Forms. Forms are the first user engagement for many businesses, government agencies, and institutions, so it’s critical that the ‘first touch’ be positive.
The user experience of eForms initially replicated the experience of paper forms. The same tedious, mind-numbing experience you experienced with a paper and pen was now available on your laptop or phone. This soon began to change as digital technology made possible features that could make eForms a much better experience than their paper counterparts.
A Clutch survey of 502 individuals who filled out a web form within the past month found:
- The majority (86%) of people fill out at least one web form per week.
- Approximately one-third (34%) of consumers fill out a web form once a week.
- More than two-thirds (67%) of users say they generally spend 1-3 minutes filling out online forms, but experts advise keeping forms as short and streamlined as possible.
- Email address (79%), name (75%), and home address (60%) are the most commonly requested pieces of information.
- Users prefer scrolling through an entire web form (91%), as opposed to clicking through pages of grouped questions (80%).
- The majority of people (90%) prefer web forms that use features including a bar indicating progress, inline validation, or a password strength checker.
Today, with all the experience we have and all the digital technology that is available there is really no excuse for a form experience that fails users. Here are 21 ways you can ensure the UX of your online forms will make for happy users:
1. Set expectations clearly in advance
A clear title and a brief introduction explaining the purpose of the form.
- Why is the information needed?
- What the information will be used for.
- How the information will be protected and with whom it will be shared.
- Any documents or information you will need to complete the form
- How long it will take to complete the form
2. Break the form up into easily comprehensible sections.
It takes about 50 milliseconds (ms) (that's 0.05 seconds) for users to form an opinion about a web page that determines whether they'll stay or leave. In those 50 milliseconds, a first view with an intimidating amount of information will be a conversion killer. Users generally prefer scrolling to multipage layouts but if the form is long or it will be filled out by multiple users tests have proven that ,multipage are the better option. Whether you choose a single page scrolling or multi-page form make sure the form is divided into easily comprehensible sections.
3. Minimize input fields
The longer the form is the less likely it is that the user will complete it. Trim your forms to include only the absolutely required questions.
4. Clearly identify required fields
Make it easy for the user to understand what information is optional and what is required. You might explain how providing optional information would benefit the user in a text under the optional fields.
5. One column layout
This is not just for mobile devices. It’s easier for the user to follow a vertical scroll. Information like first name, last name, and city, state, and zip can be inline on desktop screens as they are read as one unit by the user. There are exceptions to any rule and we have on occasion used 2 columns with clearly defined areas for forms that also served as informational screens (such as job tickets). In these cases users needed to have a lot of information of previously filled out forms available at a glance.
6. Only present relevant questions
Conditional logic can hide questions that don’t apply to users, reducing the amount of information the user has to deal with. Form fields can be revealed depending on user input as needed. The more you can reduce the cognitive load for the user, the better.
7. Sensitive information
If you need to ask the user for sensitive or personal information, explain clearly why you need it and how it will be used in text underneath the input field. You never want to cause hesitation or any deer in the headlight moments. A frictionless, stress-free experience is the goal.
8. Reduce the users workload
Auto-fill, auto-correct, and inline validation can simplify the process for users and ensure valid responses. Data fields can be pre-filled with information the system already has. A word of caution, if you are pre-populating fields don’t expect the user to check for accuracy. Make sure any values that are pre-filled are correct as the user will likely miss any errors.
9. Easy stuff first
If you can ask the easy questions first it will draw the user into the process and make it more likely they will complete it. Once someone has completed most of a task they will be more invested to finish it. If the hard part is upfront it will make the process seem more daunting and it will be more likely the user will be discouraged and abandon the form or put off dealing with it.
10. Provide clear and understandable error messages.
Clearly identify the error and provide clear instructions on how to cure the error to the user. The user must always feel in control and never be confused as to what to do next. Don’t scold the user with negative language. Keep error messages positive and informative.
Provide chat support on the form in the event that the user needs help.
12. Reward the User
When possible immediately reward data entry with relevant information. (how big a loan you qualify for, real-time pricing in a quote, time to deliver, etc.). Here is where forms become more like apps. Digital forms can do more than replace paper forms. Build-in application business logic and calculations and they can become a user-friendly, secure, and streamlined platform for easy data input, managing data, and modeling and tracking business processes. Forms that are empowered by application algorithms can provide a much richer and more interactive experience for users.
13. Enable social media login
No one wants to create and have to remember another password
14. Don’t use inline labels within the text fields.
Instead, clearly label all data fields. Inline labels are often used to save space but the potential impact on usability makes it a poor choice. When users begin typing in text fields the inline labels disappear, often leaving users unsure about what the field is for.
15. Don’t use placeholder text within text fields
It might seem helpful to provide placeholder text in a data field to indicate the format and as an example of correct input. But just like with inline labels when the user begins typing the placeholder disappears - if the guidance of the placeholder text was needed it disappears at the moment it would be most useful. Frustrating rather than helping the user. If guidance is needed place the example text below the text field so the user will have it as a guide while typing.
16. Allow Attachments
Often forms require additional documentation. Allow users the ability to attach documents and images to the form. If the documents reside in an external data source let the user link the source (medical records, tax documents, business records, Google drive, Dropbox, etc.) for import. This will also ensure that all the required documents travel with the form through the system.
17. Let the user save unfinished forms
Any form that requires the user to have information at hand that they may not have is a good candidate. The user can save what’s done and come back when they have the required information. Allowing users to complete longer forms a piece at a time at their convenience is another compelling use case.
18. Allow for multiple users
Sometimes forms will be filled out by more than one user. If this is the case with a form then provide a UX architecture that makes it easy. Separate logins, presenting only the information that each user needs to see, enable saving the form and provide notifications when one of the users has edited the form.
19. Use graphics and images
Photos or illustrations can be used to identify the parts or the process that the question refers to. If the form is being used to configure a product a real-time visualization of the product will give the user an immediate and accurate image of the results of their choices.
20. Indicate progress
On multi-page forms, a status or progress bar is an important way to keep the user in control. Knowing where they are in the process and how much farther there is to go.
21. Make sure the Submission button has a clear CTA
Let the user know with the button label description what action the submit button triggers. Does it complete an application or registration process? Does it place a configured item in the cart? Once the button is clicked provide immediate confirmation of success. If an application is submitted let the user know when they will get a response or what the next step is. If it was to register for an online service offer to take them to the login screen. If it placed an item in the cart then provide a link to begin the checkout process.
All of the above will make filling out a form a painless and easy experience for users in ways that were never possible with paper forms. A great form UX will also reward businesses with better conversion rates, less form abandonment, and more accurate and complete data.
Intelifaz Smart Forms Management
Provide your customers with an easy way to complete complex forms and interact with you in a company-branded environment. Manage complex information from your customers or agents in the field. Create and manage online forms that comply with government regulations. All data collected is secure, traceable, and private. Documents, photos, videos, notes, etc can be attached to forms by customers or by employees. Learn more...