Navigation design of Mobile website

Navigation is one of the most important parts of Internet website, it involves the information architecture, page layout and user interaction behavior of the product. The advantages and disadvantages of a website user experience are often closely related to the advantages and disadvantages of navigation.

With the development of mobile Internet, more and more Web sites are transplanted to mobile phones in the form of mobile websites. In the process of website transplant, what changes and design points of the redesign of navigation, this article tries to make some research.

The purpose of the navigation

Before we study the navigation, we might as well start with the purpose of navigation. If you compare a site to a building, navigation can be regarded as a guidance system in a building. The purpose of navigation is summed up mainly in the following aspects:

1. Guide the user to move and browse through the pages of the website, and provide the path of obtaining information. Global navigation, local navigation and so on for the user to browse the relevant pages to provide guidance to facilitate the user to find the request.

2. Clarify the relationship between the content of the site, so that users understand the site panorama. Most common in the global navigation and site information navigation, they show the entire site directory information, users can quickly understand the structure of the site, the site has the overall grasp.

3. Locate the user's location in the site. This feature is common in breadcrumbs and related navigation, and it helps users to identify the relationship between the current page and the overall content of the site, so that users understand the current page and other content of the site's links and differences.

The reason for the change of navigation

The reason for navigation changes from PC end to mobile end is the difference between objects (hardware and software differences), landscape (usage scenarios and modes of operation), things (user needs and use purposes). These factors are intertwined and have a significant impact on the navigation design of mobile terminals.

This paper attempts to illustrate the changes of PC End-to-end navigation design from the aspects of type, content, style and so on:

I. Changes in common navigation types

Web navigation is divided into different dimensions. Web navigation can be divided into three categories according to the scope of action: Structural navigation, relevance navigation and utility navigation. According to the Web navigation design, the relationships of the three can be described as follows:

According to the external form of the different, Web navigation can usually be divided into top horizontal navigation, side bar navigation, tab navigation, breadcrumbs navigation, page anchor navigation and many other forms.

As a result of mobile terminal characteristics, mobile Web site can be used by a lot less than the PC side, mainly vertical navigation, classification link Navigation, tab navigation, related navigation and so on.

The following is a general introduction to mobile Web Navigation forms:

Vertical navigation

Because mobile devices are more suitable for portrait browsing, the top horizontal navigation and sidebar navigation on the PC site usually turns to vertical navigation at the mobile end. For example, the following diagram of Dell and HP's mobile Web site design, using this transformation, to better complete the migration of navigation.

Category link Navigation

It is common to set the category link navigation on the homepage and place the main module entrance of the website at the top of the homepage. If too many categories can be added to the "more" portal, all categories will be displayed in more pages. Icon Navigation is the derivation of text link navigation, it is more suitable for touch screen mobile phone, convenient for users to operate with their fingers.

TAB TAB Navigation

High-end models that support the HTML5 feature typically implement local refresh of the page. Through the tab application, navigation can display more content in a limited page space. For example, the top of MySpace navigation design: three main navigation below each has 3-4 two level navigation, showing the main features of the site.

Related navigation

Related navigation generally appears in the main page, recommended with the current page related content, to provide users with similar content, improve user stickiness. For example, Baidu knows and BBC News on the Reading Body page provides recommendations related to the current content.

Inside-page Anchor point navigation

In-page anchor navigation is one of the unique navigation methods for mobile terminals, which enables users to quickly reach the top, bottom and related sections of the page. For example, the BBC has a quick link top at the bottom, while Google News provides anchor navigation for fast jumps between different plates.

The strategy of bread crumbs navigation processing

As an effective navigation strategy, breadcrumbs are used more frequently in mobile terminals, but because the mobile side screen width is limited, the usual processing strategy is: to retain the key path, such as home, main columns, key sections, etc. if the current page title is too long, it can be expressed in "this article" or "body" on the breadcrumbs. Try to control the crumbs to be displayed in one line.

Ii. Organization, reduction and concealment of navigation content

Organization and reduction

In the process of navigation redesign, navigation information must be reduced and re organized. The criteria for screening are often:

1 The intensity of the user's needs can be judged by PV,UV and other data.

2) with the mobile use of the scene of the degree of fit. such as photography, voice and other functions of the entrance.

3 User Operation convenience degree.

The 3rd is often easy to ignore, Amazon Mobile version on the basis of the PC version of the navigation content is merged and cut, control the amount of information to make it more suitable for users in the mobile terminal browsing. For example, the item of electrical & computer is broken down into two items (electrical, computer office) and the number of subprojects is reduced from 17 to 7 items. To some extent, the principle of moving the magic number 7 is also met.

Hiding the navigation content

In the case of navigation content importance Briber, the common way is to show the relatively important content, and put other content into "more", users can click "More" on the current page to expand or jump to more pages.

Iii. changes in navigation styles

Using System characteristics to deform

The most common forms of deformation are:

1) Calling system controls

By combining the control characteristics of mobile terminals, the design of navigation can be completed in a small size range. As shown on the CNET Mobile Web site, the search box in the navigation is replaced by the search button, and the level two project uses the Drop-down selector to take full advantage of the mobile-end control features.

2) using System interaction characteristics

Sevnthsin's homepage navigation design cleverly applied the touch screen handset can drag element characteristic. The user drags the corresponding icon to the center dot position to complete the navigation and enter the site.

Changes in dynamic effects

The Web dynamic navigation menu is also called the surfaced menu (Fly-out menu) or pop-up menu (pop-up), usually when you hover or click the navigation Options. Dynamic menus are generally spread horizontally or vertically on a PC.

On the mobile end:

1 Low-end machine, does not support folding expansion effect, the original Web dynamic menu is usually processed as a list form. Move through the key control cursor to select each subproject gradually.

2 high-end machine, processing into accordion folding (accordion) or level directory form, click to expand the level two project.

Accordion Folding Advantages: no jump page; disadvantage: Secondary display content is limited;

The advantages of hierarchical catalog form: can show more content; disadvantage: Need to go to the next level page.

Amazon's navigation in the image below uses the current folding expansion, while ESPN uses a hierarchical approach.

Iv. Summary

In the transfer process of PC end to mobile end, the navigation design of page product should cut down, hide and organize the original navigation, especially to grasp the user's essential demand, combine the product use scene, the user demand, the software and hardware characteristic and so on to design the navigation.

References: Web navigation design James Kalbach/Li Xilin/Electronic Industry publishing house

Article Source: Baidu Mux