Categories - Consumer Experience, Featured
You work hard for your clients. You create ad campaigns, speak at conferences, blog about new technologies, spend countless marketing dollars, all in an effort to send more clients to your site and garner their business. All your efforts may be in vain if your conversion point is a poorly developed form on your website or landing page.
What will your customer do? That’s right, BOUNCE quicker than a jack rabbits’ wink.
A form that doesn’t work the way you expect, is too long, or too invasive will send your valued customer running to the awaiting arms of your competition. So here are few best practices to ensure your forms are the best they can be:
1. It’s a form, make it look like a form – Keep it simple
Many sites crowd the page with too many distractions. It’s important to remember to keep it simple. Do not overdress form fields by adding a lot of design elements. Do not blend design elements like photographs or illustrations with the form fields as this tends to camouflage the form. Make the form standout by using simple areas of color and contrast.
2. Stay focused – Ask only what’s necessary
We’re all naturally cautious about giving out our personal information, so your form should focus on obtaining only the information that is absolutely necessary. If forms ask too much from a user, it sends the signal that you may be more interested in spamming them, or selling their information to a third party.
If it’s a complicated form like those to do your taxes or one that requires a lot of information from the user, do not show all fields at once. Rather only show fields that are applicable based on previous entries. If it’s a really complex form it may be worth turning it into an application.
3. How long is this going to take? – Keep ’em posted on progress
Time is valuable and users like to know what they are in for when beginning a new process. If it’s a complicated form, it’s important to inform the user how long the process will take; a time scale, ie 2 – 5 mins, or a half-hour to complete the process. And if it’s going to take a while, offer them the ability to save their information and come back and finish the form later which can done using code like Ajax.
In addition, it’s important to tell the user where they are in the process. If it’s a multi-page form, a progress bar can be used to tell the user that they are on “step 4 of 5” and nearly complete. Reassuring the user where they are in the process acts as an incentive for the user to complete the process.
4. Don’t frustrate – Pre-populate
This plays into the above point of keeping it simple but in addition it’s important to make the experience user-friendly. Don’t make the user think. Make fields and functions operate the way they should. Allow tabular navigation instead of point and click navigation, and pre-populate fields with the user’s information whenever possible. Also use field sets for different types of content (as in the case of separating personal information from billing information, etc.) so it’s easy for a user to understand.
It’s also a good idea to make the first field of the form active, denoted with a blinking cursor so that the user can immediately begin entering their information rather than clicking the field to enter the information. Airline and hotel search engines do a good job of this as they know a lot of people do comparative searches for the best travel deals. Users want to search a few sites very quickly so having the destination field or date fields active and pre-populated as needed allows them to get results quickly.
Have you ever filled out a form and clicked submit, only to be warned that you haven’t entered all the required fields and realize that all the information you just entered has been erased? It’s a big deal breaker. So make sure the form is coded properly to retain the users information, as well as make it extremely obvious what field is needed. Use color or circle to call out the required field.
5. Show them you’re legitimate – Offer assurances
6. Know your audience – Make your forms accessible
It’s important to consider that your form is accessible and usable by everyone, including people with disability, so be sure that the page is coded with these standards in mind.
It is also important to consider the users’ location when asking for certain types of information. Imagine a user from the U.K. filling out a form from a U.S. based company and being asked for a mandatory zip code. The user would either make one up, or worse leave the process completely. In either case you’ve lost that client.
Follow these steps and watch your conversions start rolling in. And remember, if you don’t plant a seed, you won’t get a crop. : )
Some additional resources:
Web Design Tuts – How to Design the Perfect Form
ParticleTree – 10 Tips to a Better Form
FormAssembly.com – Web form creation service
Simply Accessible.org – technical information on creating form fields
- If Your Site Isn’t Optimized For Mobile, You’re Nobody: Words From a Designer - June 28, 2012
- Why Mobile Site Optimization Matters- 6 Best Practices for Mobile Design - November 28, 2011
- Creating Better Web Forms - June 15, 2009