ブレッドクラムナビゲーションのベストプラクティスと例

ブレッドクラムナビゲーションは、設計および開発プロセスで見落とされがちです。. 何人かの人々はそれが不必要であると思うかもしれませんが他の人はそれがその価値のために面倒すぎると感じるかもしれません。問題の事実は、ブレッドクラムナビゲーションはウェブサイトの使いやすさを大いに高めるでしょう.

ブレッドクラムは、ユーザーに代替のナビゲーション方法を提供し、ユーザーがWebサイトの階層内のどこに位置しているかを確認できるようにし、Webサイト内の上位レベルにナビゲートするために必要なステップ数を減らします。.

ここで概説されているのは、今日使用されているさまざまな種類のブレッドクラムナビゲーション、それらが重要である理由、およびそれらをオンラインで最も適切に実装する方法です。また、参照用にここに含まれ 今日オンラインでブレッドクラムが使用されている方法の30以上の例.

ブレッドクラムナビゲーションはWebサイトを作ったり壊したりすることはないと思われますが、Webサイト全体の使いやすさと機能性を高めることによって、ユーザーに追加の利益をもたらすことを忘れないでください。.

ブレッドクラムの種類

パス

パスベースのブレッドクラムは、Webサイトの現在のページに到達するためにユーザーがたどったステップまたはパスを示します。さらに、現在のページにアクセスするために以前に訪問したページへのリンクが表示されます。 3種類のブレッドクラムナビゲーションのうち、パスベースのブレッドクラムナビゲーションは最も人気がありません。そのため、パスベースのブレッドクラムナビゲーションは、次のような機能を提供します。 “進む” そして “バック” ブラウザのボタンほとんどのWebサイトでは、ロケーションベースおよび属性ベースのブレッドクラムナビゲーションの方が優れた機能を提供します。.

ロケーション

ロケーションベースのブレッドクラムは、現在のページがWebサイトの階層のどこにあるかをユーザーに示します。この種のブレッドクラムナビゲーションは、2レベルを超える深さまたはコンテンツを持つWebサイトで最もよく見られます。さらにWebサイトに移行すると、ユーザーには、Webサイトとして機能するページまたはカテゴリへのリンクが表示されます。 “親” または現在表示しているページから1つ上のレベル。たとえば、ユーザーが “話す” しかし、ページ “私達がすること” ページはの親です “話す” ページ中 “ホーム” ページはの親です “私達がすること” ページ.

クリアレフト株式会社

属性

属性ベースのブレッドクラムは、Webサイト内の現在のページに属する属性またはカテゴリをユーザーに示します。 eコマースのWebサイトでよく見られるように、商品はカテゴリに分類されるだけでなく、特定の属性に分類されることもあります。たとえば、車両がSUVとして分類され、その色が黒で、2010年に発売されるという属性を持つ場合があります。.

Cars.com

ブレッドクラムを使用する理由?

優れたユーザビリティ

ブレッドクラムは、ユーザーがWebサイトを簡単にナビゲートできる追加の手段を提供します。ユーザーが他の情報源からあなたのウェブサイトの内部ページにアクセスした場合、ブレッドクラムによってユーザーはサイトの階層内のどこにいるのかを正確に確認することができます。ユーザーはまた、いかなる面倒もなしに、いつでもより高いレベルのWebサイトに移動する機会を与えられます。.
バックトラックが簡単

主なナビゲーションは、パンくずリストが後ろ向きになるようには設計されていません。バックトラッキングはオンラインで非常に人気があるので、もう少し手助けを提供することは大いに役立ちます。.
追加クリックを排除

ブレッドクラムを使用すると、ユーザーはWebサイトのあるレベルから次のレベルにジャンプする必要がなくなります。 “進む” または “後ろ向き” ブラウザのボタンさらにブレッドクラムにより、ユーザーはメインナビゲーションに継続的に頼る必要がなくなります。.
ユーザー階層を表示

Webサイトの主なナビゲーションは、そのサイト内の各ページの階層を反映するものではありません。ユーザーにブレッドクラムを付与すると、Webサイト内のページの階層を見ることができます。.
視覚的に楽しい

パンくずリストを使用すると、ユーザーはさらに使い勝手がよくなりますが、ページ上のスペースやスペースをあまりとらずに使用できます。ブレッドクラムはあなたのウェブサイトのビジュアルデザインに簡単に実装でき、ユーザーに大きな利益をもたらします。.
追加のヘルプを提供

Webサイトのプライマリナビゲーションがどのように機能するのかを理解していないユーザーや、探しているものを知らないユーザーもいる可能性があります。ユーザーにブレッドクラムを与えると、Webサイトの全体的な進行状況と構造を確認できるようになり、Webサイトをよりうまくナビゲートできるようになります。.
低い直帰率

通常、ブレッドクラムは、プライマリナビゲーションよりも詳細なナビゲーションを提供します。そうすることで、ユーザーはウェブサイトをナビゲートする方法に関するより多くのオプションを与えられるでしょう。ウェブサイト内のいくつかのレベルを簡単にバックトラックする機会を彼らに与えることはあなたの直帰率を下げるでしょう.
興味を惹きつける

ユーザーがWebサイトの内部ページにアクセスすると、オッズはすでに関心のあるページにあります。ブレッドクラムは、追加のページへのリンクや、ユーザーが興味を持っている情報を、正方形から始めないようにするためのリンクを提供する場合があります。.

ブレッドクラムのベストプラクティス

ページ上部でブレッドクラムを使用する

ブレッドクラムの最も一般的で直感的な配置は、ページ上部にあります。これにより、ユーザーは複雑な方法でブレッドクラムを見つけ、それに応じてそれらを利用することができます。.
ブレッドクラムを一貫して使用する

ブレッドクラムを使用することにした場合は、Webサイト全体でそれらを使用するようにしてください。一部のページでユーザーにブレッドクラムを与え、他のページでは与えないと混乱して欲求不満になるだけです. （この代表的な例の1つが、個々の商品ページからブレッドクラムを削除するAmazonです。）
ブレッドクラムは適切に劣化するはずです

ブレッドクラムは常にホームページから始まり、現在のページに降格します。そうすることであなたのブレッドクラムは一度に1つのステップから最高レベルから最低レベルへ行く必要があります。.
パンくずを適切に定型化する

あなたはあなたのブレッドクラムが見られることを望みますが、あなたはそれらが焦点になることを望まないのです。また、ブレッドクラムはページへのメインコンテンツの一部ではなく、追加のサポートのみであることを明確にしたいと思います。あなたのブレッドクラムが目立つけれども、忍耐強くはない幸せな媒体を見つけてください.
ページを明確に分類する

複数のカテゴリに分類されるページがある場合は、Webサイトでブレッドクラムを使用したくない場合があります。 2つ以上のカテゴリの下にページを配置しようとすると、不明瞭なパンくずを生成し、ユーザーを困惑させるだけです。あなたのウェブサイトが整理された階層構造を持ち、あなたのブレッドクラムを通して適切に表示されていることを確認してください.
各レベルを明確に区別する

ユーザーが各ブレッドクラム・レベル間の違いを区別できることを確認してください。レベル間の最も一般的な区切り文字は、「より大きい」文字（>）です。その他の適切な区切り記号には、二重引用符（»）、スラッシュ（/）、および矢印（→）があります。プレーンテキスト文字を使用する場合は、1つのみを使用してください. （»は>>よりも魅力的で効果的です）
現在のページを選び出す

現在表示されているページであることを確認するには、ブレッドクラムリストの最後の項目に別のスタイルを使用します。あなたはアイテムを作ることによってこれを達成することができます 大胆な, 色を変える、または強調それ.
現在のページをリンクにしないでください

現在表示されているページなので、ブレッドクラムリストの最後の項目をリンクにする必要はありません。ここにリンクを作成しても、特にクリックしても新しいページに移動しない場合は、ユーザーを混乱させるだけです。.
ページ見出しとしてブレッドクラムを使用しない

現在のページの見出しとしてブレッドクラムリストの最後の項目を使用することは無効です。ブレッドクラムを使用する場合は、ページ見出しも追加してください。.
ブレッドクラムは主ナビゲーションを置き換えない

ブレッドクラムはプライマリナビゲーションのサポートとしてのみ使用され、プライマリナビゲーションを完全に置き換えることはありません。ブレッドクラムナビゲーションを使用する前に、Webサイトをナビゲートできるプライマリナビゲーションを常にユーザーに提供する必要があります。.