Too many navigation levels?

Question

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

[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

Answer 1

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.

Summarize:

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.

Answer 2

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.

Answer 3

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.