Interactive design of direct elevator-navigation

Super Information class site navigation bar like in the drugstore drawer, a word row open momentum, respectively, caves.

Chinese preferences: More! Big！ All！ It's best to spread all the momentum. From the disappointing ' s wave ' network for many years did not change the home page navigation mode is generally visible. At this point, compared to browse the same type of large-scale news information sites, found in the East/west, the interface feel really different.

Today only said navigation, compared to the news class site:

(Entertainment class, design class, personal site navigation forms, logic complex, temporarily too late to spread)

Yahoo news/bbc news/cnn/abc news/china daily/cctv news/the Japan times/the 40.html ">korea times/Tencent News/Sina

First of all focus on the front page horizontal leading navigation:

(Conventional longitudinal navigation is usually in line with horizontal pilot, and in business type, large information class site home page alone frequency is not high, usually in the secondary page appears, and must be a large amount of information content, classification cumbersome site.) ）

The basic navigation bar mode is visible as follows:

1. For information unification, inductive site, usually use simple mode:

2. For rich secondary information, the following two modes are usually used:

A. Mouse hover dropdown

B. Tab expansion

A-type navigation convenient and quick Preview, B-type navigation directly expand the secondary information, there are sites to merge A/b mode.

3. Special case, bowls type, all information is paved, such as S wave:

(Not so much a navigation as an inductive label)

Navigation operability:

A perfect navigation, the most basic and most important is anywhere, quickly guide users to the relevant pages, and can return in time, easy to jump to other pages.

Interestingly, it's easy to go, but when you find it, the road is different.

For example: The user is likely to be from the home any one point of interest, mistakenly entered the details page, go easy, 1 steps to ~! But when you return from the Details page to another module or want to go to another branch category page, you rely on navigation.

In order to provide the necessary guidance, when the user into the deep enough detail page, various indexes, bread crumbs are with the navigation bar came into being.

Do a reverse test to see which navigation matching settings are more convenient.

Test content: From Category A details page "1" Go to Class B details page "2":

Test Site:

Korea Times

Http://www.koreatimes.co.kr/www/news/nation/2011/10/115_97248.html

BBC News

http://www.bbc.co.uk/news/uk-england-leeds-15438299

Yahoo News

Http://news.yahoo.com

The Daily

Http://www.chinadaily.com.cn/china/2011-10/25/content_13968775.htm

Navigation Companion Type:

Korea Times

Main navigation + breadcrumbs + Left longitudinal index navigation

BBC News

Main navigation (expand tab)

Yahoo News and the Daily

Main navigation (expand Tab + mouse hang stop pull list)

Operation：

Korea Times:

The first way: from the main navigation back-into other modules B―― Branch page-Details page

The second way: from the left convenient index directly to other modules B―― Branch page-Details page

(bread crumbs corresponding to the same directory content switching more convenient, but with the left index navigation together, the functionality is not outstanding.) ）

BBC News:

Select other modules from the main navigation tab b―― to other Module branch pages-Details page

Yahoo News and the Daily

Mouse on the first floor of the main navigation other modules b―― expand Drop-down Click into other Modules Branch page-Details page

Test experience:

Using the convenience of Yahoo News and the most convenient, Korea times the second is based on left-side longitudinal navigation-assisted operation is the fastest. Korea times more functions, and style is not uniform, classification is too detailed, but in the use of feeling a little unprepared, operation will pause hesitates. BBC News did not consolidate hover to see the effects of other module options, as Yahoo News and the "agile", but the sensory BBC News was more agile.

So, if you can use a control to solve a very beautiful problem, why do you have to roll out each set of positions?! The function module concentrates, the operation behavior is more agile, the use feels more comfortable, reduces the operation the repetitive ponder, the pause point is more promising.

In fact, a comfortable navigation, in addition to the induction clear, easy to operate, at first glance it is also very important to see

It is a good habit to put all the details in front of others in one breath. Some navigation although powerful, but the content of a large, functional a high-level, look at the annoying. This time, you need

Solution Selection Phobia:

Take the BBC as an example, its homepage navigation as the first page of the headline display information, simple direct, only large modules:

When you click on the module you're interested in, for example, go to a separate news page:

Navigation expands, the information is very much larger, and the navigation of the page is also listed.

Feelings: If the direct access to the information page, may not be able to start, it is the first step of the Simple module guide, stripped of the difficulty of choice.

It's not a particularly fitting example, but it can be a point of view. The initial entry to see the navigation is actually the simplest "one" word navigation, with a maximum of mouse on the dropdown function, but still a large module to choose a range:

When you click on any of the modules or use drop down to reach the secondary page, the navigation finally unfolds:

This is a quick index, combined with its hover effect, and navigation is powerful:

Last nonsense to say back again, site navigation in the end with that way? Or get a transformer what are included, to see the information classification of the site, but also to start from the classification to consider the entire site to spread out how many points? Navigation can lead to the line, small head can not cover the big hat, and vice versa.

Source: http://ued.ctrip.com/blog/?p=2561