Itâ€™s the smallest quirks that create the biggest annoyances for your website visitors â€“ like a form that is 'too long', for instance.
For many of us, the web form is a vital part of our lead generation and customer relationship strategy, so having a form that annoys visitors is one of the worst things in the world for our business. In fact our forms need to be easy to enter correctly the first time, so that weâ€™re not letting opportunities slip through our fingers.
Here's some proven guidelines for designing web forms that have great usability (people find them easy to use). Adopting them means you get more successfully completed form submissions and that means leads, inquiries and sales for your business.
Form Objects - The Basics
It may seem obvious, yet knowing when to use what in a form is vital for creating an easy to use form. So hereâ€™s a quick refresher on form objects.
Radio buttons are those circles that when you click on them get filled in with a black dot to indicate your selection.
Use radio buttons when you have between 2 and 6 options to choose from and your visitors can only select one of the options.
Drop down list
Drop down lists are those text fields/boxes with a small downward pointing arrow on the right hand side, and when you click on the arrow you see a whole lot of options. Moving your cursor down the list and clicking on one of the options highlights it to indicate your selection.
When you have more than 6 options to choose from and your visitor is limited to selecting only one.
A checkbox is a small square that when you click on it a small tick appears to indicate your selection.
Use checkboxes when you have lots of options and the visitor can choose as many of them as they want.
If you have more than around 20 options, group and categorise them into blocks with a sub-title and description.
You can also use a single checkbox for capturing â€˜agreeâ€™ and â€˜disagreeâ€™ conditions. You may have seen this yourself when registering for something online, a small box you have to tick to confirm you understand the terms and conditions for registering.
The multi-select list often looks like a drop down list (a text field with a small downward pointing arrow on the right hand side) or they may look like a rectangular box with a list of options and a right hand side scroll bar. To select more than one option from the list you hold down the keyboard Control key and click it with your mouse, which will highlight the option to show it has been selected.
Use multi-select lists sparingly, as they often cause confusion for visitors, mostly they are presumed to be drop down lists (where only one item gets selected) or there can be problems with people physically selecting only the items they want (when in a hurry, people find keyboard and mouse clicking combinations frustrating which leads to unintended selections).
Text fields are rectangular boxes used to collect a variety of typed information, both numbers and words.
You use text fields when you want the visitor to give you the equivalent of between 1 and 6 words of information.
A textarea is a rectangular box, sometimes with a right hand side scroll bar, that is used to collect large amounts of typed information.
Teaxtareas are used to collect anything from a few words to pages of typed information.
Make sure that your textareas and text fields are large enough for visitors to read what they have typed in.
As a guide, make textareas a minimum of 50 characters wide with a height of 10 lines.
Buttons can look like a standard grey rectangular box or have a fancy designed image. They always have a label, that is a word or short phrase that describes what will happen when you click on he button.
Buttons need to be highly visible (they must stand out more than anything else on the page), they must be large enough to easily select (oversize your buttons to make them easy to see and click on) and they need to be in easy reach (for example, on a long sales letter page you need to have buttons appear several times on the page and not just down the very bottom of the page).
Make sure that when the mouse rolls over your buttons that the cursor changes from an arrow to the pointing hand cursor, this makes it obvious to your visitors that the button is clickable, just like a link.
So now that youâ€™ve had a refresher on form objects, letâ€™s look at some general design concepts.
Itâ€™s easy to get carried away when youâ€™re first designing your form and want to collect as much information as you can while youâ€™ve got your visitorâ€™s attention. This strategy may work for government departments and large multinational corporations, who can afford to inconvenience visitors.
The goal with your forms on the other hand, is to get as many of your website visitors to complete them as possible so that you can fill your lead generation and sales funnel.
As a fast moving, innovative entrepreneur, I can tell you you'll want to have successful form submissions every time. To get that to happen you have to be smart when it comes to deciding what you really need to be collecting.
Remember, the more information you ask your visitors to give you, the fewer will complete your form. The ones that do, will expect you to do a lot with all the extra information theyâ€™ve given you, which can be very hard to live up to.
To work out what you really need to collect, ask yourself the question â€“ "Is it possible to complete the transaction without this information?".
How does this work? Letâ€™s look at a couple of examples â€“
Letâ€™s say the transaction is â€˜registering to receive an email newsletterâ€™. In this case you would need to collect an email address where you send the newsletter, anything else like name, address and phone number would be nice to have but arenâ€™t essential to sending email newsletters.
On the other hand if the transaction is â€˜buying a DVDâ€™, then you need to collect name, address and credit card details to be able to complete the transaction â€“ for processing the payment, sending the DVD to the buyer and issuing a receipt. In this case having a phone number and email address would be helpful but they arenâ€™t essential for you to get the sale and deliver the goods.
From the world of usability there are some well-established guidelines on how to design and layout your forms in different situations.
Payments, surveys and standard registrations
When youâ€™re asking for familiar information such as name, address, contact details, a comment, post or inquiry and credit card payment information your website visitors will easily recognise what you are after, so you want a design and layout that is very fast to scan and enter details into.
Put the label (the description of what information you want the visitor to enter into your form object) as bold text, left aligned above the form object.
For surveys, your labels are questions that often have a clarifying statement to help the website visitor understand the type of answer youâ€™re after. In this situation you need more room for your label.
Put the label left aligned above the form object.
Data entry and unusual data collection
For forms that require repeated data entry, like for a software application, or where unusual information (things that donâ€™t get asked for in 80% of online forms) is being asked for, such as passport or drivers license numbers for example, the layout is different.
Put the label left aligned in the same row to the left of the form object.
Whilst laying out your form correctly is essentially for making entering information quick, the look of your form determines whether it gets noticed and looks easy to fill in.
A good rule of thumb is the neater your form looks, the easier it is to complete.
Colour, whitespace and images
Unlike paper forms, online forms can be designed to look really pretty using colour and images to create something very stylish. The downside of all this creativity is confusion for your website visitor, meaning fewer forms completed and submitted.
So when it comes to using colour and images itâ€™s best to keep it to a minimum and use them with the intention of getting your forms entered successfully, rather than to make your form look good.
For best results -
- Use a white background and a dark text (labels) colour preferably black.
- Be consistent with punctuation, capitalisation of words and the font you use for text.
- Display contact information on your form to allow visitors to contact you if they have difficulty completing the form and require help.
- Group like types of questions together into sections with a descriptive sub-title.
- Use whitespace to create a visual separation between sections of questions.
- For longer forms, use a pale grey single line to divide the different sections as well as whitespace.
- For very long forms (where you need to use the scroll bar to see the whole thing), split it up into several pages.
- Make your submit button large and coloured so that it standouts.
- If you have more than one button for your form, make the one you want them to use stand out more than the other one, using colour and size.
- Make form objects that are mandatory (require an input or selection) obvious by using a symbol (such as an asterisk * ) or the word â€˜requiredâ€™ near the label or after the form object.
- If you use a symbol to indicate that a form object is mandatory, provide a legend that explains what the symbol means.
- If you colour the form object and symbol to indicate something is mandatory do NOT use the colour red (it is reserved for alerting people to errors and system failures).
Automation and Interaction
One of the greatest advantages of online forms over paper-based forms is that you can automate the validation (checking to see that the information entered into the form is acceptable before submitting it) process and add helpful features to guide people so that itâ€™s easy for them to complete the form correctly.
Whilst there are many examples of basic forms and with simple layouts on the Internet, it's the complex techniques that assist your visitors whilst filling out your forms that will cement the relationship you've established with your website visitors and extend it beyond just one transaction.
Comments are closed.