移行中の知識
共通領域
Common Region
定義
共通領域（common region）とは、同じ境界や面の内側に置かれた要素が、一つのgroupに属するものとして知覚されやすくなるperceptual groupingの原理です。proximityやsimilarityとは別の要因で、近接していても別の領域に分ければgroupingが変わりえます。UIではcard、panel、fieldset、section backgroundなどの「囲い」が情報構造を作る理由を説明できます。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
preferences画面
設定項目をsectionにまとめる
見るポイント
labelとcontrolを単に近づけるだけでなく、関連する複数項目を同じsurfaceやsection内へ置く。別groupとの間隔が十分でも構造が曖昧な時、共通領域が必要かを検討する。
指標が多い分析画面
dashboard card
見るポイント
metricとchart、legendを一つのcardに含めることで、同じ分析単位として読めるかを見る。cardを増やしすぎて画面全体がfragmentedに見えないかも同時に確認する。
理解
理解のポイント
- common regionはproximityやsimilarityとは独立してgroupingへ影響しうることが示されており、nested regionによる階層的なgroupingも成立しうる。
注意
誤解しやすい点
- まとまりを作るたびにborderやcardを追加し、領域の入れ子を増やし続ける。
- 共通領域とproximityを同じ原理として扱い、spacingだけで十分な場面にも囲いを追加する。
- borderの太さや色だけを調整し、何を同じ領域へ含めるべきかという情報構造を見ない。
観察
見比べて確かめる
関連
関連する概念
出典