Interactive mode Applications (2): Navigation

The purpose of the navigation is to make the hierarchy of the application clear in a structured manner, and to guide users to easily find and manage the information so that the user is not lost in the process of experiencing the product. To demonstrate the functionality of the program, we need to use navigation controls to logically group and layout its contents. In human-computer interaction, navigation is a reasonable arrangement of the content in the user interface of a particular system. Whether the software, Web pages or mobile devices, the success of the user interface is largely determined by the effectiveness of navigation, that is, the ability to effectively transfer information in the process of human-computer interaction. It can be said that a complete set of navigation system for the success of the application has a pivotal role. Web Design/Interactive Design

In order to better generalize the application mode of navigation in the interactive design, we classify according to the following structure:

Main Navigation

Usually appear in the fixed position of the interface (such as the top) and attract attention to organize the application's main content framework. Almost all software, Web pages, or mobile apps have a main navigation module, which we can also divide into several seed classes:

Horizontal navigation

Vertical navigation

Inverted L Navigation

Horizontal navigation

Horizontal distribution of some clickable icon or tab bar, the current selection highlight or have a clear visual distinction, in the page after the jump also basically maintain the same navigation mode.

Characteristics:

There are 6-8 categories based on the length of the text

No more than 3 levels down level

The Common Ribbon toolbar, for example, is a typical main navigation. Regardless of which file is open, Ribbon is displayed at the top of the screen, which clearly distinguishes the tool level above the currently selected Tab,ribbon to no more than 3 layers.

Vertical navigation

Navigation content will be displayed in a vertical way, generally on the left side of the screen, you can choose all hidden or partially hidden, also called the left navigation.

Characteristics:

The vertical navigation can display more content, easy to scroll the page up and down

You can leave the top visual focus to the main body of content

From left to right you can show more levels.

On the homepage of the Porsche Canada, you can find the details of the desired vehicle by category by vertical navigation.

Inverted L Navigation

Sometimes we can combine horizontal navigation and vertical navigation to show more content and layers, a layout that resembles an inverted letter l, and it's the birth of the inverted L navigation.

Characteristics:

Horizontal navigation display 1th level, vertical navigation display 2nd, 3 level, can also turn vertical navigation show 1th level, horizontal navigation display 2nd, 3 levels

When you have too many information items and need to display them in layers

Autodesk's website is an example of the inverted L navigation, the horizontal direction can choose different categories, while the vertical navigation in the expanded more detailed entries can be referred to.

Directory Navigation

There are a number of groups in the application of the content can be directly selected by the user, whether in the group selection or selection between groups and groups, we can use directory-style navigation, so that users can have a general grasp of the choice of the global content.

Characteristics

Multi-Group content distribution

Each group of content has different child content

Fast switch between group content or child content

Users can quickly locate the target content while understanding the global architecture

Taobao students know that the directory-style navigation on its homepage is the most powerful navigation tool for many shoppers who are looking for goods with a clear target.

Doormat Navigation

Door-Mat navigation, which is to divide all the information content into 2 layers at the same time, show the main category, the 1th layer, the 2nd layer show the main categories below the main children. It's a bit like catalog navigation, but it only shows some of the subkeys rather than all of them.

Characteristics:

3-4 main categories, users can quickly in the 1th layer of the category to make a choice

The unimportant subkeys are hidden, and you don't need to show all the subkeys, 4-8 primary subkeys.

Some websites often use this type of navigation mode, the latest and most popular article in the main category, by clicking on the Class (highlight part) can go to the bar to see all the articles.

Double Tab Navigation

When there are enough pages to be organized according to the structure, each page uses a tab to show that the user needs to know where they are in the navigation system and how to return to the main page, where we can split the tab into two layers to navigate.

Characteristics:

Double tab, next to tab under the first Level tab

The Double tab is visually connected, and an option in the first Level tab corresponds to all tab in the secondary layer.

The current location is visually different from the other options in the tab

Designsensory Use the Double tab to arrange its page content, we can see, check the corresponding tab, the main browsing area to display the corresponding content, so it is convenient to the different types of content of the pages quickly jump between.

Note: In some cases, the second tab can be hidden, saving a lot of page space.

Map Navigation

The user chooses the content according to the position on the map, after clicking the link can jump to the corresponding detailed information.

Characteristics:

Information organization and geographical location

Geographically related content corresponds to position one by one on the map

Provides links to facilitate more content expansion

Google Earth is a kind of map navigation, by clicking on the map of different azimuth icon, you can further obtain the details of the location information.

Split Navigation

When the information content is organized according to a certain structure, the user needs to expand different nodes to view the child nodes to determine the content, we can choose the split navigation.

Characteristics:

There are many levels of content, such as chapters of a book, usually 3-4 stories.

A quick switch between the last level of content, for example, can be directly from the fifth chapter fourth section sixth directly to the second chapter of the first section of the third paragraph

Bookmarks in PDF documents, the navigation bar on the left side of PowerPoint Outline,outlook, the directory of CHM help documents, and so on are all applications of this type of split navigation.

Icon Navigation

Use the icon + a small amount of text to describe the meaning of the navigation module, so that users understand the basic use at first glance. Today, with more and more attention to visual guidance, this pattern is a popular choice for many applications, without losing the vivid and misleading user.

Characteristics:

Icon + Small text label

The chart content is easy to understand, the instant without the text explanation also can be understood by the user, plus the text label may further confirm its use

This is the style of a designer's blog.

Other navigations

Navigation is the most important part of information design, since the layout of the application is no longer limited to the full mapping with the real world, the navigation bar design appears a lot of new methods, more concise, more direct and more eye-catching to become people's first choice. With the development of technology, some of the emerging navigation technology has gradually been used by some applications, these navigation methods are mainly in the form of change, most of the logical structure with the previous introduction of the difference is not, we can appropriately choose some new navigation mode for their own design to add charm.

Hand-painted style

Month navigation reflecting the true temperature

Quasi-true mapping

Color Block Navigation

The navigation based on Flash