Breadcrumb Navigation in

Web-Design

Dr. Mazhar Sadiq

masadiq@ciitsahiwal.edu.pk

Department of Computer Science, COMSATS Institute of Information Technology, Sahiwal

 What is Navigation?

 Navigation, can be defined as the set of actions

and techniques that guide users throughout the
app or website to fulfil their goals successfully.
 It’s a focal element on the user interface that
allows end-users find what they are looking for
without confusion or un-necessary clicks.

2
Dr
 Remember 3 Rules for Designing the Web
Navigation

 Where did I come from? The system should

keep the user informed about where he came
from-what parts of the site he already has visited.
This is usually done by changing the link
appearance of already visited link.
 Where am I now? The system should keep the
user informed about current location-where am I
now? This is also done with visual clue in the user
interface.

3
Dr
 Bremember 3 Rules when Designing for Web
Navigation

 Where can I go from here? The system should

keep the user informed about where to go next?
What options are there? The link and the
navigation bars need to be designed so that it is
easy to understand where the link will lead.

4
Dr
 What is Breadcrumbs Navigation?

 A “breadcrumb” is a type of secondary navigation

Menu/scheme that reveals the user’s location in a
website or Web application.
 If a website that has a lot of pages, breadcrumb
navigation can help the way users find their way
around.
 Use breadcrumb navigation for large websites and
websites that have hierarchically arranged pages.
For example e-commerce websites.

5
Dr
 Breadcrumbs Types

 The two common types

 Location-based
 Attributes-based.

6
Dr
 Location-based Breadcrumbs

 A Location-based breadcrumbs indicate to the

user where the current page stands in the
hierarchy of the website.
 This type of breadcrumb navigation is most
commonly seen on websites with more than two
levels of depth or content.
 Upon moving further into a website users are
provide with links to pages, or categories, that act
as a “parent” or a level up from the page they are
currently viewing.

7
Dr
 Location-based Breadcrumbs

8
Dr
 Location-based Breadcrumbs

9
Dr
 Attributes-based Breadcrumb

 Attribute-based breadcrumbs indicate to the user

the attributes or categories ascribed to the current
page within a website.
 For example in e-commerce websites, products
may not only fall under a category but under
certain attributes as well. For example, a vehicle
may be categorized as an SUV then have the
attributes of being the color black and released in
the year 2010.

10
Dr
 Attributes-based Breadcrumb

 The above page displays all computer cases that

have the attributes of being manufactured by Lian
Li.

11
Dr
 Benefits of Using Breadcrumbs

 Convenient for users: By using the breadcrumb for

all pages on a large multi-level website, users can
navigate to higher-level categories more easily.
 Efficient to use: Reduces clicks or actions to return
to higher-level pages: Instead of using the
browser’s “Back” button or the website’s primary
navigation to return to a higher-level page, users
can now use the breadcrumbs with a fewer
number of clicks.

12
Dr
 Benefits of Using Breadcrumbs

 Reduces bounce rates: For example, if a user

arrives on a page through a Google search engine,
seeing a breadcrumb may let the user to click to
higher-level pages to view related topics of
interests. This, in turn, reduces the overall website
bounce rate.

13
Dr