おとぎ話「ヘンゼルとグレーテル」では、2 人の子供が森でパンくずを落として帰り道を探します。
今日では、森で迷子になった経験はあまりないと思いますが、お粗末なデザインの Web サイトでイライラするほど方向感覚を失ったことがあるのは間違いありません。 また、ユーザーが検索やディープリンクからサイトにたどり着いた場合、より上位のページをより速く見つけることができます。
- パンくずナビゲーションとは何ですか。 これは、通常、水平方向のテキスト リンクとして表示され、「より大きい」記号 (>) で区切られた二次的なナビゲーション バーです。 パンくずナビゲーションは、ランディング ページの見つけやすさを向上させ、ユーザーが最初に検索またはディープ リンクからサイトを見つけた場合、より上位のページにすばやく到達できるようにします。 「パンくずがすることは、ユーザーがサイト内を移動しやすくすることであり、そのコンテンツと全体的な構造が理にかなっていると仮定すれば、です。 それは、デザインの中でたった 1 行を占めるものに対して十分な貢献です」
- Breadcrumb Navigation Tips and Examples
- Only use breadcrumb navigation if it makes sense for your site’s structure.
- パンくずナビゲーションを大きくしすぎない。
- パンくずナビゲーションに完全なナビゲート パスを含める。
- 最上位レベルから最下位レベルへ進む。
- パンくずのタイトルをページタイトルと一致させる。
- Get creative with design.
- Keep it clean and uncluttered.
- どのタイプのパンくずナビゲーションが自分のサイトにとって最も理にかなっているかを検討します。 位置情報ベースのパンくずは、ユーザーがサイトの階層内のどこにいるのかを表示します。 属性ベースのパンくずは、そのページがどのカテゴリに属しているかをユーザーに示します。
- Know your audience.
パンくずナビゲーションとは何ですか。 これは、通常、水平方向のテキスト リンクとして表示され、「より大きい」記号 (>) で区切られた二次的なナビゲーション バーです。 パンくずナビゲーションは、ランディング ページの見つけやすさを向上させ、ユーザーが最初に検索またはディープ リンクからサイトを見つけた場合、より上位のページにすばやく到達できるようにします。 「パンくずがすることは、ユーザーがサイト内を移動しやすくすることであり、そのコンテンツと全体的な構造が理にかなっていると仮定すれば、です。 それは、デザインの中でたった 1 行を占めるものに対して十分な貢献です」
あなたのビジネスの Web サイトが多層構造になっている場合、サイトを簡単に移動できるようにするために、パンくずナビゲーションの導入を検討することができます。 しかし、他のデザイン要素と同様に、その方法には正しいものと間違ったものがあります。 ここでは、ユーザーにとって最も効果的なパンくずナビゲーションを作成するための 9 つのヒントと例を探ります。
Breadcrumb navigation has a linear structure, so you only want to use it makes sense with your website’ hierarchy. 異なるランディング ページからアクセスできる下層ページがある場合、パンくずナビゲーションを使用すると、異なる出発点から同じページにアクセスし続ける読者を混乱させるだけです。
パンくずナビゲーションを大きくしすぎない。
パンくずナビゲーションは、主要なナビゲーション バーの補助的なツールなので、ページ上で大きくなりすぎたり目立ちすぎたりしないようにしましょう。 たとえば、DHL の Web サイトでは、主要なナビゲーション バーは大きく、「エクスプレス」「小包 & eコマース」「ロジスティクス」などの列があり、認識しやすいようになっています。 パンくずナビゲーションはその下の小さなセクションで、「DHL Global | > Logistics | > Freight Transportation」と表示されます。
パンくずナビゲーションに完全なナビゲート パスを含める。
私は「Elon University Non-Degree Students」でググってこのランディング ページにたどり着きましたが、Elon は「ホーム」と「入学」を含む完全なナビゲート パスを含めていて賢明です。 あるレベルを省いてしまうと、ユーザーを混乱させ、パンくず経路が役に立たないと感じてしまうからです。
最上位レベルから最下位レベルへ進む。
パンくずナビは左から右へ読むことが重要で、左に最も近いリンクはホームページで、右に最も近いリンクはユーザーの現在のページとなるようにします。 ニールセン・ノーマン・グループの調査によると、ユーザーはページの左半分を見るのに80％、右半分を見るのに20％の時間を費やしており、左から右へのデザインに強いこだわりがあるようです。
パンくずのタイトルをページタイトルと一致させる。
混乱を避けるために、ページとパンくずのタイトルを一致させ、特にそれらのタイトルで特定のキーワードをターゲットにしている場合は、一貫性を保つことが望ましい。 また、パンくずリストとページが明確にリンクしている必要があります。 パンくずのタイトルにリンクがない場合は、それを明確にします。 ネスレは、パンくずのタイトルをページタイトルと一致させるために、効果的にラベル付けしています。 「
Nestle はまた、リンクと非リンクを異なる色でうまく区別しています (リンクは青、非リンクは灰色のままです。
Get creative with design.
従来のパンくずナビゲーションはこのようになります。 ホーム > 企業情報 > 採用情報. しかし、別のデザインにしたほうがユーザーにアピールできる、あるいはサイトがよりよく見えると感じる場合は、従来の経路に従う必要はありません。
たとえば、Target は製品ページでパンくずナビゲーションを使用していますが (仮想靴セクションで迷わない人はいないから)、「/」記号と黒と灰色のシンプルなテキストを使用しています。
Keep it clean and uncluttered.
パンくずナビゲーションは単にユーザーのための補助であり、ユーザーが探さない限り気付かれないことが理想的です。 このため、パンくずナビゲーションを不要なテキストで乱雑にしないようにします。
Eionet では、たとえば、「あなたはここにいます」というテキストを削除することができます。 役に立つことを意図していますが、テキストはページを乱雑にします。
どのタイプのパンくずナビゲーションが自分のサイトにとって最も理にかなっているかを検討します。 位置情報ベースのパンくずは、ユーザーがサイトの階層内のどこにいるのかを表示します。 属性ベースのパンくずは、そのページがどのカテゴリに属しているかをユーザーに示します。
Bed Bath & Beyond は、属性ベースのパンくずナビゲーションを使用して、製品ページがどのカテゴリに属しているかをユーザーに示し、ユーザーは「キッチン」や「小型家電」をクリックして、類似の製品を閲覧できるようにします。 このタイプのパンくずナビゲーションは、ベッド・バス & ビヨンドの顧客に対して最も効果的です。
Know your audience.
Best practices in breadcrumb navigation urges web designers to place the navigation at the top of the page — but Apple, one of the most valuable companies of all time has defies their breadcrumb navigation at the bottom of their site.The best practice of the web designers are urge that preposed by a logic, and they have been against this logic. 結局のところ、オーディエンスを知ることが重要なのです。 アップルの顧客は一般的に技術に精通しており、必要であればナビゲーションを見つけることができるでしょう。
結局のところ、パンくずナビゲーションは、サイトを簡単に移動できるようにする効果的なツールですが、デザインのベスト プラクティスに従って、ツールの有用性を活用できるようにしたいものです。 UXに関するその他のアドバイスについては、「UXデザインの究極のガイド」を参照してください。
