As in the real world browsing using a clearly labeled system on the web just works. Think about it, any shop such as a music store clearly labels rack space either by product or genre and it’s quick to find what you are after. Supermarkets do this great as well by hanging large signs above the aisles so you know where to go and if it’s not quite right just look up again and you know where to go next.

Now think about this concept in relation to navigating a website. When you land on a site you have no physical sense of how big it is. It’s not like being in a shop and looking around the entire place. And it’s probably likely you’ll not of landed on the home page. To get from one location to the next, you click a text link or a button that takes you to another page with no real idea of how much content you may have skipped.

Navigating the web is a very different experience when you start to think about it in these situations. In the real world we move about physically and look around with visual awareness. On the internet, you move about a space that has an unknown size and can’t always grasp it visually.

How Tabs Blur The Line

Tabbed navigation brings the real world to the web, and when it’s done right nothing can really beat it. Tabs help a user answer many essential questions. For example Where am I? Where can I go? What else is here?

The idea for tabs in navigation on the web comes from the use of them in folders or filing cabinets, something that we are used to in the real world. It’s something that doesn’t need explaining. It’s clear and you can get to the content you need straight away, assuming you have a good filing system going, and this system is a must for a good navigational structure.

1. Tabs Show The Way

When creating a structure to a site it’s of key importance to show where you are and where you can go.

Tabs that are designed well clearly show your current location with active states, or visual indicators such as colour or font size that shows them apart from inactive tabs.

Wire and Twine

Wire and Twine use a great texture with a clean layout and clear highlighting to an active tab.

2. Tabs Connecting With Content

Some sites connect the navigation with the content. This helps with the idea of a connection between the page and the active tab.

Fancast

Fancast use tabs to navigate between different videos of TV shows.

3. Tabs With Secondary Navigation

Tabs for primary navigation can be useful for showing users where the most important parts of a website are. The general rule is no more than 8 primary links, any more it becomes cluttered. The way around this is to use secondary and even tertiary levels of navigation within the tabs.

ASOS

ASOS use tabs to display secondary navigation to help navigate across the site quickly.

4. Tabs With Content

Tabs don’t need to be limited to primary and secondary navigation. They can be used to flip between areas of the same content. Combined with technology that switches content without reloading a page can not only lift a site but make the content more exciting.

MailChimp

MailChimp uses tabs to show different areas of their web app without ever leaving the home page.