Returning to China happened to coincide with the UXday event hosted by Baidu User Experience Department. The topic of our group discussion was taboos when using tabs.
The topic we discussed focused on one point: how to deal with massive tabs?
First, let’s review the history of Tab. The tab here is a general term for a type of interactive elements, including navigation in web design and use in desktop software such as browsers. Interactive elements called tabs generally have the following two characteristics:
It has both action and status meanings. One reason why tabs are popular is that they are easy to operate and at the same time allow users to clearly know where they are currently (tab)
From an information architecture perspective, the content between tabs generally does not overlap. And the relationship between tabs should be equal and there should be no mutual affiliation.
So in a broad sense, most navigation menus can actually be boiled down to tabs.
The use of tabs in web design is generally considered to be pioneered by Amazon. I believe many of you have read LukeW's classic review article: The History of Amazon's Tab Navigation (for the Chinese version, please click here). From this article, we can see that Amazon's navigation has evolved from having only two tabs: Book and Music to having two rows of tabs at its peak in 2000. Obviously, when the number of tabs increases, the tab interaction method encounters some difficulties.
Another example is the Settings dialog box in Word 2003. As shown in the figure below, when there are too many labels and the display space is limited, Microsoft has to arrange the labels in two rows. A big problem with this is, when the upper row of labels is selected, how to express the relationship between the selected state and the current content page?
Microsoft's approach has been criticized. In the picture above, when the user clicks on the upper row of labels, the upper row automatically swaps with the lower row to maintain a close relationship between the labels and the content page. However, this approach makes the position of the label very inconsistent. I believe many people have the same confusing experience.
In some other software, such as Firefox 3 (as shown below), when clicking on the upper row label, the label display is only changed to the selected state. The advantage of this is that the consistency of the label position is maintained, but some positional indications are lost. Function.
So if multiple rows of labels are not a good idea, how do you deal with a lot of them?
An obvious idea is to change the label arrangement from the usual horizontal to vertical arrangement. Generally this arrangement is on the left side of the view, and may be in the form of icons or text.
However, there are some problems with this approach. First of all, if the label name is very long, it will occupy a lot of valuable left space, and this space happens to be the focus of the user's attention on the screen and is a battleground for military strategists. Some websites place text vertically. This approach, especially for English websites, is a disaster for readability. If placed on the right side, it may interfere with the scroll bar, and it is not easy for users to notice. Secondly, when there are not many tags (considering the variable number of tags), it is also a headache to put what content under the tags.
One idea is that if there is some structure between tags, then tags can be grouped. Then add a navigation level. Microsoft's OneNote has reached the pinnacle in this regard. It divides information into three levels: notebook, section, and page. Each level is represented by tab navigation. The result is that the top, left and right sides of the page are full of Labels... Microsoft is very good at handling the three-layer label navigation very well using gestalt (division on the left), color marking (color for section and white for page) and other techniques.
