#526
情報設計・ナビゲーション
#526なびげーしょん
ナビゲーション
別名・表記:Navigationナビメニュー回遊導線
UIXHERO Definition
UIXHEROでは、ナビゲーションを「情報構造をユーザーが移動できる形にした、UI上の仕組みと表示の総称」と定義する。
概要
ナビゲーションが答えるべき問いは、古くから3つに整理されている。
- ここはどこか: 現在地が分かること
- 何があるのか: 選べる行き先が見えること
- どこへ行けるか: 次の一手が判断できること
このうち「現在地」は見落とされやすい。検索エンジンから直接下層ページに着地するユーザーは、サイト全体の構造を知らないまま到着する。
UXでの活用
- 情報の匂い(Information Scent): ラベルが目的地の内容を予測させるかどうかが、クリック率と迷いの量を決める。抽象的なラベルは回遊を止める。
- カードソーティングとの接続: メニュー項目とその分類は、ユーザーの分類感覚を調べた上で決めると精度が上がる。
- ツリーテストによる検証: 見た目を作る前に、構造だけでたどり着けるかを検証できる。
誤用・混乱
- IAとの混同: 「ナビゲーションを改善する」という依頼の多くは、実際には分類の見直し(IA)を必要としている。
- 項目数を減らせば良くなる、ではない: 選択肢を減らすと1階層あたりの判断は楽になるが、階層が深くなる。浅く広いか、深く狭いかはトレードオフであり、正解は文脈による。
- ハンバーガーメニューは万能ではない: 隠すことで画面は広くなるが、隠れた項目の利用率は下がる傾向が報告されている。何を隠すかの判断が必要。
💡 使いどころ
「目的のページにたどり着けない」という課題を扱う時。情報構造そのものの問題か、構造の見せ方の問題かを切り分ける前提として使う。
⚠️ 注意点・誤用
ナビゲーションと情報アーキテクチャ(IA)は別物である。IAは情報の分類と関係の設計、ナビゲーションはその一部をUIとして提示する手段にあたる。分類が破綻している場合、メニューの見た目を変えても解決しない。
具体例
- グローバルナビゲーション、パンくず、サイドバー、フッターリンク
- 検索、フィルタ、関連リンクといった探索の導線
- 現在地を示すアクティブ表示
出典・参考文献:
- Information Architecture for the World Wide Web (Louis Rosenfeld, Peter Morville)
- Don't Make Me Think (Steve Krug)
関連する解説記事
UXデザイン
情報アーキテクチャとナビゲーションの違いとは?設計と実装の正しい関係
UIXHERO POINT
- •UIXHEROでは、情報アーキテクチャを「コンテンツの構造設計」、ナビゲーションを「構造へのアクセス手段」と定義し区別する。
- •IAは「どう整理するか」を決め、ナビゲーションは「どうたどり着くか」を提供する。IAなきナビゲーションは迷路になる。
情報設計・ナビゲーション
ナビゲーション設計 (Navigation Design)
「今どこにいるか」「どこへ行けるか」「どうやって戻るか」——この3つが答えられないナビゲーションはユーザーを迷子にする。現在地・行き先・帰り道を常に示す設計原則。
心理学・認知バイアス
迷わせない情報設計 (Findability)
ユーザーが求める情報を「探せない」UIは、情報がないUIと同じ。ナビゲーション・ラベル・検索・構造を通じて、目的の情報に最短でたどり着ける設計原則。