http://developer.yahoo.net/ypatterns/pattern_breadcrumbs.php
Breadcumbs
Problem Summary
The user needs to be able to navigate up (towards the root page) and have an understanding of where she is in relation to the rest of the site.
EXAMPLE:
Breadcrumb showing the Things To Do page for Boston, MA in Yahoo! Travel's travel guide
Use When
- The page displayed is within a hierarchy of pages and is not the topmost page.
- The user cannot easily navigate through the hierarchy via other local navigation methods. For example, if the page is fairly deep in a hierarchy, the breadcrumb maybe the simplest way to provide navigation.
- The page may be arrived at from an external source (e.g., a search results page) and the user will need a sense of context.
Solution
- Display a horizontal list of labels starting with the topmost page and continuing down the site's hierarchy to the current page.
Labels
- Where possible, labels should match the title of their corresponding page.
- Use the rules of title capitalization for labels in the breadcrumb.
- Separate each label with a greater-than sign ( > ).
- Include the title of the current page as the last label in the breadcrumb.
- Do not use the label "Home" for the topmost page. Instead use the specific name for the topmost page (e.g. "Travel" or "Weather" rather than "Home".)
Hyperlinks
- Hyperlink all labels in the breadcrumb except the last one (which corresponds to the title of the current page.)
- Never hyperlink the greater-than sign ( > ) or the spaces that separate the labels.
- The hyperlink should be styled the same regardless of whether it has been visited or not.
Other Considerations
- Never display a breadcrumb on the site's topmost page.
- The breadcrumb sometimes corresponds to the user's recent browsing history, but is not equivalent to it.
- Dynamically include the titles of user-generated content pages as appropriate
Rationale
- Breadcrumbs provide context relative to the rest of the site.
- Breadcrumbs provide a way to navigate up the site hierarchy.
- The term 'Breadcrumb' can be misleading. It implies that this is the trail that got us here and will take us back the way we came. In reality, our Breadcrumbs pattern is more like Homeward Path as described in the Diemen Patterns Repository. However, we chose the name 'Breadcrumbs' since it is the most common name for this idiom.
Accessibility
- Each breadcrumb label should match the corresponding page title.
- Allow the breadcrumb and each link to be navigated to with the Tab key.
- When an individual breadcrumb label has keyboard focus, the Enter key will navigate to the linked page.
問題の概要
ユーザーは、ルート（一番上）であるページへの誘導と、また他のページとの関連性から自分がどこにいるのか示すよう要求します
EXAMPLE:
Breadcrumb showing the Things To Do page for Boston, MA in Yahoo! Travel's travel guide
こんなときに使おう
- 階層構造に従ってページが並べられる場合、またトップページでない場合
- ユーザーを他のナビゲーション方法では簡単に誘導できない場合:例えば、ページが階層の深い部分にある時、パンくず記法を使うと最もシンプルにナビゲーションできるかもしれません
- ユーザーが外部ソースから飛んでっくる場合（例えば検索結果のページ）そしてユーザーが（＊自分がどこにいるかという）文脈を捉える必要があるとき
ソリューション
- ラベル・リストを水平に並べて、トップページから始まって現在のページへと階層を降りていく表示にする
ラベル
- 可能なら ラベルは対応するページのタイトルに合わせるべきです
- パンくずリストのラベルには タイトルを大文字化するルールを使う？
(規則に従ってタイトルを大文字化する ってことでしょうか）
- 「>」の印より大きいものでラベルを区切る
- パンくずリストの最後ラベルには現在のページのタイトルを含ませる
- トップページのラベルには「HOME」を使わない。トップページには特定のラベルをつける。（"Home" よりは "Trabel" や "Weather"など）
- ラベル全部にハイパーリンクを張る。最後のラベル、つまり現在のページのタイトルをつけたラベルにはリンクを張らない）
- ラベルを分ける印（ > ）より大きい範囲のハイパーリンクを張らない
- 訪問済み・未訪問に関係なく、ハイパーリンクには統一したスタイルを適用するべきです。
その他、考えるべきこと
- サイトの最上層のページにはパンくず表記をしない
- パンくずリストが、ユーザーの閲覧履歴（＊サイト内での移動の履歴）と一致することがありますが、同等のものではありません。
- ユーザーが生成したコンテンツページを動的にインクルードする
（＊少し、意味が分かりません…）
原理
- パンくずリストは、サイトのほかの部分に関連したコンテキストを提供します
- パンくずリストは、階層的なサイトナビゲーション方法を提供します
- Breadcrumb(パンくず）という言葉は紛らわしいかもしれません。パンくずリストが意味するのは、「このリストこのページに来た形跡を意味し、そしてもと来た場所に戻る道である」?です。事実、このパンくずリストのお手本はDiemen Patterns Repositoryが記すHomeward Pathとそっくりです。それでもこのBreadcumbs（パンくず）という名前を採用するのは、この表記にとって最も一般的となっている名前であるからです。
- パンくずは現在のページのタイトルにマッチさせるべきです
- Tabキーをつかって一個一個のリンクに誘導できるようにしてきましょう
- 一個一個のラベルがキーボードフォーカシングをもっているなら、Enterキーをおすとリンクページに誘導できるようにします
