Responsiveness

Design of Complex Forms: For Responsiveness, Accessibility and Friction Free Experience

Filling in online forms is an inevitable part of living our lives online and digitizing our world. But do they have to be so onerous.

Offline, forms are pretty painful, especially longer, more complex ones. Place the same form online and you add even more complexity to the process of form filling, including ensuring instructions are clear, guiding the user through multiple input types and handling potential delays whilst checking input data, or calling third party services. Compounding this, we are also at the stage where we must, as designers, create sites that allow the form to be shown and work across all sorts of browsers and screen sizes; the number of inter-relating variables can be formidable in some of the more input intense forms. Ultimately good UI design can go a long way to making the completion of complex online forms, perhaps not fun, but maybe a little less painful.

I have spent several years now working with designers on creating as friction free a form filling process as possible. The forms I work with are highly complex. They involve many moving parts; including checking input details with third party services. I’ve learned a few things along the way, I am still learning, but I will share some of the better practices in complex form UI design, here.

UI Design of Complex Forms

Lengthy Forms and Progressive Disclosure

One of the issues I’ve come across in complex form design is they are often very long and have many elements. Users have to enter lots of information, click check boxes, pick dates, upload files; it is all very laborious, especially on a smart phone. To reduce the friction of a long form, we’ve had some success by breaking up the experience into bite size chunks, make the user feel like they are actually moving through the form, rather than filling in an endless set of fields. Usually a form will be naturally composed of individual sections, personal details capture, address, financial details and so on. Each of these areas can be broken up and displayed to the user, in focus, on screen, so they feel like they are making progress. Once they’ve completed that section you can show them the completed entries so they can see some movement and build a mental map.

One of the ways that we break up the form is by using a single page, but compartmentalising it into sections using progressive disclosure. This technique has been used very effectively by the likes of Apple in their online shop purchase process. Users enter their requested details and are then shown the next section by clicking Submit, Next, or something similar to display the next set of questions. This process works well, but some thought needs to go into creating that all important mental map for the user, so they know where they are in the process. Some people advocate the use of progress bars, but these can be tricky to display on mobile devices – one way round this is to display them whilst the user is on a larger screen, but to hide them when on a smart phone. Frameworks like UIkit have built in mechanisms for this type of responsive behavior.

Progdis 1

Progdis 2

One important point to make at this juncture is movement. Keeping a form flowing, keeping the user moving through the process, is central to getting that user to complete the form; form completion is the ultimate goal. If you can move the user through the different parts of your form, reducing any delays that can occur, or if they must occur (for example because you have to make a call out to a web service) then give the user a finite time to wait, onscreen messaging, cleverly conveyed, can make or break form completion. One of the nicest onscreen messaging I’ve seen recently, while I waited for web service call to complete, was a screen alert telling me this won’t take long, coupled with interesting quotes.

Simple Things Can Make The Difference Between Success And Failure

Little things can make all the difference when reducing friction in complex form completion. For example, field labels. When you add a field label to a form field, do you place them in line, or beside the field? The problem with inline is that once you start typing into the field, the field label prompt disappears. If your user forgets what they’re typing, there’s no label to guide them anymore. So best practice is to put these labels outside of the field, but if you do, be careful of the placement; the closer to the field the better, otherwise users get confused as to which field the label applies to. The Neilson Norman Group who carries out research into user experience, have looked at this exact problem and highlighted the need for correct labeling –the same research also talks about how important it is to group related objects when designing complex forms. It is worth noting, that if you are building a responsive form, you’ll need to make sure the label placement is in a suitable position on smaller screens.

Another example of a small thing, which is appreciated by the user, is to clearly mark mandatory fields and even consider marking non-mandatory fields. Just knowing that you don’t have to complete all of the form fields can make an otherwise painful form filling exercise seem less so.

Allowing a user to create a mental map of what they’ve achieved so far, but accommodating errors fixes, can mean that completed forms are less likely to contain incorrect data. It is really easy to mistype something, so it’s really important, especially when collecting data such as delivery details, to let your users see the completed fields, but allow them to edit them before submitting. You can do this in a number of ways; we’ve used various methods, including offering ‘Prev’ / ‘Next’ buttons which allows the user to move back and forward through the form, allowing them to edit previous entries. We’ve also used an ‘Edit’, next to previously completed form sections, again to allow easy editing before submission.

Whatever you do, keep things consistent, this includes date input fields. However, be ready to be flexible on consistency in special situations, for example, one area we have experimented with is the best way to input date entries. In this case, consistency went out of the window; however it was for a good reason – to improve usability in date of birth entry. If you were born before 1970, then to pick your year of birth you have to scroll down a (ever increasing as you age) list to find your year of birth (this is even more annoying on a mobile device). So we now allow users to enter their year of birth by typing it in. However, we don’t allow users to type in the day and month of their birth as this can easily be transposed. So we have a mixed date of birth entry field – this is the exception, rather than the rule in maintaining consistency in forms.

Password Entry

Another simple trick that has seen improved usability is in the password entry field. Instead of having users enter their password twice, as has been the more common approach, we instead, use the ‘Show’ option within a field so a user can see their password once entered. This retains the security of obfuscating password input (the ‘Show’ only briefly showing the password to the user or having the option to ‘Hide’ again) whilst opening up screen real estate and removing the need for yet another typed in entry point for the user – this also keeps the user moving along through the form.

Passwordshow 1

Passwordshow 2

Accessibility and Complex Forms

Clarity not only makes form completion better for all users, but it specifically addresses issues for many disabled users too. Keeping forms as simple as possible; this includes, minimising clashing screen colour schemes, keeping related data entry points together in sections, giving simple and clear instructions in tooltips and similar and keeping field labels clear and obvious, are all essential elements in making your forms accessible to all users. WebAIM which is a not for profit organisation looking at improving accessibility across the web, for the disabled user, has done a lot of research into form accessibility.

Using Analytics and Usability testing to Improve Form Performance

Ultimately, your work on creating a friction free form will need to tested. Usability testing is the best way of finding out if your carefully designed complex form works. Usability testing is the only way to ensure that your implementation of the various methods of reducing friction in your form is working. And analysing the results of those tests will allow you to fine tune the form, so that when it finally gets online you will see lower dropout rates and more accurate form completion.


Onextrapixel – Web Design and Development Online Magazine