×
Namespaces

Variants
Actions
(Difference between revisions)

Breadcrumb Navigation

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ReviewerApproval and ArticleMetaData etc)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
{{ArticleMetaData <!-- v1.1 -->
+
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|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]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
Line 10: Line 10:
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
 
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
Line 35: Line 34:
 
</ul>
 
</ul>
 
<BR><BR>
 
<BR><BR>
[[Image:Breadcrumb_compare.gif]]<BR>
+
[[File: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
 
&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
  
Line 66: Line 65:
 
<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.
 
<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.
 
<BR><BR>
 
<BR><BR>
[[Image:Breadcrumb_flyout1.gif]]<BR>
+
[[File:Breadcrumb flyout1.gif]]<BR>
  
 
----
 
----
 
--Submitted by - Aadhar14b, 25 June 2009
 
--Submitted by - Aadhar14b, 25 June 2009

Revision as of 08:03, 7 May 2012

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

Contents

What is Breadcrumb ?

Breadcrumb is a mechanism for keeping track of the user’s location within an application and provides navigation facility.

Advantages

  • Breadcrumb takes up very little space and hence helps in space availability for the display of content.
  • 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.



Breadcrumb compare.gif
      Traditional Navigation                          Breadcrumb Navigation

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.

When to use ?

  • 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.
  • The user cannot easily navigate through the hierarchy via other local navigation methods.
  • 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.

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.

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


--Submitted by - Aadhar14b, 25 June 2009

63 page views in the last 30 days.
×