Traditional navigation style undertakes laborious large website navigation design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Original Author: Paul Boag

Introduction

For most Web sites, navigation is not a challenge. A primary navigation plus a level two navigation support is usually sufficient.

For most Web sites, navigation is not a challenge. A primary navigation plus a level two navigation support is usually sufficient.

Typically, level two navigation displays the parent, brother, and current submenu. Changxian's main navigation bar shows the topmost menu, allowing users to switch between menus.

However, there are a number of Web sites that make this traditional navigation style bear some difficulty. This is the big website I want to mention.

Defining a large Web site

A large web site is owned by a typical large organization that combines integrated services and products. This organization also usually serves a variety of users.

Organizations with large web sites, such as the BBC, such as the corporate type of Microsoft, a variety of companies, government departments, higher education and the activities of the charitable organizations, such as the World Wide Fund for Nature.

These sites:

Huge

Many levels and deep

Consists of several small web sites and channels

Cater to many audiences

Many entrances

This scale-level complex site navigation is challenging.

Navigation challenges on large Web sites

In our company, we spend a lot of work on such large websites, especially when we want to use traditional navigation.

Traditional navigation cannot afford deep level

Traditional navigation becomes more difficult with the depth of the site. Traditional navigation is easy to cope with three of layers; Even if you expand to the pages of many of the real estate site navigation, they will be more committed to navigating more than content (large site page too much to make the problem worse), or more top-level pages no longer appear in the navigation.

In the latter case, if the user is in the deep level page of the site, they will not be able to understand the upper and the subordinate relationship, because cannot see the current page in the entire website place.

Although the traditional navigation processing combined with bread crumbs can expand to adapt to integrated Web sites, but when the real estate site to do so, the cost is rising.

Traditional navigation cannot host multiple portals

If a user passes through a small web site or a menu page of a Web site, the traditional way of navigating will be confusing to the user.

Take an example of a student who is considering a university research project. The person may be more interested in the details of the faculties than the whole school. So it's easy to get into the site's department page, not the school's homepage.

Another example is that single moms want to know about baby benefits. They are more like a secondary channel to direct welfare than a government homepage. In this case, the user's focus is on the current content. (such as: topic page or Child welfare page). They are not immediately interested in the whole site.

Unfortunately, the traditional first-level, two-level navigation attempts to get users to understand the entire site environment, whether they want it or not.

On the university page, the "Research" menu refers to the study of the university or only to the institute. What happens when two identical menus appear and point to different places?

Worse, the current context can actually affect the user's understanding of the navigation content. For example, a link to the "About Us" menu, does the student union think it's about the college or the whole school? In some extreme cases, you can even find navigation of the same name for both current content and a wider body (like this "about Us").

Navigating Solutions

Like all things, there is no perfect solution. But there are still some programs that are suitable for smaller sites, which count as a step towards better navigation. The first option is the most radical.

Completely remove the navigation

It seemed like 06 when I first heard about this approach in Lars's speech about breaking away from traditional navigation. He refused to give users the magnificent navigation, instead of allowing users to find their own path through the site.

To use this approach, each page becomes a separate document and the appropriate keyword data is labeled. Users can then find navigation between the pages through associated searches and tags. If the keyword data is already associated with each page, the traction link to establish the document relationship will also be feasible.

There are several benefits to this approach:

Support Unlimited website;

Very suitable for users from a deep link to reach;

It allows the relationship between pages more flexible and can easily accommodate the page additions and deletions changes;

Of course, this method also has its own limitations. The independent channel of the website should still have a landing page (such as: section.bbc.com), the business will also be plagued with no specific station to operate. More importantly, this approach relies heavily on document tagging and powerful search capabilities, both of which will be difficult to implement in large Web sites.

That is to say, it is only a choice not to shoot bricks too quickly.

Split the site into multiple stations

Another option is to split this large web site into smaller, more manageable stations. This is the approach adopted by the BBC.

Instead of saving up, the BBC broke and dispersed into several secondary stations, such as news, sports, television and radio. Each site has independent navigation, thus avoiding the navigation of large Web sites.

The BBC has a consistent approach to top navigation in the interface, avoiding the disconnect between users when switching between subordinate sites.

The BBC has broken down into several small stations to avoid a bloated site, while navigation and design languages remain consistent.

Although the BBC's sub stations are diverse, they use the same dominant navigation, with consistent design languages such as typography, layout, and modules. This language is consistent with the BBC Global Experience language definition to ensure that a solid user experience is flexible enough to accommodate different audiences and themes.

It's a good line. Make each subordinate station too different, the user is confused by the changes in the UI. Let them too similar, users will give up to find that the original site is not a navigation structure.

Breadcrumbs Navigation

The third is the scheme adopted by gov.uk. He abandoned the reservation of navigation and linked the contents of the page to the child content. Then use breadcrumbs to help users identify their navigation levels and return to superior trees when needed.

Gov.uk rely almost exclusively on bread crumbs to navigate.

There are many advantages to doing so. First, it minimizes the footprint of the navigation, while giving the child content more description. This is the simplest, cleaner, and easiest way to understand this level.

It's also good to migrate to mobile devices (40% of gov.uk traffic).

The outstanding crumbs give the user a clearer picture of what's going on in the page, and it's obvious what to do next. Most importantly, show me more emphasis than navigation.

However, this approach also has its own flaws

Relying entirely on breadcrumbs and page links, users have only this information about their current location. They will not be able to perceive the current page's peers and the entire appearance of the site. (for example, they don't know the top-level menu content)

This will not be a problem if the user simply wants to accomplish a specific task, and the site also meets the needs of the task by associating all the content in the same location. However, when users are doing a comprehensive research model or when the task-related content has been spread across multiple pages, this approach is going to crash.

The crash is due to breadcrumbs that need to be driven up and down in the user's menu hierarchy. There's no way to jump between menus.

Fortunately, there is also a hybrid scheme, using breadcrumbs to navigate the navigation tool, supplemented by traditional navigation enhancements.

I prefer the scheme

The program is inspired by the BBC sports station before the gel.

The BBC vertically folds the traditional bread crumbs rather than horizontally spreading them. At the end of each breadcrumbs list, the current page's subpages are also displayed. When you reach the bottom of the tree, the navigation continues to display the sibling content of the current page instead of the child content.

The old BBC sports station uses vertical crumbs as the main navigational tool. When the user enters a soccer or all other sports menu. Photo by:i.e. The siblings

This approach focuses all navigation in one place, giving the user a clear sense of the current position, reducing the space footprint of the navigation. But the problem is the same as gov.uk.

When I was working at Brighton University, we proposed the BBC sports station program, but attached an important item. We recommend Changxian the top navigation bar. Although this adds more navigation to this page, it gives users an overview of the structure of the site. This allows users who need a lot of information (for example, a prospective student to study the course and stay informed) to quickly jump between these menus.

In many cases, this is enough to create a simple and powerful user experience. However, this does not solve the need to see a sibling page.

Show the same level with breadcrumbs

So far, I have considered two feasible solutions to this problem.

A hypothesis that runs at a level that is usually associated with one another; For example, they are part of the same story. On this basis, simply attaching "next" and "prev" buttons (such as those found on many blogs) may be sufficient to form a solution. Users will therefore be able to switch between their peers with just one click.

Another alternative is to have each layer of breadcrumbs navigate out of the menu, exposing the sibling of that option. This will allow users to jump from any level and across layers of the site, and may also discard the need for separate dominant navigation strips.

By adding a pop-up menu to the vertical breadcrumbs, allowing users to quickly enter any level of the site.

Whether you're using vertical or traditional transverse breadcrumbs, this can make.

I have not tested this method, I have to consider the mobile device.

You can give me more ideas.

As you can see, the integrated Web site navigation problem is tricky and does not seem like a clear solution. One of the main reasons for me to write this article is to open up the discussion on this topic and hope to throw bricks to draw more alternatives.

It is for this reason that I really appreciate you giving some ideas in the comments, or the alternative navigation cases you find.