Having to design for the worst case and for the majority of form-filler's circumstances mean that many traditional forms contain questions, and sometimes whole sections, that are not relevant to them. One great feature of interactive and online forms is their ability to tailor the questions that the form-filler sees, based on their customer segment, or based on the answers they provide, for example. This article covers some of the key issues and opportunities in designing and developing online forms.
Line up the fields, and make the fields the right length
Each field that a form-filler has to complete has to have a question or label, indicating what information you want them to provide. It's simple to run the fields next to your labels, but to visually cue users in to the start of each field, it's best to align the labels right (and stack them vertically) and then align the fields left so that they all line up. This makes it easier for form-fillers to see the start of each field. Also, make the length of each response field reflect the length of your expected answer. This reassures form-fillers that they are providing the information that you require.
Each field that a form-filler has to complete has to have a question or label, indicating what information you want them to provide. It's simple to run the fields next to your labels, but to visually cue users in to the start of each field, it's best to align the labels right (and stack them vertically) and then align the fields left so that they all line up. This makes it easier for form-fillers to see the start of each field. Also, make the length of each response field reflect the length of your expected answer. This reassures form-fillers that they are providing the information that you require.
Accordion forms
Accordion forms reveal sections to the user as they progress through it. Each section is 'collapsed' under a section strip, and the user clicks each strip to reveal the section. This is becoming a common online form mechanism, and research seems to suggest that users fill them in more quickly as they get more of an overview sense of how long the form is, and where they are in the interaction. In addition, accordion forms bring all the complex content together under one set of over-arching controls.
Accordion forms reveal sections to the user as they progress through it. Each section is 'collapsed' under a section strip, and the user clicks each strip to reveal the section. This is becoming a common online form mechanism, and research seems to suggest that users fill them in more quickly as they get more of an overview sense of how long the form is, and where they are in the interaction. In addition, accordion forms bring all the complex content together under one set of over-arching controls.
Progressive disclosure
This is one of the most powerful features of interactive forms - the ability to only show the form-filler the questions that are relevant to them. Based on the form-filler's response to certain questions, the next 'screen' will display (or the next question will animate) the next relevant question or section. For example, to ease the burden when filling in bank details in a payment form, the questions and field lengths can be varied according to the type of bank or credit card the customer has.
This is one of the most powerful features of interactive forms - the ability to only show the form-filler the questions that are relevant to them. Based on the form-filler's response to certain questions, the next 'screen' will display (or the next question will animate) the next relevant question or section. For example, to ease the burden when filling in bank details in a payment form, the questions and field lengths can be varied according to the type of bank or credit card the customer has.
Make fields tolerant
There is nothing more irritating than completing a form on a banking or financial website that does not recognise a currency value because it includes a comma, a currency sign, or fails to have a decimal point: where possible, build forms that are tolerant to some extent to the sorts of errors or short-hand approach that many users have.
There is nothing more irritating than completing a form on a banking or financial website that does not recognise a currency value because it includes a comma, a currency sign, or fails to have a decimal point: where possible, build forms that are tolerant to some extent to the sorts of errors or short-hand approach that many users have.
Polite error messaging
When a user fills in a field incorrectly, highlight the field clearly - perhaps using red, and politely ask the user to 'Check your answers please...' Don't imply that the user is wrong or has messed up, and make sure their errors are clearly highlighted but not glaringly so.
When a user fills in a field incorrectly, highlight the field clearly - perhaps using red, and politely ask the user to 'Check your answers please...' Don't imply that the user is wrong or has messed up, and make sure their errors are clearly highlighted but not glaringly so.
Use the right interface elements
Using the most appropriate response field can significantly speed up the filling-in process for people whilst also making sure data provided is accurate. If a question has one answer from a set of options, provide the options with radio buttons. If there are a number of responses and the user can select all that are relevant, provide check-boxes.
Using the most appropriate response field can significantly speed up the filling-in process for people whilst also making sure data provided is accurate. If a question has one answer from a set of options, provide the options with radio buttons. If there are a number of responses and the user can select all that are relevant, provide check-boxes.
When selecting one from a defined set of responses, menus can be a good interface element. But they can also slow people down. Don't format date of birth fields with drop downs - form-fillers just find this irritating because their date of birth is so hard-wired in their head. If you do use drop downs, make them tolerant to allow the user to key their answer as well as using their mouse.
When designing interactive forms, consider these points and you'll be sure to keep your customers happy.
Article submitted by Andrew Boag, Director at BoagMcCann Ltd. BoagMcCann has over 25 years' experience designing award-winning customer communications, information guides and visual aids. To find out more about interactive design, visit www.boagmccann.com
Article Source: http://EzineArticles.com/?expert=Andrew_Boag
Article Source: http://EzineArticles.com/7092450
0 comments:
Post a Comment