Steps Left

Design Pattern

Add a navigation block describing the steps involved in submitting data to the system. The block should always appear on the page. As the user progresses through the process, the navigation block is updated accordingly. The current step is highlighted, giving a clear indication to the user how far they have come and how much further there is to go.

Remove unnecessary distractions like extra navigation, advertisements, and the likes.

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 e-commerce websites, where the checkout process is often guided by this pattern. In e-commerce websites, 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 to the Wizard pattern most commonly found in desktop applications, which guide the user step by step.

Workshop exercise for multi-step journeys

For onboarding or checkout flows, map the steps users expect, identify the points where they lose their place, and compare clear progress feedback with simpler alternatives. Learning Loop's Ideas first, Patterns later exercise can help a team explore alternatives before selecting a UI pattern. Measure task completion and user understanding, not just clicks to the next step.