Provide Specific and Highly Visible Errors
Ideally, we would live in a world where users always filled in forms properly and never had any issues, but here in the real world, we know that users make many mistakes. This is where form validation and assistance can come into play. One of the 10 Usability Heuristics is to communicate errors to users in a graceful, actionable, and clear manner. That means the error handling in your form should have the following things built into it:
- The best time to inform a user about any issues is as soon as they have provided the data. This should happen even before the user submits the form because often times if a failure happens after submitting the form, then the user will just abandon attempting to fix the issue.
Inline Real-Time validation immediately informs users about the correctness of provided data. Image credits: Google - You need to make sure that your Error messages are easily recognized from the rest of the page. Leveraging Color, Icons, and Text to highlight the issue are all important. Additionally, you should consiter accessibility when creation of your errors. Usually Locations closest to the field that is causing problems is better than having them at the top or bottom of the form.
As you can see on Facebook's registration form. The use color, icons and text are in effect to highlight the problem area in sign up form - When possible try to avoid strict formats for information provided by the user, but If answers are required in a specific format, then you need to state this in advance, by communicating the imposed rule (format specification) with example will help improve the chances of users filling it out correctly.
- Finally and probably most important of anything is to never clear the form's data. Doing so will almost always result in the user abandoning the form
Skip the 'Cancel' button
The Cancel and Reset buttons are two of the biggest causes of form abandonment. This is because users can sometimes click the wrong button, but also because it gives a user a clear way out. In reality, these two buttons almost never help users and just hurts your conversions. Most websites would do better if they completely dropped these buttons from all forms.
Make it easy to know which fields are optional
It is extremely important to make it clear to users which fields in your form are optional, and which ones are not. Often times this is done using some sort of icon, bolding the label, or some sort of background coloring to make them stand out. You should try and limit the number of optional fields as well. Using hint text to indicate that they are optional is also important.
Dont Skip the Labels
In recent years it has become a trend to remove labels, and instead have them shown as Placeholder text on forms. While this can minimize the space used by a form and lead to an astetic that is popular, it puts your conversion rate in danger. Placeholder text, is the text located inside a form field. This usually plays a role of providing an additional hint, description or example of the information expected for a specific field. These hints disappear when the user interacts with the field or enters anything in them.
While using the approach to use a placeholder as a label, which is fine for some simple forms, more complex forms can be hurt by this because of the nature of the information that is needed. Below are some of the main reason why this solution is bad for regular forms:
- Once the user clicks on the text box, the label disappears and thus the user cannot double check that what he/she has written is indeed what was meant to be written.la
- When users see something written inside a text box, they may assume that it has already been prefilled in and may ignore it.
If you still want to use a placeholder text for your fields — use placeholder text as a floating label. The placeholder text is showing by default, but once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in.
Use Free-form formatting where possible
Many times fields will need to have a very specific format for data, but in most cases especially with lead generation its better to not force people into a strict way of entering in information. Having too many rules can be another big cause for users abandoning your lead generation forms. If you ask users to input numerical information into a form, try and be flexible. Instead of forcing the user to enter a phone number in a specific way, you can allow them to enter it however they want. Then allow your cms or crm to handle formatting it for you in the backend. The goal should always be to minimize the impact on the users and allow the systems to do the monontonous work for you and them.
Labels on top
Another design pattern is to move labels to the left of form elements instead of having them on top, but how does this affect the performance of your form getting filled out, and how does it impact how fast a user can scan through your form? After looking at some studies we have found that overall forms are scanned much faster when you have the labels placed above the form field instead of the left. When users first see them and after they fill them out. Matteo Penzo’s article on label placement implies that forms are scanned faster if the labels are on top of the fields.
Top-aligned labels are good if you want users to eye-scan the form as fast as possible (notice: I don’t say ‘complete’ the form, just ‘scan’ it). Another advantage of top-aligned labels — they doesn’t take too much horizontal space (in comparison with left or right-aligned labels) which makes it easier for different sized labels and localized versions to fit within the UI (this is especially good for mobile screens with a limited estate).
Max the Field to the Input
There was a recent study by Baymard institute for usability that found that if you use fields too long or too short for the input they are looking to get that, users will start to wonder if they correctly understood the instructions. This turned out to be especially true for fields with uncommon data or more technical label like CVV (card verification code).
In order to achieve better usability for your forms you should adjust the width of the field so it’s just long enough to contain all the characters of the input (users should be able to see their full entry) but not any longer than that.
Conclusion
It is not always easy to get Users to fill out forms, so you need to remove as many barriers for them as possible. We need to ensure that the form design is a strength rather than a weakness when building a sales funnel. Some minor changes like just grouping related fields, or indicating what information is expected can have a huge impact on the ease of use a form has. All of these improvements will mean leads will be able to complete the form faster, the faster they can get through it and submit it the higher chance they have in submitting it.
Next week I will be going over some useful and sneak ways you can capture details from forms that have been abandoned and not submitted. This can be extremely useful in seeing where users are tripped up and leave and could also lead to you being able to contact and warm up those who partially fill out the forms.