ブレッドクラムはページの左上に配置する必要がありますか?
パンくずリストは常にナビゲーションメニューのすぐ下か、ページコンテンツの上にあるようです。 1stWebDesignerの記事には、いくつかの ブレッドクラムデザインの創造的な例 が示されています。その99%がこの形式を使用しています。
ブレッドクラムをページの他のすべてのものの上に置くと、誤った視覚階層が作成されます。
詳細については、Steve Krugの Do n't Make Me Think を参照することをお勧めします(第6章でナビゲーションとブレッドクラムについて説明しました)。
簡単にまとめると、ページの各セクションにはヘッダーがあり、通常はタイトルが含まれますが、特定のセクションにのみ影響するアクションを含めることもできます。
一番上のパンくずリストコントロールは、ページ上のすべてがこの場所に固有であり、場所を変更するとページ全体が変更されることを意味します。
私たちがサイトに通常持っている精神的なイメージは、グローバルですべてのページに共通のラッピング要素があるということです。この要素には通常、タイトル/ロゴ、ナビゲーションなどが含まれます。技術的にはページごとに再読み込みされる可能性がありますが、私たちはそれを常に不変であると認識すべきです(すべきです)。
また、ナビゲーションがパンくずリストの下にある場合、別のページに移動するのが奇妙に感じられ、ナビゲーションの下のコンテンツのみが(一定のまま)変更されることを期待して、階層内の「上の」ものを変更することも考えられます。
ブレッドクラムを置くのに最適な場所はゴミ箱だと思います。それらは実際にはそれほど多くの価値をサイトに提供しません。
あなたがそれらを持っていると主張するなら、サイトナビゲーションの後にそれらを置くのに最適な場所です。それらをサイトの最上部に配置することは、私にとって非常に悪い考えです。それは確かにあなたのSEOとアクセシビリティを傷つけるだろうし、それはまたあなたのサイトの美学を傷つける可能性が高いです。ブレッドクラムは厳密には「きれい」ではありません。
それらがコンテンツの真上に置かれる理由は、それらがコンテンツに直接関連しているからです。それらをナビゲーション/ヘッダーの上に置くと、コンテンツとパンくずリストにリンクし、一部のコンテキストが失われます。私は認知共鳴と呼ばれるこの種のものを見てきましたが、それは実際には有効なフレーズではありませんが、ここではある程度意味があります。
編集:それがアクセシビリティとSEOにどのように害を与えるかについて拡大:
Accessibility:ブレッドクラムをページの最上部に配置した場合、スクリーンリーダーなどの支援技術を使用しているユーザーは、サイトナビゲーションリンクにアクセスするために、すべてのブレッドクラムを移動する必要があります。このため、ナビゲーションリンクをクリックするか、ブレッドクラムリンクをクリックするなど、ユーザーにとってより可能性の高いターゲットを実際に考慮する必要があります。あなたが唯一のナビゲーションがブレッドクラムであるCraigslistでない限り、よりありそうな候補はナビゲーションリンクです。
SEO:検索エンジンは特定の数のリンクのみをたどります(ページ上の特定の量のコンテンツを読み取りますが、ここではそれほど重要ではありません)。再び、それは重要性につながります。 Googleのクローラー、ブレッドクラムリンク、またはメインサイトのナビゲーションリンクをたどったときに、より価値のあるもの(クローラーがブレッドクラムよりもはるかに多くのコンテンツに理想的につながる)。さて、ほとんどのクローラーはおそらくナビゲーションとブレッドクラムよりもページの奥にたどり着くので、これはおそらくそれほど問題ではありませんが、そのようなことを確認することをお勧めします。
また、サイトの最上部に配置しない別の理由についても考えます。サイトのすべてのページにブレッドクラムがあるわけではありません。そのため、ユーザーは特定の方法でヘッダーに慣れる可能性が高く、特定のアクションを実行しない限り、時間をかけて無視するようになります。つまり、パンくずリストは、コンテンツの真上にある場合よりも無視される可能性が高くなります。少なくともコンテンツの上にある場合は、ユーザーがコンテンツを読むときに、ユーザーのビジョンの中にいる可能性が高くなります(ここでも、パンくずリストとコンテンツの共鳴)。
Jakob Nielsen 次の理由でブレッドクラムを推奨
- パンくずリストは、上位レベルの概念に対する現在の場所を人々に示します
- パンくずリストにより、ワンクリックで上位のサイトレベルにアクセスできます
- パンくずリストはユーザーテストで問題を引き起こすことはありません
- ブレッドクラムが占めるスペースは非常に少ない
ただし、彼はそれらを「セカンダリナビゲーション」と呼んでいます。また、場所を提案することは具体的ではありませんが、サイトのメインナビゲーションの後の補助は強い意味合いを持っています。
それを行う興味深い方法は、ページの最上部にブレッドクラムとタブのハイブリッドを作成することかもしれません。機能とフォームは、Google Chromeの上部UIパターンのタブに似ています。
それらを使用する場合は、H1の直前に属することをお勧めします。
しかし、私はそれらがほとんどの場合実際にはそれほど有用ではないという考えに同意する傾向があります。それらが可能なのは、非常に深くネストされた非常に区画化されたアイテムを持つサイトがある場合です。例として、人々が特定の製品ページにアクセスし、一般的な製品カテゴリのリストに簡単にアクセスできるようにする可能性が高いオンライン小売業者が挙げられます。