人は連続して配置された要素に対して、最も自然で違和感なく繋がる方向を見出して、グループだと認識する。連続の法則でグループだと認識された要素は、見た目などに違いがあっても関連性が高いと感じやすい。
例として、黒い線で作られた図形がある。
黒い線で作られた図形
黒い線で作られた①の図を分解しようとすると、②や③の赤い線のように、直線と上向きの曲線だと直感的に認識しやすい。
自然な形状で構成されていると認識しやすい
一方で④や⑤のように、極端に鋭角的だったり、複雑だったりする線の繋がりは直感的に認識しにくい。
複雑な要素で構成されていると認識しにくい
連続は、人が情報を目にして認識する際の特徴をまとめた「ゲシュタルト原則」のひとつである。
1910年にチェコ出身の心理学者Max Wertheimerらを中心に仮現運動というアニメーションの研究が始まる。それを基に1923年「ゲシュタルト原則」の基礎となる6原則の近接・類同・連続・閉合・共通運命・良い形が発表された。
マックス・ヴェルトハイマー
引用：Max Wertheimer – Wikiquote
離れた要素間にも関連性が産まれる
離れた要素同士でも特定の方向を見出せれば、位置が離れていたり、見た目に統一感がなかったりしても関連性が高いものだと認識する。
下の図では、矢印が指し示す右下の方向に視線が誘導され、花のイラストに到達した時点で視線が止まる。矢印と花のイラストは見た目が全く違うものの、関連性のある図形だと認識できる。
矢印の図形に方向性を感じて、視線が誘導され、
オブジェクト同士に関連性を見出す
下の図では矢印の向きを変え、左下を指し示すようにした。視線は花へ誘導されにくく、それぞれの要素同士に関連性を感じるのが難しくなる。
矢印と花のイラストに関連性を見出せず、
それぞれ単体のオブジェクトだと認識する
連続の法則を活用すると、無理のない視線誘導の設計が行える。
言葉で明示しなくても視線誘導できる
製品やサービスのUIに連続を活用すると、見るべき順番や、目立たせたい要素などにユーザの視線を自然に誘導することができる。
例えばGoogleの検索結果では、グローバルナビゲーションが横並びに配置されているため、水平方向に視線が動く。検索結果は縦並びに配置されているため、垂直方向に視線が動く。
Googleの検索結果では水平と、
垂直方向に視線誘導を行っている
人の目線や指をさした方向で視線を誘導する
矢印や情報の並び方などの他に、人の目線や指差しなどでも視線誘導が行える。
人は本能的に、他人の顔や仕草に注目しやすい。他人の目線や指を指した先に注意が向き、自然と視線が誘導される。
目線によって、視線は画面左側に誘導される
人の視線や指をさした方向に誘導される特性を利用して、誘導先に注目してほしい情報を掲載すると、無理なく意識を向けることができる。
指差しによって、視線は画面右側に誘導され、
自然と問い合わせボタンに注目できる
商品の向きで視線を誘導する
商品の向きによって方向を発生させ、ページの見え方や、視線が留まる位置をコントロールすることもできる。
例えば、アディダスのオンラインショップでは、スニーカーの先端が右を向いているため、ページの左から右へ視線が移動し、ページ全体を把握しやすい。
アディダスのオンラインショップでは、スニーカーの先端が右を向いているので、目線が左から右に誘導される
引用：スニーカー｜アディダス オンラインショップ
コンバースのオンラインショップでは、スニーカーの先端が左を向いているので、一気にページ右端までに視線が移動せず、商品写真と商品説明テキストのグループ化が起きて、商品1点1点に視線が留まるようになる。
コンバースのオンラインショップでは、スニーカーの先端が左を向いているので、目線が靴のかかとでストップし、自然と説明文に目がうつるよう視線が誘導される
引用：ジャックパーセル／JACK PURCELL | コンバース公式通販 | CONVERSE ONLINE SHOP
関連用語
参考リンク
- Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (2)
- The Gestalt Principle of Continuity
- How to Apply Gestalt Principles to Your Designs for Maximum Impact
- Simplicity, symmetry and more: Gestalt theory and the design principles it gave birth to
- Using Gestalt principles in UX design | by Kapil Moon
- Gestalt Principles – 3: Proximity, Uniform Connectedness, and Good Continuation
- Gestalt principles in Web Design
- Understanding Web Design – What is Gestalt Continuity? – MonsterPost
- Gestalt principles in UI design.. How to become a master manipulator of… | by Eleana Gkogka
- Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)
