-1

I'm building web UI for a "wizard" workflow with 4 sequential steps-- users proceed in order from Step 1 through Step 4. I'd like to include a progress indicator showing the user where in the workflow they are.

For each step, I'd like to show:

  • a short name of each step (e.g. "choose effective date")
  • the step number
  • an indication of which step is selected

Given the shape of the forms and surrounding chrome, I'd prefer a horizontal progress bar rather than a vertical one.

I'm looking for a gallery of examples of this kind of "step progress indicator" in an HTML wizard. Anyone know of such a gallery? If not, do you know good examples from other websites that I can draw inspiration from?

Extra credit for ideas that can be implemented using CSS alone without requiring any new images on my site.

Here's a few I found so far, although I'm looking for something a little more "designed".

Improve this question
1
  • Hi Justin, your question doesn't really work for our site. Take a look at How do you indicate progress to users in a multi-step form? for a similar question that may help you. You can also try rephrasing your question to be more specific. We don't deal with implementation here, so CSS is out of bounds. See the FAQ for more info on what an acceptable question looks like.
    – Rahul
    Commented Feb 23, 2012 at 19:41

2 Answers 2

Reset to default
2

Hah, within 2 minutes of hitting "Post" I finally hit the jackpot in Google: a review site with 30+ examples of what I was looking for:

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

The trick was removing the word "wizard" from my Google search and searching for "html multi-step progress" instead. Apparently "wizard" is a synonym on the web for "desktop app". :-)

Improve this answer
2

You can check also some UI design patterns gallery such as:

http://ui-patterns.com/patterns/Wizard and http://patterntap.com/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.