×
Namespaces

Variants
Actions
(Difference between revisions)

Breadcrumb Navigation

From Nokia Developer Wiki
Jump to: navigation, search
Aadhar14b (Talk | contribs)
(New page: Category:Mobile DesignCategory:Usability ==What is Breadcrumb ?== Breadcrumb is a mechanism for keeping track of the user’s location within an application and provides navigation...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Usability]]
+
[[Category:Usability]]
==What is Breadcrumb ?==
+
{{ArticleMetaData <!-- v1.2 -->
Breadcrumb is a mechanism for keeping track of the user’s location within an application and provides navigation facility.  
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090625
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
 
 +
==What is Breadcrumb?==
 +
A breadcrumb is a user interface navigation mechanism. It shows both the current location and previous location(s) required to get to the current location within the navigation hierarchy.
  
 
==Advantages==
 
==Advantages==
<ul>
+
 
<li>
+
Breadcrumb navigation can provide a very compact mechanism for orienting a user within an app or document set:
Breadcrumb takes up very little space and hence helps in space availability for the display of content.</li>
+
* Gives user the knowledge of their current location relative to higher-level concepts.
<li>Gives user the knowledge of their current location relative to higher-level concepts.</li>
+
* One-click navigation to navigate back to higher levels in the hierarchy.
<li>One-click navigation to navigate back to higher levels in the hierarchy.</li>
+
 
</ul>
+
[[File:Breadcrumb compare.gif|frame|none|Traditional Navigation  Breadcrumb Navigation]]
<BR><BR>
+
[[Image:Breadcrumb_compare.gif]]<BR>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Traditional Navigation  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Breadcrumb Navigation
+
  
 
==Disadvantages/Limitations==
 
==Disadvantages/Limitations==
<ul>
+
 
<li>Lack of proper update, especially on web applications when new pages are added or there is modification in hierarchical structure, can cause inconsistency or broken links.</li>
+
* Lack of proper update, especially on web applications when new pages are added or there is modification in hierarchical structure, can cause inconsistency or broken links.
<li>Breadcrumb is more useful on a stylus-driven device and not appropriate for scroll and select devices.</li>
+
* Breadcrumb is more useful on a stylus-driven device and not appropriate for scroll and select devices.
</ul>
+
  
 
==When to use ?==
 
==When to use ?==
<ul>
+
 
<li>When the application is heavily content driven and also has a lot of navigation, breadcrumb can help is saving space for content as well as giving proper navigation facility.</li>
+
* When the application is heavily content driven and has many nested levels a breadcrumb can help locate the user within the document structure
<li>The user cannot easily navigate through the hierarchy via other local navigation methods.</li>
+
* The user cannot easily navigate through the hierarchy via other local navigation methods.
<li>In case of a web application, if a user might arrive to a page from an external source (e.g., through a search engine) and the user will need a sense of context.</li>
+
* When a user might arrive to a page from an external source (e.g., through a search engine) and the user will need a sense of context.
</ul>
+
  
 
==Guidelines while implementing Breadcrumb==
 
==Guidelines while implementing Breadcrumb==
<ul>
+
 
<li>Whenever possible, labels of breadcrumb should match the title of the corresponding form/page of the application.</li>
+
* Whenever possible, labels of breadcrumb should match the title of the corresponding form/page of the application.
<li>Display the title of the current form/page as the last label in the breadcrumb and don’t provide hyperlink to it.</li>
+
* Display the title of the current form/page as the last label in the breadcrumb and don’t provide hyperlink to it.
<li>Avoid to hyperlink the symbol (e.g. sign ( >> )) that separates the labels.</li>
+
* Avoid to hyperlink the symbol (e.g. sign ( >> )) that separates the labels.
<li>Hyperlink color/style of the breadcrumb should be the same irrespective of whether the link was previously visited by user or not.</li>
+
* Hyperlink color/style of the breadcrumb should be the same irrespective of whether the link was previously visited by user or not.
<li>Use ‘Title Case’ for labels in the breadcrumb.</li>
+
* Use ‘Title Case’ for labels in the breadcrumb.
<li>Avoid using breadcrumbs for single-level hierarchy navigation that have no logical hierarchy or grouping.</li>
+
* Avoid using breadcrumbs for single-level hierarchy navigation that have no logical hierarchy or grouping.
</ul>
+
 
  
 
==Design Tip==
 
==Design Tip==
<B>Using combination of breadcrumb and fly-out navigation</B><BR>
+
'''Using combination of breadcrumb and fly-out navigation'''<br />
Combination of breadcrumb and fly-out navigation is helpful in displaying child menus related to each level of the breadcrumb. <BR>
+
 
<B>Implementing this concept - </B>When a user ‘clicks on’ or ‘hovers over’ a breadcrumb link, the link opens a sub-navigation panel that lists additional attributes.
+
Combination of breadcrumb and fly-out navigation is helpful in displaying child menus related to each level of the breadcrumb.  
<BR><BR>
+
 
[[Image:Breadcrumb_flyout1.gif]]<BR>
+
'''Implementing this concept''' - When a user ‘clicks on’ or ‘hovers over’ a breadcrumb link, the link opens a sub-navigation panel that lists additional attributes.
 +
 
 +
[[File:Breadcrumb flyout1.gif|none]]

Latest revision as of 06:42, 9 May 2012

Article Metadata
Article
Created: User:Aadhar14b (25 Jun 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] What is Breadcrumb?

A breadcrumb is a user interface navigation mechanism. It shows both the current location and previous location(s) required to get to the current location within the navigation hierarchy.

[edit] Advantages

Breadcrumb navigation can provide a very compact mechanism for orienting a user within an app or document set:

  • Gives user the knowledge of their current location relative to higher-level concepts.
  • One-click navigation to navigate back to higher levels in the hierarchy.
Traditional Navigation / Breadcrumb Navigation

[edit] Disadvantages/Limitations

  • Lack of proper update, especially on web applications when new pages are added or there is modification in hierarchical structure, can cause inconsistency or broken links.
  • Breadcrumb is more useful on a stylus-driven device and not appropriate for scroll and select devices.

[edit] When to use ?

  • When the application is heavily content driven and has many nested levels a breadcrumb can help locate the user within the document structure
  • The user cannot easily navigate through the hierarchy via other local navigation methods.
  • When a user might arrive to a page from an external source (e.g., through a search engine) and the user will need a sense of context.

[edit] Guidelines while implementing Breadcrumb

  • Whenever possible, labels of breadcrumb should match the title of the corresponding form/page of the application.
  • Display the title of the current form/page as the last label in the breadcrumb and don’t provide hyperlink to it.
  • Avoid to hyperlink the symbol (e.g. sign ( >> )) that separates the labels.
  • Hyperlink color/style of the breadcrumb should be the same irrespective of whether the link was previously visited by user or not.
  • Use ‘Title Case’ for labels in the breadcrumb.
  • Avoid using breadcrumbs for single-level hierarchy navigation that have no logical hierarchy or grouping.


[edit] Design Tip

Using combination of breadcrumb and fly-out navigation

Combination of breadcrumb and fly-out navigation is helpful in displaying child menus related to each level of the breadcrumb.

Implementing this concept - When a user ‘clicks on’ or ‘hovers over’ a breadcrumb link, the link opens a sub-navigation panel that lists additional attributes.

Breadcrumb flyout1.gif
This page was last modified on 9 May 2012, at 06:42.
76 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×