Wizards, Warlocks and Forms

Another interaction design lesson reinforced and illustrated by a recent project was the need to beware of wizards.  Not the kind with pointy hats and long beards, although those should be carefully investigated to be sure you're not dealing with the warlock variety.  In truth, I don't know the difference other than warlocks always seem to be bad and wizards can be good or bad.  Or is a bad wizard automatically a warlock?  Who knows?

At any rate, the wizards I'm concerned with are the kind we often use to present forms in a linear fashion or to walk a user through some sequential steps during a setup, registration, shopping or other process.  They are often helpful in making sure that pre-requisite choices are made in the right order.

However, and here's the lesson, we must be careful not to present multiple forms that are not order-dependent in a wizard format.  Often this will lead the user to stop during the completion process when they come to a question they cannot answer or are uncertain how to answer.  It would be better for them to skip that question and go on to some others they can answer.  But if they think they are in the midst of a wizard or sequential process, they'll often stop cold.

Some of the cues that make users think "wizard" are "Next" and "Previous" buttons on the page, numbered forms, a progress indicator across the top or down the side of the page and so forth.  There are of course many visual design cues that can give the appearance of a wizard format.

When you want to enforce sequential order use these kinds of design elements and of course make the pre-requisite fields required to force completion.  You'll often use a "setup profile" type of format when you want to capture a number of required fields up front and then present the optional fields afterwards.  Another technique is to apply this format to multiple sections which each have some required fields upfront which are then followed by the optional or non-required fields.

But what to do when you really don't have any "required" fields and order doesn't matter?  You can use instructions before starting the form and on-page to remind the user that order doesn't matter and that they can skip around all they want.  You can offer a "check progress" or "percentage complete" tool that shows them where there are unanswered questions without having a progress meter that can make the forms look too linear.  You can use "save as draft" or "save" buttons on the pages and avoid the "next" and "previous" buttons.  If it won't  make too long of a page you can also put all the questions on a single page.

This last technique can be improved by good organization of the questions into orderly sections that help the user think through the information needed.  Think of it as IA for the form or just good old-fashioned form design.

So how did we solve this issue on my recent project?  We divided the information up into multiple sections that could be completed in any order.  However, within each section there were required fields that prohibited saving until they were completed.  We also used "Save" buttons on the pages with a "completion-checker" tool that made the user positively indicate that any empty sections were left that way on purpose.  The "Submit" button only appeared as part of the check results to avoid inadvertent submission of incomplete forms.

Remember, wizards can be your friend if used correctly but turn into warlocks when they confuse and unnecessarily constrain the user.  Beware!