What is the difference between a Navigation Bar and Tabs?

Question

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

^{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?

Answer 1

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.

Answer 2

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.