Example of how breadcrumbs can help you simplify the navigation structure of your site

Source: Internet
Author: User
Keywords Navigation Chip guide

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

Navigation is one of the most widely used foundations of web products, and its main function is to guide visitors to understand the content structure of the site and then find the target information. As one of the basic components, navigation looks simple, but it is one of the most complex and tedious processes in page design. Because as stationmaster we want the website structure to be more concise and clear, more quickly provides the information for our user. But the problem arises, simplifying the navigation bar, visitors may not be able to quickly understand the site structure and their location, create confusion, complex, navigation bloated, peaks, neither beautiful nor easy to use. So how do we deal with it? We can use breadcrumbs to make navigation easier and simplify our navigation structure.

Breadcrumbs are usually placed below the main navigation at the top of the page, above the body. They provide visitors with a link to any previous page, usually the parent page of the page in the hierarchical architecture of the site. In short, breadcrumbs provide a quick way for visitors to backtrack to the site's home page or to the portal.

Generally our common portals, such as Sina, design the overall structure is generally home > Channel page > Feature page >....> sub topic > content page. If we want to watch NBA video live on a sports portal, let's look at the following navigation structure.

  

The above picture we see if the page information to the level of all show in front of the user, will form a bloated situation, not to say that visitors can not quickly find the information you want, such a large number of information on the page occupies a large space, has been "distracting." But if we extract the navigation content that we care about, as shown in the following illustration:

  

Flatten it again, as shown in the following figure

  

This clear structure will greatly enhance the user friendly experience of our page. At the same time we take a look at several large portal site breadcrumbs navigation structure, these structural site navigation more lightweight. As shown in the following figure

  

Of course, not all navigation can be simplified by using breadcrumbs. The use of breadcrumbs should conform to the user's linear thinking-oriented operation logic. For example, if our users want to watch the NBA live video, then our users may not care about entertainment gossip news, but also may not pay attention to football or table tennis have any news events, then the linear navigation of bread crumbs can be very good to meet the needs of users. Or because of the limitations of page space or access to the device, we are unable to provide more detailed navigation for visitors and adopt a linear simplified navigation approach.

This article by fetal education instrument http://www.taijiaoyi.net/Original, A5 starting, reprint please keep address.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.