ブレッドクラム：モバイルサイトで使用してもよろしいですか？
（コンテンツサイトの）モバイルWebサイトでのナビゲーションの方法としてパンくずを使用することについて誰かが考えているかどうか疑問に思います。
ブレッドクラムは、サイトの階層構造を次のように示します。
サイト>カテゴリ>サブカテゴリ>グループ>アイテム
ブレッドクラム（適切に設計されている場合）は、ユーザーがサイト構造をすばやく理解するのに役立つと思います。同時に、モバイルユーザーはリンクよりも大きなボタンやバーを好みます。
最高のブレッドクラムとボタン/バー/標準のモバイルUIコンポーネントを組み合わせたブレッドクラムのデザインはありますか？
モバイルを使用していて、従来のスタイルのパンくずリストをナビゲートする必要があると思われる場合は、モバイル用にサイトを設計する際に何か問題があった可能性があります。
Jared Spoolが書いた ixdaで同様の質問に答えて
特にモバイルと話すことはできませんが、パンくずリストの観点から考えないことをお勧めします。代わりに、ローカルの「次に何に行きたいか」というナビゲーションを考える必要があります。
私はパンくずリストがより大きな問題の症状を修正するだけだと思います（ユーザーが最初から間違った場所にいました）。修正を思い付くのではなく、ユーザーを適切な場所に誘導することにエネルギーを集中する方が良いと思います。
これについて Design Copout＃2：Breadcrumbs という記事で書いた。 （デザインcopout＃1はサイトマップです。）
Luke Wrobleskiが彼の本 Mobile First で説明しているように、モバイルユーザーからの注意は半分しかありません。状況については「片目と親指」しかありません。
モバイルユーザーはウェブサイトでentangledを取得したくないので、ユーザーが十分に複雑なサイトを使用するようにしようとすると、状況を「修正」します。最初に複雑さを軽減して、パンくずリストがカードにさえないようにする方法について、もう一度考えてください。
モバイルUX：
モバイルユーザーエクスペリエンスの考慮事項の詳細については、特にコンテンツをデスクトップからモバイルに移行する場合は、モバイルコンテンツとナビゲーションの設計を簡素化する必要性を強調している モバイルUXのメモとスライド を参照してください。 。私が引用する主な例は rei.com です。これはデスクトップ上に豊富なコンテンツ階層がありますが、それでも表示しながらモバイル（ m.rei.com ）の脂肪を削減しますフル機能のエクスペリエンス-そして私は追加するかもしれません-モバイルでパンくずリストを必要とせず。
それはサイト次第だと思います。モバイルウェブサイトを次の2つのカテゴリに分類できます。
- モバイルユーザーに最適なコンテンツのみを提供する完全なサイトの一部を取り除いたバージョンである、オーダーメイドのモバイルWebサイト/アプリ
- レスポンシブウェブサイト、または別のモバイル「テンプレート」でレンダリングされたデスクトップサイト。
最初のタイプのサイトでは、パンくずリストが必要な場合、モバイルユーザーには複雑すぎるWebサイトを構築していることでしょう。 XMatters.com として：
ブレッドクラムがモバイルサイトに表示されることはめったにありません。主な要因は、モバイルサイトのデザインにより、ユーザーが探しているものを見つけるために階層を深く掘り下げる必要がないことです。
2番目のタイプのWebサイト（特にeコマースサイト）の場合、ブレッドクラムは、結果をナビゲートする方法としてブレッドクラムだけではなく、製品/カテゴリなどの完全なナビゲーションの方が圧倒されるため、より役立つ場合があります。また、ユーザーが検索エンジンを介して製品に到達した場合、パンくずリストは、ユーザーがサイト内のどこにいるかについての精神的なアンカーを提供します。
ただし、それらは潜在的に多くのスペースを占有します。メインのモバイルメニューはページの下部にある必要がありますが、パンくずリストは、それらが明白であり、そのためページの上位にある必要がある場合にのみ非常に役立ちます。パンくずリストを3つのレベルに制限することをお勧めします。階層の上位に移動するには、ホームページに戻るか、メインのナビゲーションメニューを使用します。
要約すると、オーダーメイドのモバイルWebサイトには、パンくずリストを保証するのに十分なコンテンツはありませんが、既存のコンテンツが多いサイトをモバイルバージョンに変換し、完全なナビゲーションが必要な場合は、限られたパンくずリストが役立つ場合があります。
これに関する他の有用な読み物：
モバイルサイトで使用されているパンくずリストは、実際に使いやすさを向上させ、多目的を共有できると私は主張します。
レスポンシブ（モバイル）サイトで今日よく見られることの1つは、ナビゲーションが非表示になると、上部にあるドロワー/ハンバーガーアイコンに変わる折りたたみナビゲーションです。すべてのページにタイトルヘッダーを含める。それが私がこれらのタイトルを機能させる（別名ブレッドクラム）ことを決心したときです：
Home > My Account > Security Home > My Account > Notifications
したがって、ユーザーは、表示しているページをすばやく識別し、折りたたまれたモバイルナビゲーションを使用せずに戻ることもできます。
経験則としては、3段より深くしないと使いやすさは向上しますが、それ以上の深さになると、モバイルでの使用が台無しになります。
ブレッドクラムは便利だと思います。それには理由があります。ほとんどのUXデザイナーは、デザインはシンプルで理解可能であると考えていますが、誰もがページをランダムに使用することを好むことを忘れないでください。彼らは、1つのページを離れて別のページに移動し、次に戻ってきます。これらのマイクロブレークは頻繁に発生するため、しばらくして特定のページのパンくずリストに戻ると（他の優れた解決策もある可能性があります）、非常に役立ちます。私が取り組んでいるプロジェクトでは、クロップドパンくずを使用しています。
例：次の場所にいる場合：スタート>車>アウディ>アウディA2ではなくフルパスを表示：アウディ>アウディA2。これは十分な情報を提供します+ユーザーは1レベル上のレベルを取得できます。
ブレッドクラムをどこに配置する予定ですか？
上部近くのどこかにある場合、特にあなたが言ったようにそれらをボタンにしたい場合、それは多くの貴重な画面の不動産を占有します。
あるいは、ナビゲーションをパンくずのようなものに再設計することもできますが、モバイルユーザーにとっては、スクロールせずに見える範囲より多くの画面スペースが必要になります。
パンくずリストを一番下に配置する場合は、インデント付きのfooterとしてulナビゲーションを使用するほうがよいでしょう。多くのサイトにはそれがあり、人々は彼らが彼らが必要なすべてを手に入れたら、彼らがそれを見たら一度ページを離れるか、彼らがさらにどこかに行きたいなら、彼らはそれをチェックアウトします（パンくずリストに戻るのではなく/ nav）ページの上部。
レスポンシブに拡大していて、より広いビューポートのパンくずリストが必要な場合は、HTMLにそれらを含めてCSSで非表示にするだけです。モバイルユーザーでもロードされますが、テキストの帯域幅はそれほど大きくありません。 JSソリューションの余地もありますが、より単純なCSSにこだわります。