UI Patterns and Techniques

Progressive Disclosure

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-growing 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: when a user is yanked out of their workflow into a rigid set of modal wizard screens, it feels like more of an imposition than if the UI had stayed within the user's working context. 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. This is better than jumping from one content-starved wizard screen to another. 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:	Start by showing the controls for only the first step. When the user's done with that step, show the controls for the next step; and so on. Leave the previous steps' controls visible, so the whole UI is progressively revealed as needed by the user. Keep it all on one page or dialog, so that the user isn't abruptly pushed into a separate "UI space." In many such step-by-step designs, the choices the user makes at one step alters the rest of the task (i.e., the task is branched, not linear). 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, and the UI shows the second set of entry fields when appropriate. This technique is less successful when used to radically change a preexisting UI, instead of adding UI controls to a blank space. The user's sense of space can be turned upside down when a UI is restructured out from under them -- it's very disruptive! But when done in an orderly and predictable manner, this provides a compact, space-sensitive way to present Step-by-Step Instructions to a user. Constantine and Lockwood discuss this pattern, along with Progressive Enabling and other techniques, in their paper Instructive Interaction: Making Innovative Interfaces Self-Teaching. I have used their names for these two patterns.