ブレッドクラムナビゲーションを適切に使用する方法

公開: 2017-01-07

ブレッドクラムは、幼稚園時代に読んだかもしれない古いおとぎ話に私たちを連れ戻します。ヘンゼルが家に帰る道を追跡するためにパンくずリストを敷設することを決定したとき、2人の子供ヘンゼルとグレーテルは森の中で彼らの家から追い出されます。パンくずは森の中の厄介な鳥に食べられますが、物語が書かれてから何年も経って、なんとか印象を残すことができました。

ウェブデザインでは、ブレッドクラムはヘンゼルが考えていたのと同様の目的を果たします。ブレッドクラムは、Webサイトのナビゲーション内のセカンダリナビゲーションとして機能し、訪問者が1つのページから別のページに移動した後に道に迷うのを防ぐのに役立ちます。古いおとぎ話のように、それは彼らが着陸した場所と彼らの最後の場所が何であったかをユーザーに示すのに役立ちます。

ブレッドクラムがWebサイトの階層構造に統合されると、ユーザーは「戻る」ボタンに夢中になることなく、製品カテゴリに深く入り込み、最初の場所に戻ることができます。

ブレッドクラムは、経験の浅い訪問者がeコマースWebサイトをナビゲートするのに役立つグラフィカルな制御要素としても機能します。このようなWebサイトの場合、内部構造をインテリジェントに設計する必要があります。ブレッドクラムでは、オンラインショッピングプラットフォームが訪問者に使いやすさを提供するだけでなく、潜在的な顧客が迷子になった結果としてページを放棄するのを防ぐことが不可欠になります。

ブレッドクラムナビゲーション

ブレッドクラムは、現在の場所と途中で訪れた場所を特定することで、訪問者をガイドする効果的な手段です。これらは、サイトの階層内で視覚的な補助として機能します。しかし、顧客のユーザーエクスペリエンスの観点から、ブレッドクラムはこれら3つの質問に答えるのに役立ちます。

ここはどこ？
ブレッドクラムは、ユーザーが旅を始めたときにサイト上の居場所を知らせます。
どこに行けばいいですか？
これは、次に進むべき場所をユーザーに提案することにより、ユーザーを支援する役割を果たします。構造はすでにそれらの前に配置されているため、ユーザーはカテゴリやサイトセクションを検索して見つける必要がなくなります。
私はそこに行くべきですか？
ブレッドクラムは、ブラウジングを促進し、ユーザーにコンテンツの価値を示すのに役立ちます。たとえば、顧客が製品を検索するためにWebページにアクセスした場合、自分のニーズに適していることが証明される可能性のある他の製品を見つける可能性があります。これにより、Webサイトのバウンス率を下げることができます。

利点

アクションを削減します

より高いレベルのページに到達するために、ブレッドクラムは番号を減らすのに役立ちます。サイト訪問者がそこに到達するために必要なアクションの一覧。訪問者は、「戻る」ボタンやWebサイトの主要なナビゲーションを絶えず使用する代わりに、ブレッドクラムを使用して戻ることができます。

最小限のスペースが必要

テキストリンクで満たされた水平線のみが必要です。これにより、最小限のスペースを確保し、Webサイト上の他の要素が呼吸できるようにすることで、健全なWebデザイン構造が促進されます。これは、Webサイトの読み込み速度を向上させるのにも役立ちます。

すべてのユーザーはブレッドクラムの操作方法を知っています

理解しやすく、それらと対話するための技術的な知識は必要ありません。テキストは、ユーザーがどこにいたか、どこにいるか、どこに行くことができるかを説明しています。これは、すべてのユーザーの理解に普遍的な自明のナビゲーションシステムです。

ブレッドクラムを使用するのはいつですか？

Webサイトのナビゲーション構造を表示するサイトマップを作成することは、Webサイトがブレッドクラムの恩恵を受けることができるかどうかを判断するための最良の手段の1つです。次に、試用版で分析し、パンくずナビゲーションがWebサイトのコンテンツを通じてユーザーを支援しているかどうかをテストできます。

ブレッドクラムは、カテゴリ内でクリーンな線形構造に編成する必要があるかなり大きなコンテンツがある場合に最適に使用されます。ほとんどのeコマースWebサイトでは、さまざまな製品を論理的なカテゴリにグループ化するために同じ基準が使用されます。
コンテンツまたは製品をグループ化するための論理階層がないWebサイトには、ブレッドクラムを使用しないでください。

それらの使用を避けるとき

ブレッドクラムがWebサイトの構造に不可欠である場合、それらを回避する必要がある場合もあります。グループ化の明確な表示がない単一レベルの構造で構成されるWebサイトがある場合、パンくずリストの追加を避けるためにWebサイトの最善の利益になります。上で述べたように、図やサイトマップは、Webサイトのナビゲーションアーキテクチャを決定するのに非常に役立ちます。

ブレッドクラムは、プライマリナビゲーションでサポートされている場合にのみ役立ちます。パンくずは筋肉として機能しますが、主要なナビゲーションはそれらをまとめる骨格です。それらの完全な移動がなければ、Webサイト階層は生産的に機能できません。

ブレッドクラムの種類

知っておくべきブレッドクラムには、場所、パス、属性の3種類があります。

1.ロケーションベース

ロケーションベースのブレッドクラムは、Webサイトの基本構造を表示するために使用されます。これにより、ユーザーは複数のレベルと包括的なコンテンツトレイルを持つWebサイトをナビゲートできます。このようなタイプのブレッドクラムは、外部ソースからWebサイトにアクセスし、より深いレベルのコンテンツを入力する訪問者にとって非常に便利です。たとえば、特定の種類の製品を検索していて、Googleが表示する検索結果をクリックした場合、Webページに入ると、多くのカテゴリの間にいることに気付くでしょう。ブレッドクラムは、場所を特定し、階層構造の可能性にナビゲートするのに役立ちます。深いレベルのコンテンツを含むこれらのWebサイトは、ロケーションベースのブレッドクラムに非常に適しています。理想的な例はeBayです。

2.パスベース

これらのパンくずリストは、Webサイトの履歴トレイルナビゲーションにとって重要です。パスベースのブレッドクラムは、基本的に、現在の場所に到達するためにユーザーがアクセスしたすべてのパスを表示します。通常、このようなブレッドクラムリンクは動的に生成されます。パスベースのプラグインは、Webサイトの閲覧に多くの時間を費やすユーザーには役立ちますが、大多数のユーザーにとってはほとんど困惑しています。ほとんどの訪問者は自分の裁量で閲覧するため、あるページから別のページに移動します。ブラウザの「戻る」ボタンは、パスを変更する必要性のほとんどを解決します。これは、特にWebサイトの奥深くにあるサイトページにアクセスするタイプの訪問者にとっては役に立たないものになります。

3.属性ベース

eコマースWebサイトは、属性ベースのブレッドクラムから最も恩恵を受けます。特定のページまたは製品に従ってカテゴリを一覧表示するのに役立ちます。このような種類のパンくずリストは、ユーザーが製品間の関係を理解するように促すのに非常に役立ちます。たとえば、ウェブサイトでジーンズを販売している場合、属性ベースのパンくずリストを使用して、顧客がレギュラーフィット、スリムフィット、スキニージーンズからナビゲートできるようにします。

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

ブレッドクラムナビゲーションを設計するときは、次の点に注意してください。ブレッドクラムナビゲーションは、サイトでのユーザーエクスペリエンスを向上させるための追加の支援です。

重複する要素を避ける

あなたが本当にあなたのウェブサイトにパンくずリストを追加することにしているなら、あなたはそれらを正しい方法で行うほうがよいでしょう。まず、パンくずリストの間に入る可能性のある重複要素を排除する必要があります。悲しいことに、同じページが複数のカテゴリまたは表示されるコンテンツのレベルに分類される多くのトップランクのWebサイトでこれを確認しました。これは訪問者を混乱させるだけでなく、あなたのウェブサイトにひどく反映します。

SEOの互換性

ブレッドクラムは、訪問者のためのナビゲーションコントロールであるだけでなく、SEOの実践にとっても大きな資産です。ブレッドクラム内のキーワードを使用して、検索エンジンでのランキングを向上させることができます。検索エンジンが結果のパンくずリストに簡単にリストできるように、WebサイトのカテゴリにSEOに適した名前を選択することをお勧めします。

代替ナビゲーションとしてブレッドクラムを使用する

ブレッドクラムは、ユーザーがあるポイントから別のポイントに移動するのに役立つ優れたソースですが、二次ソースとしてのみ扱うことが重要です。ブレッドクラムは、訪問者の使いやすさを向上させるための追加機能であり、どのような状態でもWebサイトの主要なナビゲーション構造を置き換えることはできません。

ブレッドクラムナビゲーションで現在のページをリンクするのは無意味です

ブレッドクラムトレイルに訪問者の現在の場所を表示することはオプションですが、線形構造に表示されるリンクがタップまたはクリックできないことを確認する必要があります。訪問者が現在表示しているページのリンクを表示するだけで混乱が生じます。

セパレータを追加する

セパレータを使用することは、ブレッドクラムのナビゲーションにすっきりとした見た目を与えるための優れた方法です。ユーザーがより深いレベルに進んだ場合にテキストが近づきすぎるのを防ぎ、理解しやすく操作しやすい動的な構造を作成します。

›記号は、通常、衣服›シャツ›襟のシャツなどのカテゴリ形式で使用されるため、階層を示すために使用できます。その他の記号には、矢印（→）、直角引用符（»）、スラッシュ（⁄）などがあります。

ブレッドクラムのサイズとパディングを紹介します

ブレッドクラムを設計するときは、パディングとターゲットサイズを考慮する必要があります。 1つのブレッドクラムと他のブレッドクラムの間の間隔は、注意が必要です。そうしないと、訪問者がそれらを効果的に使用できない可能性があります。同時に、パン粉のサイズが周囲の他の要素を損なうことがないようにして、プライマリナビゲーションが影響を受けないようにします。

必要以上にパンくずリストのデザインに焦点を当てないでください

ブレッドクラムを表すために明るい色や派手なフォントを使用しないでください。ブレッドクラムトレイルは、ユーザーがページにアクセスした後は重要ですが、ユーザーが最初に気付くのはそれではありません。ブレッドクラムナビゲーションにglamを追加すると、ユーザーはWebサイトのプライマリナビゲーションを無視する可能性があります。これにより、ユーザーはページに入るという本当の意図から気をそらされ、ストアの潜在的なコンバージョンが失われる可能性があります。それに関しては、Googleが最良の例です。非常に多くのレベルの検索コンテンツがあるため、ユーザーがパンくずリストを簡単に見つけて操作できるように、派手なフォントや色のないシンプルなパンくずリストのナビゲーショントレイルが表示されます。

どのタイプを避けるべきですか？

サイトの階層を表示するために、場所/属性ベースのブレッドクラムを使用するか、パスベースのブレッドクラムを使用するかについては、議論の余地があります。ブレッドクラムはユーザーの履歴ではなく、サイトの階層を表示する必要があるというのが経験則です。私たちの評価と意見では、おそらくパスベースのブレッドクラムを気にする必要はありません。 1つは、異なるレベル間に表示される階層がないために訪問者に混乱を引き起こす可能性があるため、UXには役立ちません。そのため、パスベースのブレッドクラムよりもロケーションベースおよび属性ベースのブレッドクラムが優先されます。

最終的な考え

ブレッドクラムは、Webサイトの他の要素と同じくらい重要です。テクノロジーによって大量のデータの保存、インターネット速度の高速化、読み込み時間の高速化が可能になったため、ナビゲーションは、汗をかくことなく、より高いレベルの階層でより包括的に表示できます。ブレッドクラムの助けを借りて、あなたのウェブサイトはより良いユーザーエクスペリエンスを生み出すだけでなく、その顧客からより多くの売り上げを生み出すでしょう。よりスムーズで洗練されていないナビゲーションは、製品ページへのアクセスを容易にし、チェックアウトプロセスを妨げることを意味します。