Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Breadcrumb Navigation

From 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 03: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 03:42.
81 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.

×