Do you thing the user workflow is too "busy" on the screenshot below?

The idea is to bring a user through all the the tabs. The workflow would be:

  1. Use the main tabs (vertical or horizontal..not sure yet) for main sections
  2. Use breadcrumb-style navigation for completing the different screens inside each of the main tabs (next/back buttons to go to the prev/next breadcrumbd)
  3. for one particular sub-tab there is lot of content. Using an accordion component would help (next will take the user to the next accordion slide)

So the reading of the layout looks a bit complex here, isn't it?

Any suggestions?

Thanks Wireframe for modal window...or not.

[Edit] Thanks to your advice I've came to use one of those view below.

  • vertical tabs: left image
  • horizontal breadcrumbs: right image.

I think it is less confusing. The read "flow" is from left to right. Although I'm still struggling (wondering) if the 1,2,3 (on the second panel) is clear enough.

Image fullsize here enter image description here

  • Is it a single subtab out of this whole system that would need multiple third level navigation elements? If so I would consider splitting it out into either more 2nd level or it's own 1st level element to keep the interaction model constsitant
    – Zelda
    Commented Oct 27, 2011 at 13:50
  • Quick suggestion - why not combine navigational elements 1 & 2 into drop-down menus? Commented Oct 27, 2011 at 13:51
  • @Nadine : user has to go through all the steps. I don't want to hide in a dropdown. I want him to understand the workflow he has to complete.
    – Marc D
    Commented Oct 27, 2011 at 13:54
  • @Ben : I don't understand...can you clarify?
    – Marc D
    Commented Oct 27, 2011 at 13:55
  • This would be an option with horizontal tab or 2 breadcrumbs-style nav...cl.ly/1J3j0P1k122f2j2s2u2L
    – Marc D
    Commented Oct 27, 2011 at 14:10

3 Answers 3


Just some input, I think the left full size image works very well. In the right side image, it's confusing to introduce "2" as a second horizontal navigational component. Especially how there is already a navigational component above it. Unless "2" is a sub menu of (dashboard, customers etc...) which it isn't.


the left side image is clear in its navigation, the right side makes me think too much and need to look back and forth to remember how i got here and how to move on, what's the order that I should finish this in?

Nice design, we did something very similar to the left side recently. Cheers.


Yes, it's complex.

The question is whether it is properly complex.

Think about the tasks a user would undertake with this interface. Do they really need to switch back and forth between 1st-level tabs once they're in the second or third levels? That would be surprising and painful--how would you keep track of progress unless it was linear?

If they don't need to quickly switch back and forth between, say, Finance and Lead Details, then summarize those tabs--use a "You are Here" metaphor instead of a tabs metaphor.

Are some steps much larger than other steps? If so, why are you showing them as same-sized tabs?

There are many questions that need to be answered here. The design you show can work--but rarely does, because it is a very generic way of showing a process, and processes are all different.


The new design is an improvement, but I wouldn't recommend putting the "next" button before step three. Some people are going to see next and click it without making it to part three.

  • yep. I changed that ;-)
    – Marc D
    Commented Nov 3, 2011 at 11:05

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.