進め方
Visual Hierarchyは、インターフェースが注目を集める順序を扱います。巨大な見出しや目立つボタンだけに頼らず、サイズ、太さ、コントラスト、余白、位置、密度を組み合わせます。ソースでは、情報を主要、二次、三次、背景に分けています。
これは新規制作のための構成ガイドであり、既存画面のテストの代わりではありません。一般的なスキャンパターンや推奨されるサイズ差はヒューリスティックです。実際の階層は、ソースの左から右への例とは読み方向が異なるレイアウトも含め、タスクと対象ユーザーに照らして確認してください。
期待される成果物
- 1つのビューに対する優先順位付きのコンテンツ階層。
- 複数の注目手がかりを用いた構成の根拠。
- 簡易的なビジュアルレビューとタスクテストのチェックリスト。
ブリーフからレビューまで
- 01コンテンツに順位を付ける
主要なアクションまたはメッセージを選び、次にスキャンさせたいもの、必要に応じて読ませたいものを特定します。
- 02視覚的な重みを割り当てる
すべての要素を目立たせるのではなく、サイズ、余白、コントラスト、グルーピングを連動して変えます。
- 03読み順を確認する
目を細めて見るテストと実際のタスク観察で、注目が意図した順序に沿うかを確かめます。