The design of the left navigation tree of the website avoids the false implicit meaning

The left navigation tree uses a high frequency, whether it is a business-to-business or a Web site. When there are two or even three levels of classification in the navigation tree, they tend to become complex in design. Because it is not only possible to need a button or a symbol to control the contraction and expansion of the navigation tree, but also to consider the current selection of the classification status, has been browsing the classification status and the distinction between different levels of classification. In such a case, it is often possible for a designer to ignore these details, leading to false semantics.

First look at the contraction and expansion of the navigation tree, currently in our project can often see the following left image of the design, the contraction and expansion of the icon is placed behind the category name, but the design is often passed to the user with the wrong signal, and they will mistakenly assume that it is an external link, as shown in the following map of CNN's Navigation tab.

In order to take care of more users ' understanding and usage habits, I looked for the design case of the left navigation tree in several mainstream PC operating systems. First is Windows XP, the left side of the navigation contraction and expansion of the adoption of the Plus and minus method, icon placed on the left of the category name. followed by the Mac OS, the contraction and expansion of the left navigation using a small triangular representation, triangular to the left to indicate the classification of the contraction state, triangular downward representation of the classification expansion state. Win7 's left navigation is similar to that of Mac OS, except that the small triangle in which the classification is expanded is diagonally downward. Finally, Google documents the left side of the design case, but the small triangular style has changed, the rest of the state and the Mac OS consistent.

Summary of the above case is not difficult to see, no matter what icon to express the expansion and contraction of the symbol, generally to put on the left of the classification name is appropriate, put on the right side will let users mistakenly think is outside the chain. The second plus minus sign and the small triangle are commonly used icon forms. Finally, the classification name in the alignment of the indentation processing can be a good representation of the hierarchical relationship between the classification, it is suggested that the design of the time to use this approach to show the hierarchical relationship between different categories.

In addition to the operating system, some of the mainstream web sites can now see similar left-side navigation design. The first picture below is main clothing gap, although the left side of the navigation can not be contracted and expanded, but it through the use of gray and classification name in front of the circular icon symbol, it is obvious that the current selected classification. It is worth mentioning that, on the alignment of the classification name, it also uses indentation to distinguish different levels of classification. Then Wal-Mart, the currently selected category is marked with eye-catching colors, and the same method of indenting is used to distinguish different levels of classification. Note that in the third picture below, the arrow on the up does not mean that you can expand or shrink the navigation tree, but instead click to jump directly to the category of pages, equivalent to an internal link. Finally, the famous Amazon, color, alignment, and icon are used in the navigation tree on the left, but here the icon (pointing to the small arrow on the left) and Wal-Mart, representing an internal link, rather than shrinking and expanding the navigation tree button.

So when we design the left navigation tree contraction and expansion button, try to avoid pointing to the top and left arrows or triangles, and to use the more common icon. If the left navigation tree cannot shrink or expand (be pinned to death), then you can use an icon like Amazon to indicate that these categories are an internal link that can be clicked.

Author: jjacy

Article source: im-ux.com/archives/365 reprint Please indicate the source link.