What is the best alternate layout for horizontal and vertical tabs on one page?

Question

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.

Answer 1

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 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.