blink design library

Indicating steps within steps

Often, it's handy to break down a wizard flow in to a few main steps with associated substeps. But in using this approach a question can arise as to how to represent the substeps in progress bar navigation.

Sharebuilder's Open an Account function displays substeps by breaking a longer step (Create Account) into segments (click to see image full-sized):

The advantage of this approach is that is communicates the main tasks required while still visually reflecting the length of the entire process.

"Window shade" Wizard Navigation

The Adobe store uses a "window shade" navigation scheme for its check-out flow. Here is the initial  page state, with the first step active (click image to see full-sized version):

When I click continue to move to the next step, the current "window shade" closes and the second steps opens:

This particular interface is very responsive, and so the task flow feels much more compact compared to more traditional page-to-page navigation.

Practically, this approach works best where each step isn't too long - and there are just a few steps - so that the "next steps" listed below the current one are clearly visable.

'Filmstrip' Navigation

I've noticed a number of sites recently using "filmstrip" navigation, which allows users to page through items horizontally within a page.

From: YouTube

From: Amazon

Here, to help users understand there are more items available to view, there is a partial display of the next items on either end of the strip.

From: Wetpaint