bread crumbs Web Navigation Design Reference example and the best solution

On the website that there are many pages, breadcrumb navigation can greatly improve the user's way of finding their own direction, site visitors need to get a higher level of web pages, and improve the findability section of the site and pages. They are also effective in helping to point out the visual position of the user at the site level, making it a huge background for the target page.

On websites so have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way nd. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a Highe R-level page, and they improve the findability of website sections and pages. They are also a effective visual aid that indicates the location of the user within the website ' s hierarchy, making it a Great source of contextual information for landing pages.

What is a breadcrumb?

A "breadcrumb" (or "breadcrumb trail") is a type of secondary navigation scheme that reveals the user ' s location In a website or WEB application. The term comes from the Hansel and Gretel fairy tale on which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs at Real-world applications offer users a way to trace the path back to their original L Anding Point.

Breadcrumbs on delicious.com

You can usually find breadcrumbs in websites this have a large amount of content organized in a hierarchical manner. You also the "them in WEB applications" have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the "greater than" symbol (>); The symbol indicates the level of this page relative to the page links beside it.

In this article, we'll explore the use of breadcrumbs on websites and discuss some best practices for applying Trails to your own website.

When Should your use Breadcrumbs?

Use breadcrumb navigation for large websites and websites this have hierarchically pages. An excellent scenario was e-commerce websites, in which a large variety of the products are grouped into logical categories.

You are shouldn ' t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation are to construct a site map or a diagram rep resenting the website's navigation architecture, and then analyze, whether breadcrumbs would improve the user ' s ability to Navigate within and between categories.

Breadcrumb navigation should is regarded as an extra feature and shouldn ' t replace effective primary navigation menus. It ' s a convenience feature; A secondary navigation scheme that allows the users to establish where they are; And a alternative way to navigate around your website.

Types of Breadcrumbs

There are three main types of breadcrumbs.

Location-based
location-based breadcrumbs Show the user where they are in the website ' s hierarchy. They are typically used for navigation schemes this have multiple levels (usually more than two). In the example below (from SitePoint), the all text link is for a page which is one level higher than the one at its right.

Attribute-based
attribute-based breadcrumb trails Display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

This page displays all computer cases that have the attributes of being manufactured by Lian Li and have a MicroATX Mini Tower form factor.

Path-based
path-based breadcrumb Trails Show Users The steps they ' ve taken to arrive at a particular page. path-based breadcrumbs are dynamic in this they display the pages the user has visited before on the "current page" .

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail in a large multi-level website, users can navigate to higher-level categories More easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser ' back ' button or the website ' s primary navigation to return to a higher-level page, users C The breadcrumbs with a fewer number of clicks.

doesn ' t usually hog screen spaces
Because they ' re typically horizontally oriented and plainly styled, breadcrumb trails don ' t take up a lot of spaces on the Page. The benefit is this they have little to no negative impact into terms of content overload, and they outweigh any negatives I F used properly.

Reduces bounce Rates
Breadcrumb trails can is a great way to entice first-time visitors to peruse a website after has viewed the landing pag E. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail could tempt that the user to CLI CK to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

Mistakes in Breadcrumb Trail implementation

Using breadcrumb Trails is a fairly straightforward affair, and there are only a few guidelines to consider before G to implement them on a website. Let's take a look at the some common mistakes to avoid.

Using breadcrumbs When you don ' t need to
A common mistake in implementing breadcrumbs are using them when there is no benefit.

In the above example, Slicethepie risks overwhelming users with too many options. The (1) primary navigation, (2) breadcrumb Trail and (3) secondary navigation are very close together. The breadcrumb Trail application offers users no added convenience because the secondary navigation for Lower-leve L pages sits right below it. Additionally, clicking on the Second-level link in the breadcrumb Trail ("Music") takes your back to the "the" "The", "" "" Listen "), which mistakenly suggests that the" the "the" the "the" the "the" a "higher level than the other two (" Search "and" Artist Hall of Fam E ").

Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as a optional aid to navigation.

In the above example, Mefeedia does don't offer a primary navigation menu for viewing. Though There is text link navigation in the footer section, there ' s no navigation menu in the ' the ' pages, making it Hard to navigate to other sections of the website.

If you are arrive on a video page Directly-say, for example, through a Google search result-the only navigation option May have is the breadcrumb trail. Or If you ' ve already been browsing a website's pages and reach a page so does not display the primary navigation menu, Y Ou'll have to hit the ' Back ' button in your browser to access the main menu.

Using breadcrumbs When pages have multiple categories
Breadcrumb trails have a linear structure, so using them would be is difficult if your pages can ' t be classified into neat cat Egories. Deciding whether to use breadcrumbs largely depends on how do I ' ve designed your website hierarchy. When a lower-level the page is (or can being put) in the more than one parent category, breadcrumb trails are, ineffective and confusing to the user.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let's take a look at the some questions that might arise as you ' re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the "greater than" sy Mbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent Category > Child category.

Other symbols used are arrows pointing to the right, right angle quotation (») and Marks (/).

The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links does not necessarily have a hierarchical relationship to each oth Er, using a "greater than" symbol may not convey their relationship accurately.

How does big should it be?
You don ' t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as a aid to users (a convenience); Its size should convey this to users and thus should at least is smaller, or less prominent, than the primary navigation m Enu.

A good rule of thumb to follow when sizing your breadcrumb trail are that it shouldn ' s user ' s attention when arriving on a page.

Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal men U layout is used.

Breadcrumb Showcase

Now so we ' ve discussed the WHO, what, where, where, why and hows of breadcrumb trails, we should take a look at some live Examples. In the following section, you'll find a few examples of great websites which use breadcrumb trails.

1. Classic text-based Breadcrumbs

TypePad Design Assistant

Nasa

Nestle uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively maki ng it unobtrusive.

Marchand de Trucs

Bridge 55

Overstock.com uses the standard "greater than" symbol for its attribute-based trail. Checkboxes for product attributes are used so, users can uncheck to filter them out.

2. Replacing ">" with the other symbols

TechRadar UK and BP use right-pointing triangles.

Psdtuts and Martique use slashes.

Mouse to Minx uses a right-angled quotation mark to denote page hierarchy.

Jakob Nielsen ' s alertbox uses right-pointing arrows.

Target uses semi-colons (:) for separators.

3. Beyond Simple Text Links

One current trend in breadcrumb design basically says, "Breadcrumbs don ' t have to is simple." In this designs, you'll be beautifully styled breadcrumbs that integrate and the overall.

Grooveshark

Yahoo! TV

Ideo

Apple Store

Coolspotters

Devlounge

Lottanzb

Pixelpoodle

guardian.co.uk

4. Breadcrumbs for multi-step processes

Statement Tracker uses a breadcrumb trail to indicate the steps involved at registering for a, as a progr ESS indicator.

Flickr uses a breadcrumb trail to indicate the number of sections in the Flickr tour.

5. Breadcrumbs with Sub-navigation

Here are some examples of breadcrumb trails whose links, while clicked on or hovered over, open a sub-navigation panel Lists additional attributes or locations.

MarketWatch has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.

Profoto has a unique breadcrumb trail:clicking on a breadcrumb link opens the area below it that gives users additional at Tributes to select from.

Cranfield University has a similar fly-out breadcrumb scheme which serves a dual function:as a location for T He user and as a robust and interactive secondary navigation scheme.

Lonely Planet also has a fly-out breadcrumb trail in which with can change attributes.

Clicking on a breadcrumb link takes for you by that item ' s page, while clicking on the downward-pointing arrow opens L Options.

MSDN has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.

Wowhead has a multi-level sub-navigation scheme.

6. Interactive Breadcrumbs

Delicious lets your remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.

7. Experimental examples

Booreiland uses a Breadcrumb-style navigation scheme for it primary menu, allowing visitors to quickly understand th EY ' re currently viewing.

User Interface designer Aen Tan of Aen UI talks about a design pattern called "tabcrumbs," a navigation scheme that Combin Es tabs and breadcrumbs.

About the Author

Jacob gube is a web Developer/designer and author of Six revisions, a blogger on web development and. If you are want to connect with the author, you can follow him on Twitter.