breadcrumbs in web design: examples and best practices

3

Click here to load reader

Upload: charlie-perez

Post on 14-Apr-2017

77 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Breadcrumbs in Web Design: Examples and Best Practices

Breadcrumbs in Web Design: Examples and Best

Practices

Sometimes it is difficult for users to find their way if a website contains a

lot of pages. Then the only solution designers can have is the

breadcrumb navigation which can greatly enhance the user experience

as it reduces the number of actions a user need to take in order to get to

a higher-level page.

What is a breadcrumb?

A breadcrumb is a type of secondary navigation that indicates the

location of the user within the website’s hierarchy, making it a great

source of contextual information for landing pages.

You can usually see breadcrumbs in websites that have a large amount

of content organized in a hierarchical manner.

Additionally, Breadcrumbs gives SEO opportunity and make your site

more search engine friendly. You can use breadcrumb navigation for

larger websites. An excellent feature for ecommerce website, in which a

large variety of products is grouped into logical categories.

Keep in mind, it shouldn’t replace effective primary navigation menus

In this article we will explore the use of breadcrumbs on websites –

Types of Breadcrumbs

Location-based

Location-based breadcrumbs show the user where they are in the

website’s hierarchy.

Page 2: Breadcrumbs in Web Design: Examples and Best Practices

Attribute-based

It display the attributes of a particular page.

Path-based

Path-based breadcrumbs are dynamic in that they display the pages the

user has visited before arriving on the current page.

Here are the benefits of Using Breadcrumbs :

Convenient for users

Using a breadcrumb on 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’s “Back” button, users can now use the

breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space

Page 3: Breadcrumbs in Web Design: Examples and Best Practices

Because they’re typically horizontally oriented and plainly styled,

breadcrumb trails don’t take up a lot of space on the page.

Reduces bounce rates

It can be a great way to attract new user to peruse a website after

having viewed the landing page

Hope this article help you to understand the importance of breadcrumbs

for more details on web design experiences visit here.