Complex form: Accordion + vertical navigation menu + back/next

Question

I have seen some wireframes from some colleagues asking the user to fill out some very complex forms.

They have seperated the forms in "sections" (which is a good idea). Further they introduced a vertical navigation area on the left which allows to switch between the "sections" of the forms. They also put every "section" in one accordion. And inside the accordion they've placed "back" and "next" button. With all those elements you can jump between the "sections" of the forms.

To me this feels a bit confusing and redundant. Are there any (documented) best practices which I can use to argument against this interaction design?

Answer 1

I have designed exactly the same design for complex forms in a government agency. During the usability testing, user frustration was "They were filling out 10 sections and then hitting enter and finding 5 validation errors" so I introduced "next and back" buttons to validate each section separately before moving on to next one. The user found this idea to be quite helpful on mobile devices & tablets (I was designing these forms mobile first). In your case, if you are not putting validation on "next and back" buttons, then you don't need to use next and back buttons because users have enough choices to switch between sections.

Suggestion: Add validation on next button so user will see errors before they move on to the next section. This will help the form to run smoothly on smaller devices.

Answer 2

It sounds like the control you describe is a standard horizontally-based progress indicator with the "tabs" moved to a left-side navigation control. If this is the case, then using previous/next buttons is fairly common.

Answer 3

Even complex forms are essentially made up of 'simple' parts combined together, so you really need to consider where the complexity comes from and how best to manage it within the constraints. These would generally fall under the category of information architecture and content design that is supported by the user interface design, rather than using UI to address underlying IA issues.

The two main things I can think of are the complexity of the process and the complexity of the content, which I will cover separately:

Process complexity

• For linear processes (i.e. you can only move one step/section at a time) you can manage the complexity by keeping the user flow linear and helping them to skip to sections that they don't need to complete (if there is some conditional logic available). By the sounds of it this doesn't apply in your case. You can also provide a progress tracker if you feel like it will provide a good visual indicator.
• For non-linear processes you should still try to organize the content into logical sections, but instead of a progress tracker you can use a checklist style menu that shows the number of sections completed. Instead of allowing users to navigate within each step/section, you should point them back to the checklist as a central and consistent point of navigation.

Content complexity

• When the density and volume of content is greater than the optimal level that the user can process efficiently, the best option is to break things down into smaller 'chunks'. There are various guidelines on the amount of information (e.g. characters/words per line, lines per paragraph, etc.) but these can be language or content dependent and you have to adjust this for the audience.

• When the type of content is very complex (e.g. complex charts or visualizations) you can also apply the same strategy to break the information down into simpler elements or provide additional content to support the explanation of the content.

So you should be able to see that in general complexity arises from combining smaller elements in ways that still maintain the logic and structure of the overall process/content. That way, even if you have to try and deal with something that is very complex, it still allows the designer and user a sensible way to manage it all.