Interactive Form Design: A Brief Guide

Interactive forms have many advantages over their paper counterparts. As well as eliminating associated print and production costs, interactive forms can significantly reduce the burden put on the individuals tasked with filling them out.

The main issue with paper forms is that they have to be designed with the worst case in mind and to suit the majority of form fillers’ circumstances. This means that people often have to read through whole sections that are not relevant to them. Interactive forms, on the other hand, can display different sets of questions to different people, based on historic data, customer segment or the answers they provide, for example.

Here are some top tips for designing interactive forms:

Fields
Every field that a user has to complete should be clearly labelled, and should explain exactly what information needs to be provided. It’s easy to run the fields next to labels, but to visually cue users in to the start of each field, it’s best to align the labels right, stack them vertically, and then align the fields left so that they all line up.

It’s also important that the length of each response field reflects the length of the answer you expect the user to give. This helps to ensure you get the answer you require and also reassures the user that they’re providing the correct amount of information.

You also need to make your fields ‘tolerant’. Its extremely annoying for users when a form on a website 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 shorthand approach that many people prefer to use.

Progressive revealing
One of the most powerful features of an online form is the ability to only show the formfiller the questions that are relevant to them; something that would not be possible with a printed document.

For example, based on the user’s answer, the next ‘screen’ can display (or the next question will animate) the next relevant question or section. This could be used to ease the burden when filling in bank details in a payment form, as the questions and field lengths can be varied according to the type of bank or credit card the customer has, for example.

Error messages
When a user fills in a field incorrectly, do not imply that they are wrong or have messed up, as this will further increase the inconvenience already put on them from having to complete the form in the first place. Instead, highlight the field clearly and politely ask the user to check their answer.

Interface elements
By using the most appropriate response field, the filling-in process can be sped up considerably, whilst also helping to ensure that the data captured is accurate. For example, if there are a number of responses and the user can select all that are relevant, provide checkboxes. If a question has one answer from a set of options, provide the options with radio buttons.

Accordion forms
Accordion forms reveal sections of the form 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, much like a dropdown menu on a website.

This mechanism is becoming more common in form design, and research suggests it works – users fill them in more quickly as they get a better sense of how long the form is, and whereabouts they are in the filling-in process. Above all else, accordion forms bring all the complex content together under one set of over-arching controls, making the form much neater and easier to digest.

The reality is that noone likes filling in forms, but the less burden you can put on your customers, the better the experience for everyone.

More Business articles from Business 2 Community:

Loading...
See all articles from Business 2 Community

Friend's Activity