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.

The original design uses horizontal tabs for categories that are not related, and vertical tabs for pages that are sequentially related. In terms of usability and navigation I think it is not as intuitive as replacing the vertical tabs with a breadcrumb or progress tracker for the user to follow. What is the best way to present this type of navigation/menu?

To help clarify the question, the horizontal tabs contain the higher level hierarchy, and the vertical tabs contain the lower hierarchy. That is, when you select from the top tab, you get a range of vertical tabs that are displayed as a result.

enter image description here

share|improve this question
2  
Are the two sets of tabs operating on the same body of pages? Or are one set subcategory of another? –  JOG Apr 18 '13 at 7:46
    
This is a subjective question. The answer depends on too many things, including designer preference. –  norabora Apr 18 '13 at 22:50

2 Answers 2

The most successful program that I know of with both horizontal (top) and vertical (side) tabs is Microsoft OneNote.

I have used OneNote extensively and been active in a community of users, and I have never heard anyone complain that their tab system was a problem. It has been tested and refined over many versions and uses the following system, which I would recommend:

  • Side tabs (vertical) are used for unrelated subjects. They could be things like: school, work, or home

  • Top tabs (horizontal) are used for categories within the subject of the side tab. If the side tab were school, they could be: math, astronomy, or history.

enter image description here

share|improve this answer

I would say that would be a matter of design. In your mockup all tabs are aligned directly to the page. Being horizontal or vertical doesn't imply any hierarchy, so all tabs look like they could work on the same level.

Either approach could would as long as you're clear about the hierarchy.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.