Interactive Design Example: Using navigation to express the information structure of the website to the user

Article Description: use bread crumbs to simplify multilayer tabs.

A website information structure needs to be displayed to the user so that the user can know where the current is and will be able to guess where the content might be.
How to express the information structure of the website to the user?
Use navigation.

Tabs Good navigation!
Tabs navigation is a form of expression, can be very intuitive to show the current column and other columns with the same level.

It's a good way to show navigation in the form of tabs, and it's also very common. However, if a site's information structure is very complex, a lot of levels, then it will often be tabs sets of tabs sets of tabs sets tabs ...

Four-layer tabs ...
We're going to have to abstract it into the following:

How to optimize many layers of tabs?
The most direct idea of course is to put away some tabs.
In fact, showing all levels of tabs at all times is unnecessary, wasteful, and wasteful of the user's attention.
In the example above, when I click on the "singer" in the third layer of tabs, my appeal is more to see the "singer" under more categories, so that I find a particular singer, this time does not pay too much attention to "background music" "My Favorites" "Message Board" "album" ... These tabs items become disturbing information at this time.
Still shows the value of the 123-layer tabs is mainly to tell users, the current "singer" column in the "Music Box"-> "Genuine music Library" under. Then, for the above layer tabs, you can keep only valuable information-indicating the current column, not the other columns of the same level.
Remove the tabs after one or tertiary tabs are available for access:

Tidy up again ...

Yes, this is a breadcrumbs navigation.
breadcrumbs are another form of information structure that responds to Web sites. because of the omission of other columns with the current column, the amount of information in the breadcrumbs is small.

Summarize the above deductive process: breadcrumbs can simplify the less important levels of multilayer tabs navigation.

Which layer do you want to omit?
As mentioned above, to simplify the tabs of the current page and the same sibling? Obviously not, if the design is so simple, then no designer.

Let's take a look at Yahoo:

Into the Autos column, only show the autos under the tabs, and no longer show the other columns with autos peers.
See autos time will not often think of switching to finance, games and other columns, then, simplify the first level, only show autos column subordinate to Yahoo! Under The level two menu under the Autos channel needs to be constantly switched, even if the current is "LATEST MODELS", the upper tabs "home,new cars ..." is still kept, not simplified.

Look at Amazon again:

The process of constantly looking for goods is the process of looking down, and has now reached the "bikes". "Sports & Outdoors›bikes & Scooters›bikes & accessories›" are the parents of the current page "bikes". By contrast, at present, users need to be further screened in "bikes" instead of returning to other products of the Sports&outdoors class, so the further classification under "bikes" should be fully displayed, and the previous layers of the parent, all the crumbs off.

From the above two examples, we can see:
can be omitted, but also need to omit, those who are currently less likely to choose, do not need to repeatedly switch ...
Not all the current page on the level of peace-level tabs to simplify , of course, is not all not simplified.

Here said the use of bread crumbs to simplify multi-layer tabs, to solve the problem from the site structure level too much, the best way to solve this problem is to let the information hierarchy itself simplified, a few levels.