よいパンくずリストを作るメモ

April 16, 2022

急にデザインの記事を書き始めたが、「英語できるようにする & 文字でアウトプットする」の二重取りが目的。なおメモ書きであるので、基本読み流してピックアップしたものを列挙していくものであることは表明しておくし、今後もこういう記事増やしていくつもり。

事業をグロースするにはスピードが重要で、そのためには開発時の瞬発力が大事。より UX や UI の根源を知る事によって開発の瞬発力を高める意味でデザインのエントリを読むなどしている。今回はパンくずリストに関する記事をかいつまんでメモしていく。

記事は以下について書かれている。

ユーザーにサイトを気持ちよく使ってもらうためにはいろんなナビゲーションを用意する必要がある。

等がある。

パンくずはサイト全体を案内するのによい。ユーザーはあまりどこのナビゲーションをクリックしているか意識はしていないが、ナビゲーションを使うにあたっては「いまどこにいるのか」を覚えておく必要がある。

初めてのページに飛んできた時、ユーザーはスクロールしながら機能の充実差を測る。そして探したいものを見つける旅に出る。もし見つからなければそのサイトへの信頼を失ってしまう。

ユーザーが求めたときに必要なものを見つけられるようにすることが重要。

ユーザーがどれだけサイトを理解して使っているかを測る指標がいくつかある。

これらを改善するために、わかりやすいナビゲーションを作る。具体的には、前方・後方・横への 3 方向のナビゲーションをサポートする。

前方へのナビゲーションではユーザーが目的に達するまでに必要なアクションを減らしてあげると体験がよくなる。

後方へのナビゲーションユーザーの旅は必ずしも直線的ではない。具体的には通知が来たりして別のタブで別のサイトへ移動してしまったりしてしまう。戻ってきた際、ユーザーはこれまでの旅を思い出す必要がある。なのでナビゲーション上通った箇所をハイライトしたりする。

横方向へのナビゲーション似たような情報を探す場合に使用される。より探している情報に近づくために、パンくずで一旦後方へ戻る際はなどは、横方向へのナビゲーションをおいてあげるとよく作用する。

小さく情報が入れ子になっていないサイトの場合はパンくずの存在価値はそこまで高くない。例えば The Economist の場合、パンくずの代わりに次のページのタイトルを見せている(カテゴリと次へのリンクが設置されている)。

また、以下のようなコンテンツの問題もある。

入れ子の多い複雑なプロジェクトこそパンくずがワークする。ユーザーは検索・ニュースフィードなどどこから来るかわからない。なのでユーザーはそのサービスがどういう構造になっているかわからない。

歴史的には情報は左から右に流れるので、パンくずの区切り方は左から右を指すものがよい。

パンくずは多くの場合グローバルナビの近くに添えられる。多くのユーザーはナビゲーションと結びつけながらパンくずを利用する。パンくずを探す場合は、グローバルナビゲーションの近くや見出しの近くなどすぐ見つかる場所に置くのがよい。

また、一番上までスクロールしないとパンくずが見えないのはよくない。

現在のページがどこかわかりやすいようにする。 hover などを使わなくても下線を引くなどしてリンクだとわかるようにする。

パンくず上の他の部分と現在のページが異なる見え方をしないとユーザーに誤解を生んでしまう。すべて同じ場合は現在のページの親であると認識してしまう。

現在のページの見出しとパンくずが近い場合、パンくずの中に見出しを入れるかどうか。それは見出しの見せ方による。見出しがバナーに埋まっており、パンくずから削除することによって関係性がわかりにくくなる場合は入れるべき。見出しが十分に近くわかりやすければなくてもよい。

また、パンくずがスクロールについてくるなどして見出しと離れてしまう場合は入れたままにしておくべき。

見出しは三点リーダなどで削るべきではない。

スペースが十分にないなどの場合、前のページだの分だけ表示するのはユーザーのアクションを増やしてしまう可能性がある。

パンくずの一部を使って横方向へのナビゲーションも可能になる。具体的にはドロップダウン機能をつけて前後へのナビゲーション＋横方向へのナビゲーションを両立することが可能。

英語のボリュームが多くて疲れた。。。もう少し短い記事とかにしようｗ