Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
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 Feb 23 '12 at 19:41
add comment

closed as not constructive by dnbrv, Charles Boyung, Rahul Feb 23 '12 at 19:40

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

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

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

share|improve this answer
add comment
up vote 1 down vote accepted

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

share|improve this answer
add comment

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