Steps Left
Problem summary
The user is about to go through the process of filling in data over several steps and is in need of guidance.
Example
Usage
- Use when the user is about to go through a longer process of giving data to the system that is longer than two screens (steps).
- Use when the steps of a process is so long that the user might get the impression that it will go on forever without the guidance of steps.
- Do not use when there is only 1 or 2 steps in submitting data to the website.
- Do not use when the process of filling out data is easy foreseeable.
Solution
Add a block of graphics describing the steps involved in submitting data to the system. The block should always appear on the same spot of the page. As the process progresses, the current step is highlighted, giving a clear indication to the user, how far the process has come and how far is left.
If there is a need for showing what steps are to come in a specific process, as is there a need for simplifying the page layout for those pages involving the steps. Remove unnecessary distractions like extra navigation, advertisements, and the likes.
Rationale
The Steps Left pattern is used when it is critical to maintain the user’s focus throughout the process of filling in data to the system. This is for instance critical in web-shops, where the checkout process is often guided by this pattern. In web-shops, the checkout process is the most critical part of the site, as this is the part that captures the customer’s money. The Steps Left pattern provide the user with a great overview of how far in the process the user has gone: it provides a visible end to the process, which the user can aim for.
This pattern is similar of Wizards known from especially desktop applications, which lets the user make his choices step by step.
More examples images of the Steps Left pattern
 |
 |
 |
 |
| At ignition-skateshop, the current step of the checkout process is highlighted. | At amazon.com, the finished steps are marked in color, while the remaining steps are greyed out. | The wizard for creating a Google AdSense ad shows the steps involved. This is a great example of non-shopping websites using this pattern. | The Steps Left pattern used at digg.com when signing up for a new account |
Tels the user how far he’s already come, and how long a process is still to take. Good feedback and feed forward at once, great success! Without it, its as if someone is pointing at you with a flashlight. You can see whats behind you, and you can see where the light is, but you can’t see behind that and between you and the light its hard to see too.