I have a general questions on the definition of a flow of highlighted images defining where you are in a web application flow.

I want to buy some template online but I dont know what this UX methodology is called.

enter image description here

  • That website with the picture wants you to register and pay. I suggest imageshack.us
    – KDecker
    Commented Mar 26, 2013 at 17:12
  • Okay here is the image shack link imageshack.us/f/577/onlineregistrationstepo.jpg
    – momoterraw
    Commented Mar 26, 2013 at 17:18
  • 4
    My god I am stupid. That is the picture......
    – KDecker
    Commented Mar 26, 2013 at 17:20
  • Lol Do you know what those things are called when you have a step1 step2 step3?
    – momoterraw
    Commented Mar 26, 2013 at 17:38
  • Hmm. I would call it "user controlled stepwise information processing".
    – KDecker
    Commented Mar 26, 2013 at 17:56

4 Answers 4


It seems to me you are looking for the "wizard" ui pattern. Here is a link that has a lot more information explaining the purpose and reasoning behind the pattern: http://ui-patterns.com/patterns/Wizard

To give the user feedback on where they are in the wizard either text or graphics can be used. I think this is the particular piece you are referring to.

The answer that was posted right before mine mentions the "steps left" pattern. From the link I shared with you here is the explanation of what makes that different from the wizard pattern which might help you know which one you actually are looking for:

The Wizard pattern is very similar to the Steps Left pattern. The difference between the two is the focus. Where Steps Left is focused only on explaining the steps of a process, the Wizard pattern is about parting dependable sub-tasks needed to perform a complex goal into separate steps.

The Wizard pattern is also different from the Steps Left pattern in that the steps needed to perform a goal can vary depending on the information inputted in earlier stages. In this way, the Wizard pattern separates itself from being merely an visible aid for the user.


I've seen it referred to as "steps left."

  • 1
    Hah I just realized we both referenced ui-patterns.com. Commented Mar 26, 2013 at 17:50

I think that is a progress tracker or progress indicator.


I tend to call it a progress bar.

Showing progress is always recommended for a sequential process like an ecommerce check out.

A 'Wizard' may have a progress bar like this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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