UI Patterns and Techniques

Dynamic Progression


From an ATM redesign

Use when:

The user should be walked through a complex UI task step-by-step, perhaps because the user is computer-naive, or because the task is rarely done. But you don't want something as constraining as a wizard -- you'd rather keep the whole interface on one page, for instance.

Why:

As the user sees the task unfolding directly in front of them, via a dynamically-changing UI, they can form a correct mental model of the task more quickly and easily. There are none of the awkward context switches that separate wizard screens impose.

Furthermore, since the UI is kept together on one page, the user can very easily go back and change their mind about earlier choices; they immediately see the effect on subsequent steps.

For occasional tasks, this can work better than presenting a complex and interlinked set of controls all at once, because it's always obvious what the first step is -- and the next, and the next! The user never has to think too hard.

How:

Show the controls for only the first step; when the user's done with that step, show the controls for the next step; etc. "Show" may mean "enable," or literally place on the page. Leave the previous steps' controls visible, so the whole UI is progressively revealed.

In many such step-by-step designs, the choices the user makes at one step alters the rest of the task. For instance, an online order form asks if the billing address is the same as the shipping address. If the user says yes, then the UI doesn't even bother showing entry fields for it. Otherwise, there's one more step in the process.