体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

3つの事例から学ぶ!適切なパンくずリストの使い方

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、コピーライターのMarc Schenker氏によって投稿されました。

 

「パンくず」と聞くとグリム童話の『ヘンゼルとグレーテル』を連想する人が多いかもしれません。

物語の中で、ヘンゼルはパンくずを家に帰るときの道しるべとして道に置いていきました。

 

Webの世界でも同じように、サイト訪問者のためにより良いUXを創造するときに、パンくずリストがナビゲーションとして役立つようになっています。

ユーザーがWebサイト内で現在どの位置にいるかを確認したいときに、パンくずリストは頼もしい存在です。パンくずリストは、ユーザーのアクセスしたページを追跡して表示することができます。アクセスした順にページを表示する場合もあれば、別の配置方法でページを表示する場合もあります。

 

この記事では、適切なパンくずリストの使い方を紹介しています。

 

パンくずナビゲーションの主な3タイプ

パンくずリストには主に3つのタイプがあり、そのうち最初の2タイプは、最後のタイプよりもよく使われているでしょう。

 

位置型パンくずリスト

位置型パンくずリストは、サイトの階層構造において現在どの場所にいるかをユーザーに示します。サイト内でユーザーをわかりやすく導くことができるため、広く利用されているパンくずリストです。

位置型パンくずリストは、コンテンツが複数のレベルから構成され、ナビゲーションが複数のレイヤーから構成されているサイトで特によく利用されています。

ユーザーは、現在より前の、より上位のレベルの階層にあるコンテンツに、1クリックで戻ることができます。位置型パンくずリストは静的であるため、ユーザーがサイト内での現在位置を確認するのに役立ちます。

Screen-Shot-2016-10-10-at-2.36.17-PM-620x412

基本的な使い方の例として、1-800 Flowersのサイトを見てみましょう。

ユーザーは「私の誕生日(It’s My Birthday)」というフラワーアレンジメントのページにアクセスすると、このサイトが、トップページ(Home)、誕生日(Birthday)の順にページを辿って、「私の誕生日」のページに辿り着くことができる構造になっていると一目でわかります。

ユーザーはこれらの上位の階層にあるページにアクセスすることもできます。

 

属性型パンくずリスト

属性型パンくずリストは、位置型パンくずリストとは異なり、静的ではなく、ユーザーの操作によって絶えず変化し、検索フィルタのように機能します。

サイト内での現在位置を示すことはない代わりに、ページのコンテンツのメタデータを表示します。

そのため、属性型パンくずリストはユーザーが「何を買いたいか」をフィルタでカスタマイズして検索できるような、ECサイトによく使用されています。例えば、車の販売サイトなどです。

属性型パンくずリストは、すでにアクセスしたページに戻るために役立つとは限りません。

 

具体的な例として、Cars.comで使われているパンくずリストを見てみましょう。ユーザーが車の「メーカー」、「モデル」の検索条件からオプションを選択して検索すると、ページ左上にあるサイトのロゴのすぐ下に、パンくずリストが現れます。

検索条件の「製造年」、「メーカー」、「モデル」からユーザーが選択したオプションが表示されますが、前のページに戻ることはできません。

Screen-Shot-2016-10-10-at-2.47.29-PM-620x411

このように、属性型パンくずリストは、前にアクセスしたページに戻ることができる位置型パンくずリストとは異なっているという点が重要です。

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。