はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
ゲシュタルトの原理とは
ゲシュタルトの原理は、人間が物体を知覚する際に、類似の要素をグループ化し、パターンを認識し、複雑なイメージを単純化する方法を説明しています。つまり、人間の脳は、複雑なイメージを単純化し、整理するために、無意識のうちにパーツを配置して、全体としてまとまりを持たせようとするのです。
これまで紹介してきた複数のビジュアルデザインの原則を使用して強調するのと同様に、複数のゲシュタルトの原則を1つのモックアップデザインに同時に適用することで、視覚的なつながりを持たせることができるのです。
前回、ゲシュタルトの原則のうち、「類似性」「近接性」「共通領域」の3つについて、すでに紹介しました。
今回、「閉鎖性」「連続性」「対称性」を紹介します。
閉鎖性
『人間が不完全なものを見たとき、無意識のうちにイメージを完成させて、全体が完成されたものを見る』
下図を見てください。あなたの脳は、これらの線を赤い四角、青い丸、黄色い三角形として認識しているのです。ゲシュタルトの原理を利用することで、ユーザーの物への注意を喚起し、デザインへの関与を維持することができます。
下図を見てください。Eとxの間にある白いスペースが、右向きの矢印を形作っています。この矢印には輪郭や区別はありませんが、FedExにとって、この矢印は閉鎖性の原則というだけでなく、矢印が前進を意味することから、ユーザーのために品物を発送するというブランドの目的にも合致しています。
（参考）
連続性
『直線や曲線上に配置された要素は、直線や曲線上にない要素よりも関連性が高いように見える』
連続性は、ユーザーの視線を線に沿ってオブジェクトからオブジェクトへと誘導し、画面の特定の部分に注意を集中させます。
下図を見てください。白い線がグラフィックを横切っていくので、ユーザーの目は最初の円から2番目の円を通り、3番目の円へと導かれます。
現実世界でも、ゲシュタルト原理による連続性は、
- ステップバイステップのプロセスを示すとき
- 互いに関連するアイテムのリストを表示するとき
によく使われます。
また、下の画像にある米国郵政公社（USPS）のウェブサイトのように、ナビゲーションメニューにも連続性が利用されることがあります。
荷物を送るための情報を探している場合を想像してください。
- ナビゲーションメニューの「Send」をクリックします。
- 荷物の送り方について知りたいので、「Learn About」のヘッダーに視線を移します。
- 「Sending」サブヘッダーに視線を移し、そこで荷物の送り方に関する学習へのリンクを見つけます。
ナビゲーションメニューでは、連続性の原理を利用して、視線を垂直方向に誘導しているのです。このように、視線を誘導するのはとても速いので、3段階のメニューを経て目的のリンクにたどり着いたことに気づいていない可能性があります。
対称性
『各要素がバランスよく配置されているか、あるいは鏡像になっている方が、視覚的に美しく見える』
見た目の美しさだけでなく、左右対称のオブジェクトは互いに関連性があると認識されます。
下図を見てください。左側の濃い緑色の図形が、右側の薄い緑色の図形に複製されています。この2つの対称的な形は、使われているグリーンの濃淡が違うだけです。
- 左: 左側の濃い緑色の図形が、右側の薄い緑色の図形に複製されています。この2つの対称的な形は、使われているグリーンの濃淡が違うだけです。
- 右: 一方、バランスと平等性を欠く非対称性は、要素の重要性を強調し、視覚的な面白さを生み出すことができます。デザインに非対称性を用いることで、特定のアイテムやアイテムのグループに注目させることができます。
下記は、アラン・チューリング研究所のウェブサイトですが、非対称性を活用し、異なる文字サイズとテキストボックスの配置によって、ページ内のより重要な情報へとユーザーを誘導しています。