Website design: Web navigation design two or three things

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Navigation plays a role in the web answer user "Who am I?" Where do I come from? " The role where I go. " Good navigation is the main cornerstone of a website. When you start to design a website or a Web page, it is often the first challenge that designers face.

01 Information Architecture of navigation design

Information architecture determines the nature of navigation, before the design of the information structure to clear the content, in order to maximize the role of navigation comb the structure of the Web site, effective transfer of information functions. How many hierarchical relationships are there in a Web page structure? Is there an upper and lower level relationship? Are the relationships between the various types of labels a side-by-side relationship or are they related? Are there any items in each child that can be merged? To avoid the simple logic of the relationship, even according to the business relationship to the page navigation subdivision to level 3 or even level 4 or produce some and user cognition does not match the category of information. Each additional level of navigation to add a cognitive dimension, each additional level of the entire navigation system to increase the complexity of several times, not only the user's operation will multiply, to the maintenance of the Web page later bring great costs. The following two icons make it clear that the different placement of the same number of pages brings different experiences to the user.

In the web interaction design There is a "3 clicks" principle, the user can not find the desired information after 3 clicks or complete a function, will choose to give up. So the most basic thing for navigation is to let users know what's on the page and know where their goals are. The breadth and depth of the navigation design show that, in general, breadth is better than depth. Choosing between different levels of the deep structure is more likely to lose direction and may even get lost. But also do not spread in the breadth of too wide, any time to show too much content will scare users, so that they are forced to suffer from "choice syndrome."

In order to better understand the user's cognition or even say that in the face of the designer's needs, such as the creation and improvement of navigation, a common method is card classification. Card classification of the way is very simple, first of all to prepare some of the same size of the blank card, the information on different cards, so that participants to classify themselves, can also have appropriate explanatory guidance. The number of each test is best between 2 and 4, the number of people is too small to generate discussion between users, too many will make the discussion confusing, difficult to control. This is a common in the Web site or other planning in the early days of a test method to understand the true user habits of the classification of information, to find the cognitive differences between, as a basis for adjusting the structure.

02 Interactive style of navigation design

The most important function of Web navigation is to display the content information of the website to the user in a friendly way. After you have determined the information architecture for your Web site, you should take the appropriate navigation style as needed. Not regardless of 3,721, have a tab-type navigation, feel that there is no beam-like navigation are embarrassed to say that they are doing web pages. First we understand some of the most common forms of navigation:

1. Step navigation usually consists of text labels and arrows, along with links to backwards. Suitable for interlocking page processes, such as wizards, payments, online reading, etc., to provide access to one page after another.

(illustrated by: Google.com registration page)

2. Paging Navigation (paging navigation) often appears on the search page, and the number of results that can be displayed at a time is usually limited, and the result of exceeding the limit will be displayed on the new page. The simplest pager is a page-numbering distribution navigation.

(pictured here: Ali Baba)

3. Breadcrumbs (Breadcrumb trail) show the route of the user visiting the site, consisting of a large string of elements and nodes. Each node is connected to a previously visited page or parent topic, separated by symbols, usually greater-than (>), colon (:), or Vertical (|).

(illustrated by: apple.com)

4. Tree-like navigation (navigation) allows access to hierarchies. Small icons often contain plus and minus or small arrows to expand and close subordinate nodes.

5. Site Map provides a quick overview of the top and bottom of the site. For sites with a large number of content and a wide range of user groups. So it should be simpler and easier to scan. The labels should match the headings in the page. When building a site map, you need to consider its granularity, in general, only show the structure of the site two to three levels, provide links to the page. Footer Site Map, is the way of today's large and medium-sized sites, the site map part of the display at the bottom of the page, including a link to the full map.

(illustrated by: Flickr.com)

6.Tab Navigation (tabbed navigation) is the equivalent of navigation bar +tab. The simplest form of the navigation bar is to link the hyperlinks into one line, sometimes separated by a vertical bar. tab navigation combines the tab control with the navigation bar, which makes the content of the site structured and multiple.

(illustrated by: motorola.com)

Amazon.com is probably the first large E-commerce site to use tab navigation, and Amazon currently uses a vertical menu + dynamic menu.

(Illustrated by: Amazon.com 1998)

7. The vertical menu (Vertical menu) is usually placed on the left or right column of the Web site link. Vertical menus are more flexible than horizontal navigation, easy to scale down, and allow longer labels.

(illustrated by: apple.com)

8. Dynamic menus is also called the surfaced menu, Pull-down menu or pop-up menu. The user must interact with it to display the menu. The most common interaction is a mouse hover or click.

(illustrated by: Amazon.com)

9. Drop-down box Navigation (Drop-down menus) takes advantage of the Pull-down menu feature to bring the user to a new page when one or more options are selected.

(illustrated by: dell.com)

10. The label cloud (tag clouds) lists the links in alphabetical order and determines the font size and color according to the label popularity. The designer of the tag cloud is the interactive designer Stewart Butterfield. The first use of the tag cloud is Flickr.

(illustrated by: Flickr.com)

03 Visual design of navigation design

Apple is often the vane of the design world, and their every visual update or iteration triggers a scramble to imitate the Internet. Here, it collects the key screenshots of Apple's visual-level update since 1997, and does not look at the iterations of the navigation and website's visual system from the changes in the Apple.com calendar year.

Apple 1997:

From the screenshot below, it is difficult to discern from the visual level that it came from Apple. At that time, the interface is mainly composed of text chain, navigation only a simple vertical menu.

Apple 1998:

The original layout of the Apple Web site style. Simple and clear visual style, up and down structure, upper large product banner poster + bottom three column form of product display.

Apple 2000:

The first tab-type navigation with the top fixed. There are several notable features:

1 apple red logo, marked homepage.

2 Horizontal tab-level two navigation

3 white glass texture navigation visual style, this glass texture is popular in the web for a long time.

Apple 2001:

The visual and interactive forms of navigation have not changed much, but the red logo is replaced with blue. And the continuation of the white glass species feel the entire site interface and controls.

You will find that, including the search button and other controls have done fillet glass texture processing, and the map of the frame also does the corresponding fillet processing.

PS, the years of the 1000 song installed ...

Apple 2002

Navigation system logo color replaced by gray, glass texture gradient also made a lot of adjustments. Also noteworthy is the isync panel metal wiredrawing Texture.

Apple 2004:

The visual design of the navigation system still remains fine-tuned. The whole still hasn't changed much.

Apple 2007:

2007 of the navigation is completely changed. Using the gray system of texture performance. The delicate texture of Apple's logo replaces the original monochrome processing technique. Removed tab level two navigation.

The homepage uses the full screen banner to highlight introduces the new product. Apple's copywriting is also a classic.

Apple 2010:

Apple 2011:

Apple 2012:

Throughout the 2010-2012 navigation, the navigation structure is divided into the dimensions of the product. With the name of the product itself, users to enter the site can be directly into the product they want to know.

From the size, to the name of the label, even the order does not change. Major changes in the visual dimensions of navigation and search boxes.

Visually: 1 The body navigates from a single gray gradient to a dark gray texture gradient to a darker gray texture gradient.

2 The opposite is the Apple logo texture all the way from a rich texture to a simple gray gradient.

3 Label font and search icon anti-white processing, gradually and dark background to pull the level.

Search box: 1 The Search box and navigation from the visual level of the combination of the overall design. No more simple white-bottomed processing.

2) Only keep search icon, remove "search"

3 tab Width increase, compress search box width. After the mouse click, the search box automatically expands to distinguish between the search box default and the use status of the input.

Every time you use apple.com from the perspective of a common user, there is a quick and efficient feeling that the first time you can feel what it wants to tell you, and what changes it has recently made just what you want to know. It is not difficult to find something in memory, search is the last sharp weapon. Each color, each pixel of the control, each copy of the wonderful is worth the design of thin taste.

The above is I in the design navigation some blind spots and found accumulation. In the integrity of China's revised project is the most discussed is navigation, from the structure to the information level, from interactive form to visual style. Discussion to the end of the concept of navigation has been blurred, often in each of the discussion ending ask themselves: What is the navigation? In the process of doing design, the basic concept of interactive control should often be traced to the source, it will make itself more clear. Here just put me in the process of design navigation encountered doubts and ideas to summarize, I hope for everyone in the design of navigation with a little help.

The key to a good navigation is whether you can solve the problem. Avoid "meditation" navigation to make your navigation more solid, clearer and more meaningful.

Resources：

1. Some pictures and texts refer to "Web navigation design" Author: James Kalbach translator: Li Xi

2. Card Classification-Wikipedia

Browse-->blog Link http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/

Source: http://www.aliued.cn