blink design library

"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.

No Option to Cancel or Skip

I was just interested in trying Picasa out and didn't want it to scan my computer for images, fearing it would tie up my computer unnecessarily. However, the installation wizard didn't give me the option to cancel or skip the step. As a result, I felt trapped.

From: Picasa

Wizard "Running Receipt"

This is a wizard for defining attributes of a cruise (for example, what type of room configuration, meal plan, and vacation "extras").

The wizard uses a "running receipt" in the right column to not only let users know where they are in the process, but also to show the selections made thus far. We've done designs similar to this when a wizard involves a large number of selections.

From: Princess Cruises

Wrong Button Emphasis and Placement

On first glance I almost clicked the large button on the right -assuming it would take me to the next step (as is the convention in a wizard-type function). But this would have taken me back to a previous step. The large size of the button also communicates that this is the primary page action (rather than the secondary action of going back.)