«

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

トップ画像

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

Designing Better Breadcrumbs

Designing Better Breadcrumbs

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

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

  • どういうときにパンくずリストが必要か
  • どう使われるか
  • どうデザインするか

パンくずの意義

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

  • グローバグナビ
  • 検索
  • サイドバー
  • タブ
  • パンくず

等がある。

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

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

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

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

  • タスク完了率
  • タスク完了時間
  • 最初のシェアまでの時間
  • 問い合わせ率
  • ネガティブレビューの割合
  • 送信データの正確性

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

それぞれのナビゲーション

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

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

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

パンくずはいつ使われるのか

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

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

  • ラベルや見出しが曖昧になっている
  • 親子関係にある情報が似たようなものになっている
  • ユーザー目線での言葉になっていない
  • コンテンツに対して複数の導線があり探しにくい

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

パンくずの見せ方

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

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

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

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

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

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

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

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

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

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

パンくず+ α での見せ方

  • Horizontal layering
  • Sidebar navigation
  • Tags
    現在地との上下関係は見えないが、関連する情報を見せられるいいオプション

BBC sidebar

まとめのチェックリスト

  • メインナビゲーションの補足として必要
  • グローバルナビの近くに置くのがベスト
  • ページの見出しより上に配置するのがよい
  • 区切り文字は左から右を指すものがよい
  • スクロールしなくても見えている方がよい
  • すべてのパンくずをリンクに見えるようにする
  • 見出しに近い場合のみ現在のページはリストに入れなくてもよい
  • mobile では幅が狭いので、入らない場合はアコーディオンを使うなどを考える
  • 親要素は折りたたみなどせず常に見えるようにする
  • パンくず内での横移動は必要に応じて検討する

感想

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