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.

Recently I found myself (potentially) discussing the nature of a horizontal/top navigation bar (h-nav-bar) and a tab set without knowing it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I know they're different, they feel different, at least to me. For example, I wouldn't share navigation items (like an vertical menu) across the items (One, Two, Three, Four) in the tabbed version (top), but I definitively do it in the h-nav-bar version (below).

Can anyone provide more insight on what's the cognitive difference between one and the other? What would user expect from one and the other?

share|improve this question

2 Answers 2

up vote 12 down vote accepted

Tabs are considered to be related to each other where as Navigation Bar are not.

Tabs are generally used to segregate data are somehow related. Like A profile can be displayed in Tabs where it can be divided in Personal, Professional, Education tabs. It is mainly used to show data about the same hierarchy but different in nature and also for organizing the data.

On the other hand, Navigation Bar as it suggests is used for different topics which might not be inter related.

For a User, which doing User Testing, we saw that Users think that when clicking on a Navigation Bar they will be taken to a separate page which might not/ or may be related to the current page. They take it to be like normal Navigation links which can be like About us page and Contact Us page. Same user for Tabs, thinks that he will be in the same page but will see related data to the parent or the opened tab. He doesn't expects that the page will navigate to a completely new page with no related data.

share|improve this answer
    
Would you think this would change Ina window based application where you don't have the same navigation controls? –  edgarator Jul 12 '12 at 13:54

While the two may often share similar design goals, I believe the tab set is a stronger visual metaphor. With a tab set:

  • The area on the screen that will change when the user selects a tab is obvious
  • It's clear that only one tab may be selected at a time
  • A tab set implies a shared theme

Steve Krug wrote about the benefits of tabs in Don't Make Me Think! The examples are getting quite old (get ready for a Wayback Machine experience!), but I believe his core message stands. Here's an excerpt I found.

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.