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.

What is the correct/best name for the UI component which acts like a breadcrumb trail but indicates where the user is in a defined series of steps?

You see it all the time, something like:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Where Steps 1 & 2 are complete, Step 2 is the current step, and Step 4 & 5 are unavailable at the moment.

It's probably on the tip of my tongue but I can't think of a good name for it.

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

Some names could be...


Navigation vs. Indication

Checkout Navigation

If the steps are clickable links I would call it something navigation. For example, in a checkout process I would call it "Checkout Navigation" or "Checkout Step Navigation".


"Progress Bar" vs. "Step Progress Bar"

If you call it a progress bar, you should definitely clarify with the word "step" to avoid confusion. Look at the Google Image search results below:


share|improve this answer
    
I appreciate your input. "Progress Tracker" sits best with me, but it definitely isn't an industry standard term. Dang, I really would have thought it would have had a clear and succinct name, it's such a common design paradigm. –  Sean Connolly Jul 30 '13 at 2:21
3  
There aren't always clear and succinct names for UI elements. What is more important is that your own team has a shared name for it. –  DA01 Jul 30 '13 at 2:25
add comment

It is called Progress Bar. http://developer.yahoo.com/ypatterns/navigation/bar/progress.html

You can find slightly different implementation of progressbar over here: http://ui-patterns.com/users/9456/collections/2046

enter image description here

share|improve this answer
1  
Hmmmmm, it doesn't sit right with me. I think of a progress bar as the animated 'percent complete' you watch (and watch, and watch). I totally agree, it's a "bar" which represents "progress" but I feel like that name is already taken in UI vocabulary. To call this a progress bar would thus be misleading. –  Sean Connolly Jul 29 '13 at 23:17
    
I agree with you but it is known by the name Progress Bar so far. I have few suggestions that it could be called Progress Steps, Progress Indicator, Progress List or Progress Tabs but none seems to define it any better than the word Progress Bar does. –  Salman Jul 30 '13 at 0:02
1  
Not quite sold on this. Progress bar elements are significantly different. Maybe a "Step Progress Bar" or a "Segmented Progress Bar". Even still, you would never have a traditional progress bar that contains links. –  DesignerGuy Jul 30 '13 at 3:40
    
If you have progress bar under navigation controls, you would always know what sort of progress bar is being talked of. I have given reference of Yahoo Patterns Library to back my point, if you have a reference to back your "Step or Segmented" point, please share that. "Segmented Progress Bar" is also not accurate as several non-clickable progress bar show their completion one segment at a time. Like Profile Completion ones. hindaincentives.squarespace.com/storage/… –  Salman Jul 30 '13 at 7:16
    
For almost every alternative name I've suggested, I've pointed to someone in the community referred to it that way. I think the alternatives just communicate a little more clearly. I wouldn't say the Yahoo pattern library is the authority on UI/UX patterns. –  DesignerGuy Jul 31 '13 at 20:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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