同じ方向に並んで飛んでいる鳥は同じグループだと認識されやすい。このように、複数の要素が同じ方向に動いたり、同じ周期で点滅することで、関連性があると解釈される法則を「共通運命」と言う。
同じ方向に飛んでいる鳥の群れ
共通運命の法則の例：
動いている要素同士が同じグループだと認識される
ゲシュタルト原則のひとつ
ゲシュタルト原則は、異なる複数の法則で構成され、要素の共通点からグループと認識される。「共通運命」は、ゲシュタルト原則の7つのうちの１つである。
ゲシュタルトの7法則
- 近接（Ploximity）
- 類同（Similarity）
- 連続（Continuity）
- 閉合（Closure）
- 共通運命（Common Fate）
- 面積（Area）
- 対称性（Symmetry）
提唱者はチェコの心理学者Max Wertheimerであり、ゲシュタルト心理学の創設者の1人である。
マックス・ヴェルトハイマー
引用元：SCIENCEphotoLIBRARY
近接・類同の法則より強く作用する
共通運命の法則は、ゲシュタルト原則の他の要因である「近接の法則」、「類同の法則」よりも強く作用する。
- 近接の法則：距離が近いものほど同グループと認識しやすい
- 類同の法則：色・形・大きさなどの類似性によって同グループと認識しやすい
類同の法則と共通運命の法則の関係
「類同の法則」は、色・形・大きさの要素で同じグループと認識されるが、異なる色や形、大きさであっても、同じ方向や速度で移動する「共通運命の法則」は、要素同士の関連性がより高いと認識される。
例えば、同じ黄色の星（★）、紫の丸（●）の様に要素が同じ（「類同の法則」の効果が成り立っている場合）でも、異なる要素が一緒に移動すれば関連していると認識される。つまり、共通運命の法則の方が強く作用することを示している。
類同の法則
色・形でグルーピングされている
類同の法則＋共通運命の法則
同じ動きをする要素は、色や形が違っても同じグループだと認識される
関連性が強く認識されるパターン
関連性が最も強くなるのは次のときである。
- 複数の要素が同時に、同じ速さで、同じ方向へ動く時。
または、認識可能で明白なパターンやリズムを伴って動く時（波形など）。 - 複数の要素が同時に、同じ頻度で、同じ強度で明滅する時。
または、認識可能で明白なパターンやリズムを伴って明滅する時。
速度やタイミングが同期していないと関連性が認識しづらい
動きの方向、タイミング、または速度が同一でなくなると、認識される関連性は弱まる。
以下のように、同じ動くというグループであっても、異なる方向に異なる速度で動くと、同じグループであると認識しづらくなる。
動きの方向、タイミング、速度が異なると、動いていても同じグループと認識されない
UIでの活用
共通運命の法則は、スクロール、アコーディオンメニュー、スライダーなど様々なUIに利用されている。
コーディネート共有サイトWEARでの利用例
異なる位置、文字数・アイコンの複数のタグを、同じ動き・タイミングのアニメーションで表示・非表示させることで、同じグループの要素と認識しやすくしている。
参照元: WEAR
写真下部のタグボタンを押すと、写真上に複数のタグが同じタイミング・同じ動きで現れることで、タグが写真とは異なる要素のまとまりとして認識される
「図と地」との関連性
共通運命の法則は、各要素が図と地のどちらに認識されるかにも影響を及ぼす。
静止している要素と動いている要素がある場合、動いている領域の要素は「地(=背景) 」・静止している要素は「図(= 形)」と認識されやすい。
例えば以下のような図で、文字とアイコンが同時に動いた場合は両方の要素が「地」と認識されるが、アイコンのみが動いた場合は地図が「地」でアイコンが「図」と認識されやすい。
地図と飛行機のアイコン両方動く
→ 両方の要素が「地」として認識される
地図が動いていて飛行機のアイコンは動かない
→ アイコンが「図」 地図が「地」として認識される
図と地と共通運命の法則を組み合わせたUIの例
共通運命の法則と図と地の組み合わせは、さまざまなUIに応用されている。そのひとつが、ボタンが動かず常に表示されている「フローティングアクションボタン(Floating Action Button, FAB)」である。
フローティングアクションボタンが使われているマップアプリでは、地図をスクロールしてもボタンが動かずに常に表示されていて、スクロールで動くマップに対してボタンが浮かんでいるように見える。
常に表示され動かないボタンは、地図と異なる動きであるため、地図と異なるグループであると見なされ、「図」として解釈される。
地図に表示されている駅やコンビニ、学校の説明の文字やアイコンは、地図と同じ方向・同じタイミングで動くため、地図と共通した要素であるとみなされ、「地」として解釈される。
Google mapでのフローティングアクションボタン
スクロールで動かない画面右端のボタンは、スクロールで動く地図と異なるグループと解釈され、ボタンが浮いているように見える
