Scribd
Upload
29 views

Breadcum Navigation in Web Design

This document discusses breadcrumb navigation in web design. It defines navigation and breadcrumbs, explaining that breadcrumbs reveal a user's location within a website through a secondary navigation menu. There are two types of breadcrumbs: location-based and attribute-based. Location-based breadcrumbs indicate the website hierarchy, while attribute-based breadcrumbs show a page's categories and attributes. Using breadcrumbs benefits users by providing a convenient way to navigate back to higher levels within large websites with fewer clicks.

Uploaded by

Minahel Noor Fatima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Breadcum Navigation in Web Design

This document discusses breadcrumb navigation in web design. It defines navigation and breadcrumbs, explaining that breadcrumbs reveal a user's location within a website through a secondary navigation menu. There are two types of breadcrumbs: location-based and attribute-based. Location-based breadcrumbs indicate the website hierarchy, while attribute-based breadcrumbs show a page's categories and attributes. Using breadcrumbs benefits users by providing a convenient way to navigate back to higher levels within large websites with fewer clicks.

Uploaded by

Minahel Noor Fatima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy