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.

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

share|improve this question
    
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 –  Ben Brocka Oct 27 '11 at 13:50
    
Quick suggestion - why not combine navigational elements 1 & 2 into drop-down menus? –  Nadine Schaeffer Oct 27 '11 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 Oct 27 '11 at 13:54
    
@Ben : I don't understand...can you clarify? –  Marc D Oct 27 '11 at 13:55
    
This would be an option with horizontal tab or 2 breadcrumbs-style nav...cl.ly/1J3j0P1k122f2j2s2u2L –  Marc D Oct 27 '11 at 14:10
show 1 more comment

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
yep. I changed that ;-) –  Marc D Nov 3 '11 at 11:05
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.