Recently I was presented with a website navigation problem. The problem presented itself as we drew up plans to enhance security on our site. In our security scheme, some pages are accessible to authenticated users, others are not, and others require an extra layer of security. This is pretty typical. The problem is deciding how design user navigation through the site that does not enforce a overly rigid path, that flows through existing pages before presenting the final result.

When you speak about a series of steps or events that are preliminary to a final step, you often speak in terms of workflow, or wizards as a means to that end. Wizards are the generally the best workflow technique because they are easy to understand, use visual cues to indicate the progress, and because users are familiar with them. It’s a paradigm that universally relied upon by software developers. Wizards are standard interfaces for software installers. They are used heavily by web merchants. Even your mom knows what a wizard is. Why is that? Well, for one, there’s really no other way to do it. Anytime you can enumerate “In order to do A, you do first do X, Y, and Z”, then you are in wizard territory.

An installer or a wizard implemented in a desktop program can easily enforce the path of information gathering, through modal dialogs. There’s really nowhere else to go but forward or backward. Where web wizard interfaces are concerned, the code behind the wizard has to do extra verification to insure the wizard is followed correctly. The information is stateful, and must be persisted between steps; after all, the user can decide to browse off to facebook during the process, and may jump back into the wizard at any place in the series of steps.

This is why web wizards should be extra-friendly – they should outline the steps in advance, and they should show breadcrumbs in the intermediate steps to make it obvious to the user where she is in the process. The Amazon Services wizard is a case in point – it’s very easy to use and understand. Before the wizard begins, a graphic illustrates the number of steps to completion. The point is to make it dead simple to sign up.

More...

Tags: wizard, navigation, asp.net, redirect