ナビゲーション設計の基本／ボトムアップ型設計とトップダウン型設計

ナビゲーションの基本パターンとその設計

一覧－詳細（List-Detail）

UIのナビゲーション設計では、「一覧 → 詳細」を基本とする構造で組み立てることで、整ったナビゲーションを表現しやすくなります。一覧とは、ビュー表現でいうリスト、カラム、カルーセル、メニューなどのコレクション表現全般です。詳細とは、コレクションに羅列される個々の単体オブジェクトの表現です。

ナビゲーション設計に先立ち、情報の塊をコンテンツと見立てて概念定義に着手しておくと効果的です。

不要なら詳細を省いても良い

「一覧 → 詳細」パターンは必ずしも守る必要はありません。「情報の塊」を構成する内容がそう複雑でもなく軽量である場合には、あえて詳細表現を省いても問題ありません。一覧と詳細で表示内容がほぼ同じといったような、UIとして冗長になりすぎることを避けましょう。

逆に詳細表示に本来含めるべき詳細情報がないといったようなことも避けた方が良いでしょう。一覧表示では特に必要な情報のみを俯瞰しやすくし、詳細表示では「情報の塊」が含むUI用のすべての情報に触れられるようにします。