“Window shade” Wizard Navigation

June 27, 2008 | By Heidi Adkisson

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):

Windowshade1

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

Windowshade2

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.