Difference between revisions of "Projects/Usability/HIG/Breadcrumbs"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Purpose)
Line 2: Line 2:
  
 
== Purpose ==
 
== Purpose ==
The ''breadcrumbs'' pattern is a navigation aid that helps to keep track of the locations within programs or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previously positions without using the Back button (e.g. home > documents > business). The breadcrumb extends the address bar with (clear) access to subsections. It has the advantage of distinctness in usage. As a drawback the breadcrumb usually needs more space.
+
The ''breadcrumbs'' pattern is a navigation aid that helps to keep track of the locations within programs or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previously positions without using the Back button (e.g. home > documents > business). The breadcrumb trail extends the address bar with (clear) access to subsections. It has the advantage of distinctness in usage. As a drawback the breadcrumbs usually needs more space.
  
 
== Guidelines ==
 
== Guidelines ==
 
== Is this the right control ==
 
== Is this the right control ==
* Use a breadcrumb for orientation and navigation in strictly hierarchical data. Apply other controls like tags for flat or less organized content.
+
* Use a breadcrumb trail for orientation and navigation in strictly hierarchical data. Apply other controls like tags for flat or less organized content.
* Make sure the breadcrumb has only supportive functions. Do not use it as primary and exclusive navigation pattern.
+
* Make sure the breadcrumbs has only supportive functions. Do not use it as primary and exclusive navigation pattern.
* Do not use a breadcrumb to just identify or label of the position.
+
* Do not use a breadcrumbs to just identify or label of the position.
* Do not make the breadcrumb navigation dynamic by adopting the last users interactions (known as 'path breadcrumb'). Breadcrumbs should show the hierarchy, not the user's history.
+
* Do not make the breadcrumb navigation dynamic by adopting the last users interactions (known as 'path breadcrumbs'). Breadcrumbs should show the hierarchy, not the user's history.
  
 
=== Behavior ===
 
=== Behavior ===
* Link all breadcrumb steps to the appropriate page or position respectively, except the current.
+
* Link all breadcrumbs steps to the appropriate page or position respectively, except the current.
 
* Add the current position to the breadcrumbs.
 
* Add the current position to the breadcrumbs.
 
* Consider to provide a dropdown list for alternate options on each level. But always offer one-click access by default.
 
* Consider to provide a dropdown list for alternate options on each level. But always offer one-click access by default.
* Consider to make the breadcrumb interactive via drag and drop, e.g. copy/move files, apply a sequence of processing steps, etc.
+
* Consider to make the breadcrumbs interactive via drag and drop, e.g. copy/move files, apply a sequence of processing steps, etc.
  
 
=== Appearance ===
 
=== Appearance ===
* Keep the breadcrumb plain; do not use icons or other controls.
+
* Keep the breadcrumbs plain; do not use icons or other controls.
* Place the breadcrumb above the content control (e.g. file list).
+
* Place the breadcrumbs above the content control (e.g. file list).
  
 
* Do not place it above the navigation control (e.g. directory structure)
 
* Do not place it above the navigation control (e.g. directory structure)

Revision as of 08:32, 22 October 2014


Purpose

The breadcrumbs pattern is a navigation aid that helps to keep track of the locations within programs or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previously positions without using the Back button (e.g. home > documents > business). The breadcrumb trail extends the address bar with (clear) access to subsections. It has the advantage of distinctness in usage. As a drawback the breadcrumbs usually needs more space.

Guidelines

Is this the right control

  • Use a breadcrumb trail for orientation and navigation in strictly hierarchical data. Apply other controls like tags for flat or less organized content.
  • Make sure the breadcrumbs has only supportive functions. Do not use it as primary and exclusive navigation pattern.
  • Do not use a breadcrumbs to just identify or label of the position.
  • Do not make the breadcrumb navigation dynamic by adopting the last users interactions (known as 'path breadcrumbs'). Breadcrumbs should show the hierarchy, not the user's history.

Behavior

  • Link all breadcrumbs steps to the appropriate page or position respectively, except the current.
  • Add the current position to the breadcrumbs.
  • Consider to provide a dropdown list for alternate options on each level. But always offer one-click access by default.
  • Consider to make the breadcrumbs interactive via drag and drop, e.g. copy/move files, apply a sequence of processing steps, etc.

Appearance

  • Keep the breadcrumbs plain; do not use icons or other controls.
  • Place the breadcrumbs above the content control (e.g. file list).
  • Do not place it above the navigation control (e.g. directory structure)
  • Do not integrate it into the tool bar
  • Do not place it in an extra tool bar.
  • Do not integrate it into the title bar.

Best practice

^tbd by VDG

Implementation

^tbd by devs


Content is available under Creative Commons License SA 4.0 unless otherwise noted.