Projects/Usability/HIG/Breadcrumbs: Difference between revisions

From KDE TechBase
< Projects‎ | Usability‎ | HIG
No edit summary
(Minor language edits)
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 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.
The ''breadcrumbs'' pattern is a navigation aid that helps to keep track of the location within applications or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previous 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 ==
Line 8: Line 8:
* Use a breadcrumb trail 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 breadcrumbs 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 breadcrumbs to just identify or label of the position.
* Do not use a breadcrumbs to just identify or label 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.
* Do not make the breadcrumb navigation dynamic by adopting the last user's interactions (known as 'path breadcrumbs'). Breadcrumbs should show the hierarchy, not the user's history.


=== Behavior ===
=== Behavior ===
* Link all breadcrumbs 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 alternative 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.
* Consider to make the breadcrumbs interactive via drag and drop, e.g. copy/move files by dragging them to a breadcrumb step or to an item of the dropdown list, apply a sequence of processing steps, etc.


=== Appearance ===
=== Appearance ===

Revision as of 12:19, 22 October 2014


Purpose

The breadcrumbs pattern is a navigation aid that helps to keep track of the location within applications or documents by a) providing information about the current position within the hierarchy, and b) offering shortcut links to jump to previous 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 the position.
  • Do not make the breadcrumb navigation dynamic by adopting the last user's 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 alternative 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 by dragging them to a breadcrumb step or to an item of the dropdown list, 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