パン屑リストについてもう一度考えてみる

様々なパン屑リスト

利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リストがあります。IA の専門家 Keith Instone によると、パン屑リストには以下のタイプがあると言われています。

場所の示す
Webサイトをツリー状として捉えたときの利用者の現在地を表示する
経路を示す
利用者が現在地まで辿り着いた道筋を表示する
属性を示す
断面的な検索をして絞り込む際、選択済みの属性を表示する
進行状況を示す
アプリケーションの利用の際、タスクの進行状況を表示する

それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。また、利用者が幾つかのページをブラウジングしているだけの場合など経路を残すべきか判断しにくい場合があります。経路を示すパン屑リストへの疑問はヤコブ博士も随分前に供述しています。

本当に階層を知る必要があるのか?

現状、最も利用されているパン屑は場所を示すタイプでしょう。Webサイトはよくツリー状で設計される場合が多いため、その構造を UI として表現されているパン屑リスト。もちろん今の Web サイトにもある程度の構造は必要とされていますし、そのサイトが何を提供出来るのかを知る上でメインナビゲーションは重要な役割を果たしています。しかし、本当にサイト構造をパン屑リストとして示す必要性があるのかどうか疑問です。

利用者は検索でモノを探す傾向にありますし、ソーシャルメディアを活用した情報交換が、トップページから順に探すというスタイルから、目的のページまで一気にアクセスするという使い方を助長しています。Eコマースでも情報サイトでも利用者が気にしていることは、今自分がいる場所(ページ)に自分が求めている情報があるかどうかです。なければ関連しているページを探すでしょうし、面倒であれば去るでしょう。その際、ページがどのような構造で組み立てられていて、今自分がその構造の何処にいるのかを知る必要性が本当にあるのかどうか。

情報の断片を公式 Web サイト以外で取得出来、トップページから辿らなくても次々とページを観覧出来る環境下にいるので、階層を辿ってまた下るといったような行為が面倒に感じる方もいるかもしれません。

当然、作っている我々にしてみればそれは必要な知識ですし、発注している方も知りたい情報でしょう。しかし、利用者が本当にそれを求めているのかと言えばそうとは限りません。

では、階層を示す理由・目的は何でしょか?それは恐らく「利用者に目的の情報を見つけてもらうため」だと思います。そのヒントとして階層を見せることで少しでも目的に辿り着きやすくなるのではないかというのがパン屑リストの発端かもしれません。

すべてのサイトをツリー状ではっきり示すことが出来た時代。そしてパン屑リストでしか利用者に目的の情報へ導く方法がなかった時代であればそれで良かったのかもしれませんが、今はそれ以外のソリューションが幾つかあります。関連情報を示すセカンダリナビゲーションもそうですし、利用者の文脈に合わせて微妙に情報を変えることもできます。

実世界の現在地の示し方

左から近辺地図、バス経路情報、観光マップ

現在地の示し方は今の Web サイトのようにホームからきっちり下まで示す方法が良いのか考えさせられるのが、実世界の地図の見せ方です。上記の3つの地図は駅の改札口に並んでいたわけものです。現在地はそれぞれ同じなのですが、情報量や見せている範囲がそれぞれ異なります。それぞれの地図が果す目的が異なるので、それに応じて情報が変化しています。これは言い換えれば、人がその地図と向き合う目的(文脈)に合わせて最適化されているといえます。

また、目的に合わせて「全体像」の概念も変わっているのも興味深い点です。改札口を出て歩くときの全体像、バスで市内を行き来するための全体像、そして観光をしたいと考えるときの全体像が異なります。全体像も数百メートルから数十キロメートルまで変化していますし、そのときどきに応じて強調している情報が変化しています。

パン屑リストのように全体像から順に絞り込んで見せるにしても、見ているページによって全体の捉え方や切り分け方を変える必要があるのかもしれません。それは単にツリー状で明確に切り分けられているものではない可能性があります。

階層から属性へ

以前から言われていることですが、すべてをツリー状で示し、特定のページをひとつのカテゴリに配置することが難しくなってきています。アマゾンの製品ページに場所を示すパン屑リストのようなものはありますが、複数のリストが用意されておりページ上にはありません。場所というよりかは製品の属性を示しているほうに近いかもしれません。

アマゾン検索のほうも少し変わっていて、ツリー状のカテゴリを示しているかのように見えて、実は絞り込み属性を順に表示している UI になっています。これと似たような UI を適応しているサイトは他にもあって Zappos もそのひとつ。今、ご覧になっている私のサイトも カテゴリとタグを使い分けて以来、タイトルの上に属性のみリストアップしています。多くの情報を扱っているサイトになるとツリー状での場所を示すタイプから属性を示すタイプのほうが適しているかもしれません。

実装前にもう一度考える

この記事を通して場所を示すパン屑ナビゲーションは必要ないかもしれないと書きましたが、必要になるケースがあるかもしれません。他のデザインの課題と同じように、黒白はっきり評価できることではありません。しかし、パン屑リストが絶対必要なものであると捉えるべきではないと考えています。とりあえず入れておけば良いというものでもないわけですから、実装するのであれば上記に挙げた4つのタイプのどれを適応させるのかを考慮した上で本当に必要がどうか考えてみてください。

パン屑リストはクリックされているから必要・・・ではなく、利用者がなぜそうしたのかを再考してみることで別のデザインソリューションの方が最適という結果が出てくるかもしれません。

Photo is taken by Horia Varlan

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。