Double Tab Navigation

Problem

The users need to navigate a hierarchical structure

Solution

Use a double tabular to show the two topmost levels.

From www.apple.com


Use when

Sites where large amounts of pages are available and are hierarchically structured. The number of elements in the toplevel and in the second level each are less than 10. Users want to see where they are now. Users want to know how to get back to the main page

How

Use a nested tabular to show the topmost level and one level lower. The current page is marked in both tabular and they are visually "connected". Additionally, use colors to indicate the selected tab. The topmost tabular is always visible while the other tabular changes depending on the current top-level selection. The first tab in the top-level is reserved for the home page if there is not any other "Home" destination.

Why

The tabular metaphor is well-known in user interface and facilitates easy navigation between groups of information. By showing the current position in the two topmost levels the users know where they are and can also jump to other categories.

More Examples

Dell's web site uses a more text-based double tab.




plml logo

Comments

3 comments have been added to this pattern


Craig Birchler, 30th May 2008
I know this is a comment seciton, not a forum, but... I am currently in need of a third level of distinction, as opposed to the two levels shown in the examples above. For example, using the www.apple.com scenario above, I might have Quicktime > Download >... then the two (or more) options "Mac" or "PC".

A third level might be relatively intuitive, but I fear it could become frustrating as a click through sequence and difficult for the user to place themselves at their current location. Are there any thoughts for similar navigation schemes which utilize 3 layers?
Anna Nmty, 18th June 2008
Perhaps a combination? Try the double tab, but the second tier does a fly-out menu.If the fly-out comes from hovering over a second tier tab, then you are still at just two clicks.
Danny Hope, 19th June 2008
Neither of the examples above are examples of double tab navigation.

Tabs are a real world metaphor and as such they must look (not just behave like) tabs.


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha