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
Step-by-Step Instructions to a user.
Constantine and Lockwood discuss this pattern, along with
and other techniques,
in their paper
Instructive Interaction: Making Innovative Interfaces Self-Teaching.
I have used their names for these two patterns.