ゲシュタルト心理学と知覚の組織化
説明する前に 知覚が情報を整理する
いくつかの独立したマークは、グループとして、境界として、あるいは一つの完全な図形として認識されることがあります。ゲシュタルト心理学は、デザイナーが、視聴者が配置されたままの孤立した視覚的要素をそのまま受け取ると仮定するのではなく、その構成を考察する手助けとなります。
Wagemansらによる総説は、ゲシュタルト心理学の歴史および現在進行中の研究における知覚的グループ化と図地関係について論じている。近接性、類似性、連続性といったよく知られた原理は、有用な出発点となる。しかし、それらは文脈を問わずあらゆる解釈を予測できる普遍的なチェックリストというわけではない。
要素間の関係はラベルより強く働くことがある
まとまって配置された操作要素は、同じ操作に属しているように見えることがあります。線は、実際のシステムには存在しない境界を示唆してしまうことがあります。視覚的なリズムは、意図された順序が異なっていても、特定の読み順を促してしまうことがあります。意図した構造を説明する前に、ユーザーがどのように認識しているかを検証してください。
したがって、形態と機能の関係には知覚も含まれる。技術的に正しい配置であっても、誤ったグループ分けを伝えている可能性がある。テキストを追加したとしても、レイアウトにおける強い矛盾関係を解消できない場合がある。
一貫性のある外観は 真実の証拠とはならない
グループ化を行うと、不完全な情報が完全であるかのように見えてしまうことがある。重要な観測値が省略されていても、グラフは整然としているように見えることがある。製品群は一貫性があるように見えても、その制御動作に一貫性がない場合がある。視覚的な完成度と動作の一貫性は、別々に評価すべきである。
これは特に情報デザインにおいて重要です。目が情報を整理しようとする傾向は有用ですが、その性質を利用して、表現自体には含まれていない証拠があるかのように示唆してはなりません。意思決定に影響を与える部分については、欠落しているデータや変更された分類を明確に示す必要があります。
文脈によって読み方が変わる
コントラスト、スケール、背景、動きによって、どの図形が際立つかが変わります。また、慣習的な解釈も影響を与えます。スタジオの大きなスクリーンでははっきりと見えるパターンでも、小さなディスプレイ上や、他の視覚的要素が混在する状況では、曖昧になることがあります。
グループ化の原則を実際のタスクに適用し、その結果を検証する。知覚理論は、観察結果を説明し、代替案を提示するのに役立つ。しかし、特定のレイアウトを使用している人々を観察する必要性がなくなるわけではない。
デザインの具体例
コントロールパネルでは、設置スペースが限られているため、リセットボタンは通常の操作ボタンに近い位置に配置されています。そのラベルは異なりますが、近くに配置されているため、通常の操作手順の一部であるかのように見えます。
チームは、仕組みを変更することなく、グループ分け、間隔、境界の処理を変更することができます。何かを操作する前に、ユーザーがどのように予測するかを評価してください。境界線を別途設けることで、区別が明確になる場合もあれば、周囲のレイアウトによっては、かえって混乱を招くグループが生まれる場合もあります。
パネルを実際の使用状況下で、最終的なサイズでテストする。有用な知見とは、どの関係性が視覚的解釈を支配しているかという点に関するものである。ゲシュタルトの原理を適用することは、仮説の始まりに過ぎず、その視覚的配置が正しく伝達されるという証明ではない。観察によって、理論と具体的な課題が結びつけられる。
実践課題
6つの操作要素を2つの操作に配置する。ラベルは一定に保ちつつ、間隔、類似性、境界線を変化させる。参加者に、操作を行う前に各グループの特徴を説明してもらい、順序を予測してもらう。意図的に一貫性のない関係を1つ導入し、その結果生じる混乱を観察する。最小限の効果的な変更を加えてレイアウトを修正し、その文脈においてどの知覚的手がかりが重要だったかを説明する。
形は、関係性として人々に届く。デザインは、それが実際に生み出す関係性を検証しなければならない。
画像から考える
関連情報とリンク
情報の設計、階層構造、そして分かりやすい伝達について、引き続き検討する。
認識しやすいデザインを、あらゆるタッチポイントで展開可能なアイデンティティ・システムと結びつける。
参考文献
画像の出典とライセンス
1. Law of proximity gestalt svg hariadhi.svg
作者または記載された出典: Hariadhi · CC BY-SA 4.0
Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。
2. Figure ground svg hariadhi.svg
作者または記載された出典: Hariadhi · CC BY-SA 4.0
Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。
3. Kanizsa triangle.svg
作者または記載された出典: Fibonacci · CC BY-SA 3.0
Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。
このトピックを、インターフェース、インタラクション、およびユーザー体験に関するパートナー選定と結びつける。
この分野でのプロジェクトをご計画ですか?ぜひf/p designにご相談ください。