Web Design theory: bread crumbs Design

Source: Internet
Author: User
Tags definition

Let's talk about the origin of bread crumbs:

Long, long ago, on the edge of the great Forest lived a poor woodcutter, his wife and two children with him. His son was named Hansel, and his daughter was named Gretel. Then the woodcutter's wife died, and he married a stepmother to the children. The stepmother planned to take two children to the depths of the forest and then run away while they were asleep. Hansel accidentally know the stepmother's plan, so secretly put a piece of bread hidden in the pocket.

On the way to the forest, Hansel quietly crushed his bread, and occasionally stopped to scatter crumbs on the road. The stepmother slipped away while the children were asleep, and Hansel and Gretel woke up in the dark. Hansel comforted his sister and said, "When the moon comes out, we can see the crumbs that I scatter on the ground, and it will surely point us to the way home." But when the moon rose, they could not find a crumb of bread on the ground, and they were all pecked out by the birds flitting about in the woods and fields.

This is the story of the bread crumbs described in Grimm's Fairy tales. Don't know from which day, Hansel Crumbs began to appear quietly in a site's navigation position, and then quickly spread all over the world, become today's well-known "breadcrumbs."

find out more about breadcrumbs. Definition of the breadcrumb navigation: Wikipedia on the definition of bread crumbs, the websites part of the explanation is this:

Crumbs usually appear horizontally at the top of the page and are generally located below the header or head of the page. They provide the user with a link to any previous page (which is also the path to the current page), which is usually the parent page of the page in the hierarchy.

Crumbs provide a quick way for users to go back to the home page or to the portal, most of which look like this: Home → category page → sub category page

The following is an excerpt from English:
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page which is the user navigated through in order to the "current page" for HIE Rarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the "user to follow" to the starting/entry point of a website. They may look something like this:
Home page→section page→subsection Page

second, the role of bread crumbs:

One is:Provide a multi-channel interactive way to facilitate users to jump to other pages; the second is:The information structure and collection mode of the information collection are presented from one side. three is: "bread crumbs "Information structure for the site's SEO also has great benefits, it can be more emphasis on site keywords, expand the scope of keywords, optimize the site's SEO."
bread crumbs contain three kinds:

1, the location of bread crumbs Path

One of the most common breadcrumbs in the path. The current page path has a unique location on the mall.

Location based (location-based) breadcrumbs Show users which level of page they are on the site. They are typically used for navigation scenarios that have multiple levels (typically more than two levels). In the following example (from SitePoint), the text link for each page indicates that it is a higher level than the text link to its right.

Example: http://www.sitepoint.com/article/introducing-joomla/

A indicates the current location within the site.

B provides shortcuts to previously visited pages (or Web sites) and other areas.

In essence, it is a linear representation of the structure of a Web site. The location breadcrumbs path on the web shows not the history of navigation, but a fixed location throughout the site. That is, no matter how the user arrives at the location page, the breadcrumb path is the same.


2, Route breadcrumbs

Route crumbs are dynamic. The current page path is generated based on the user's clicks.
Depending on how you arrive, the breadcrumb path on a particular page is different. Path (path-based) breadcrumb paths show the steps that users get to a specific page, showing the page that the user visited before reaching the current page.

Example:http://www.epicurious.com/ old version Qzone legacy path


3, the property of bread crumbs Path

The current page can be found through the N-way path.
Attribute breadcrumbs are a way of describing a page, not its location in the site, nor the path to access, but rather its location in a metadata scenario that is often subject-level.
A breadcrumb path based on an attribute (attribute-based) displays the characteristics of a particular page.

Example:
A, in Newegg, the breadcrumb path represents the feature content that is displayed on a particular page.
This page shows all the computer cases that have been manufactured by Lian Li and have microatx micro-tower factors.


B, Amazon, the bread crumbs Express is the item belongs to the category, and allows to click on the category name access to the superior category. The entire path provides the lowest level of the page. That is to say, there are a number of cases leading to the node page.

A lot of data comes from the web and other people's experiences.

A lot of data comes from the web and other people's experiences.

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.