マインドズアイ–データ視覚化心理学の概観

データの視覚化は、データに関するストーリーを伝えるための優れた方法です。 しかし、それを行うための最良の方法は何ですか？ 人間の知覚と認知を理解することは、設計者がそれを効果的に行うのに役立ちます。

人々は何千年もの間、ストーリーを伝え、重要な質問への回答を説明するためにビジュアルを使用してきました。 データの視覚化の最も初期の例は、おそらく約27,000年前の地図であり、長い間、地理以外のデータの視覚化を目にすることはめったにありませんでした。

私たちの脳は、パターンやつながりを認識するために独自に構築されていますか？ 今日、私たちはデータ視覚化の黄金時代に生きています。 データを効果的に伝達することは困難な場合があります。グラフは複雑なデータを理解し、新しい視点から見ることもできますが、オーディエンスにメッセージを適切に送信したり、データに基づいてビジネス上の意思決定を行ったりする場合、視覚化は極めて重要な方法です。それを達成するために。 しかし、データ視覚化の力の背後には何がありますか？

データ視覚化設計の歴史的背景

データの視覚化には長い歴史があり、17世紀から19世紀の間に大きな進歩を遂げました。 定量的データをグラフィカルに表示するというアイデアは、18世紀にルネデカルトが数学演算の値を表示するための2次元座標系を発明したときに生まれました。 そのシステムは、William Playfairが今日私たちが知っているように、グラフィックフォームを開拓したときに改善されました。 彼は、折れ線グラフと棒グラフ、そして後に円グラフと円グラフを発明したと信じられています。

何年にもわたって、定量的なグラフの使用がより広まった。 それらの方法論と有効性は、ジャック・ベルタンの著書The Semiology of Graphicsの出版により、20世紀の後半に大幅に増加しました。 彼は、情報を直感的、明確、効率的に提示するために、従うことができる規則とパターンに従って視覚が機能することを発見したため、彼の仕事は非常に重要でした。

Bertinは、さまざまな種類のグラフの有効性を調査しました。 以下の例では、円グラフはいくつかの国でのさまざまな種類の肉の生産を示しています。 Bertinはこれらを「役に立たない」と見なしました。 真ん中—マトリックスの視覚化を採用することにより、高レベルのパターンがよりすぐに見えるようになります。 そして右側では、国や肉の生産には自然な秩序がないため、他の多くのマトリックスを作成できます（示されている例を含む）。これにより、はるかに明確になります。 このシナリオでは、カテゴリの並べ替えにより、データの表示が大幅に改善されました。

心理学はデータの視覚化と何の関係がありますか？

視覚とは、私たちの環境を見て、解釈し、整理する能力です。 データの視覚化は、人間の脳の自然な能力を利用するため、非常に効果的です。 それは速くて効率的です。

影響力のあるアメリカの数学者で理論統計学者のジョン・テューキーは、次のように述べています。

大脳皮質によって処理される認知は、はるかに遅く、情報を処理するためにより多くの労力を必要とします。 データを提示することは、私たちの知覚を視覚的に加速し、認知的負荷を軽減するのに役立ちます。

以下の例では、表から正確な数値を確認できます。 しかし、再生可能な水資源の最高値と最低値をすぐに思い付くことができるでしょうか。 簡単ではありませんが、右側の棒グラフに視覚的に表示すると、同じデータがはるかに明確で理解しやすくなります。

他の感覚と比較した視覚の支配的な影響は、デンマークの物理学者TorNorretrandersによる例で適切に示されています。 彼は、人間の感覚の能力を標準的なコンピューターのスループットに変換することにより、視覚の力を実証しました。 Sightは、コンピュータネットワークと同じ帯域幅を持っているため、最上位になります。 そのチャネル容量は、触覚の10倍、聴覚や嗅覚の100倍です。 右下隅の小さな四角は、私たちが感覚体験を認知的に認識している場所です。

事前注意処理

視覚処理が感覚入力を支配するだけでなく、データの量と処理速度は、私たちが認識しているよりもはるかに高速です。 この現象は「事前注意処理」として知られています。 それは潜在意識で速いです。 目が伝達し、脳が視覚刺激の注意深い特性を処理するのに200〜500ミリ秒かかります（これは、脳がスプレッドシートデータを処理する方法よりもはるかに高速です）。

「事前注意処理は、環境からの情報の潜在意識の蓄積です。 利用可能なすべての情報は、事前に注意深く処理されます。 次に、脳は重要なものをフィルタリングして処理します。 意識的な（注意深い）処理によるさらに完全な分析のために、最も顕著性（最も目立つ刺激）または人が考えていることに関連性のある情報が選択されます。」 –ウィキペディアから

事前の注意深い処理は、その巧みな展開により、人々が何がより迅速に提示されるかを理解できるため、設計者にとって恩恵です。 非常に有能な設計者は、データの視覚化を表示している人が、意識的な処理を軽減し、メモリの負荷を軽減するため、より多くの情報をより速く、より少ない労力で吸収できるように支援できます。

事前注意処理の利点：

• 高速/自動
• 感情の
• インパルス/ドライブ
• 習慣
• 信念
• ステレオタイプ
• 潜在意識

多くの視覚的変数は、注意深い反応を引き起こします。 どの視覚要素が自動的に強調されるかを学習し、それらをダッシュ​​ボードに組み込むことで、データのストーリーを効果的に伝える視覚化を設計できます。

視覚変数

ジャック・ベルタンによって導入された視覚変数は、人間の目で認識される要素間の違いです。 長い間研究されてきたこれらの変数は、人間の脳が視覚情報を処理およびナビゲートする方法を理解するための手段を提供します。 「網膜変数」の元のセットは、位置、サイズ、形状、値、色相、向き、およびテクスチャの7つの変数で構成されていました。

以下のグラフは、Bertinによると、質的または量的な違いを示すのに役立つ視覚変数の例を示しています。 また、ポイント、ライン、またはエリアを介して属性を表示する方法も示しています。

WilliamClevelandとRobertMcGillによる1984年の研究では、人間の脳がそれらの違いをどれだけ簡単に検出できるかに基づいて、2つの形状が持つことができる最も一般的な側面をランク付けしました。 彼らは、次の視覚的特徴を最も正確なものから最も正確でないものの順に並べました。

共通のスケールに沿った位置

共通の空間参照系を共有しているため、位置は、空間内の要素に関して認識および評価するのに最も簡単な機能です。

例：棒グラフ、散布図

位置合わせされていない同一のスケールに沿った位置

位置合わせされていなくても、同じ軸で繰り返される別々のスケールを簡単に比較できます。 パネルチャート、または「小さな倍数」は、この良い例です。 結果は、すべて同じ視覚形式に従いますが、異なるデータセットを表示するグラフのグリッドです。 単一の大きなグラフと比較すると、プロットされたアイテムが多すぎるためにデータが不明瞭になったり隠されたりする可能性がある場合、小さな倍数はオーバープロットに役立ちます。

例：小さな倍数（別名Rellis、Lattice、Grid、およびPanelチャート）

長さ

要素の長さは、要素が表すデータ値に合わせてスケーリングできるため、長さは定量的な情報を効果的に表すことができます。 人間の脳は、オブジェクトが整列していなくても、比率を簡単に認識して長さを評価します。

例：棒グラフ

方向

方向は人間の目で簡単に認識できます。 たとえば、折れ線グラフや傾向グラフを使用して、時間の経過とともに変化するデータを表示できます。

例：トレンドチャート

角度

角度は、釣り合いの感覚を提供することによって比較を行うのに役立ちます。 研究によると、角度は長さや位置よりも評価が難しいことがわかっています。 ただし、全体に3つ以上の部分がない限り、円グラフは積み上げ棒グラフと同じくらい効率的です。

例：円グラフ

領域

領域の相対的な大きさは、線の長さと比較するのが困難です。 2番目の方向では、処理と解釈にさらに多くの労力が必要です。

例：バブルチャート

音量

ボリュームとは、2次元空間での3Dオブジェクトの使用を指し、評価が非常に困難になります。 ただし、研究によると、同じ次元の2つの形状を比較すると、3Dオブジェクトをより正確に知覚できることが示唆されています。

例：3D棒グラフ

彩度

彩度とは、単一の色相の強度を指します。 色の強度の増加は、値の増加の数として直感的に認識できます。 ただし、結果を正確に評価することは困難です。

例：ヒートマップ

視覚的な変数のランク付けを理解することは、説得力のあるデータの視覚化を作成するために不可欠です。 ただし、設計者が棒グラフと散布図に制限する必要があるという意味ではありません。 ClevelandとMcGillは、「順序付けによって、データを表示するための正確な処方箋が得られるのではなく、作業を行うためのフレームワークになります」と述べています。

色

ウィリアム・クリーブランドによれば、彩度と陰影は、パターンと動作​​の知覚に関して最も精度が低くなります。 それでも、色は、データを表示するときに意味と明確さを伝えるために、データ視覚化デザイナーにとって強力なツールになる可能性があります。 ただし、設計者は、色がどのように機能し、何がうまく機能し、何がうまく機能しないかを理解することが重要です。

コンテキストの色

私たちの色の知覚は、文脈、色、および周囲のオブジェクトとのコントラストに依存します。

その好例は、立命館大学心理学部の北岡明佳教授が、灰色の紙を黒から白のグラデーションでスライドさせる実験です。 紙は左右に動くと色が変わるように見えます。 それぞれの瞬間に、さまざまなグレーの色合いが色を囲んでいるため、色の認識が異なります。 以下のビデオを参照してください。

彼の記事「チャートで色を使用するための実用的なルール」で、StephenFewはこれらの観察からいくつかの実用的なルールを導き出します。

1. 表またはグラフ内の同じ色の異なるオブジェクトを同じように見せたい場合は、背景（それらを囲む色）が一貫していることを確認してください。
2. 表やグラフのオブジェクトを見やすくしたい場合は、オブジェクトと十分に対照的な背景色を使用してください。

色は物語を語る

色は単なる装飾ではありません。 意味のある戦略的に使用するのが最適です。 色は、ストーリーを伝え、提示されたデータセットの目的を伝えるのに役立ちます。 ことわざにあるように、「少ないほど多い」。

対照的な色は、認知的負荷を軽減するために、データの意味の違いにのみ適用する必要があります。 色は、視覚化の主要な要素を強調することもできます。

色がなくても、良いチャートの効果が低下することはありません。 グレーは構想段階の良い出発点であり、焦点が特定されると、色の適用によってそれらの部分が強調されます。

カラーパレットを定義する

データ視覚化デザイナーが適用する色のセットは、データの意味を完全に変えることができます。 多くのツールは、データの性質に応じて、意味のあるカラーパレットを選択するのに役立ちます。 ここにいくつかあります：

• ColorBrewer。 パレットは3つのタイプに分けられます：
  • カテゴリカル（アイテムを個別のグループに分けるために使用）
  • シーケンシャル（量的な違いをエンコードするために使用）
  • 発散
• Vizパレット。 Viz Paletteは、アクセシビリティ、色覚異常の設計、および知覚的に等間隔の色合いを処理します。 さまざまな状況で同じように見える可能性のある色合いを識別する「カラーレポート」が含まれています。

ゲシュタルト原理をデータの視覚化に適用する

知覚のゲシュタルト原理は、視覚情報を理解しようとするときに、脳が共通の特徴に基づいて要素をどのように編成するかを明らかにするのに役立ちます。 ゲシュタルト理論は、人間の脳が、一連の異なる要素だけでなく、全体を作成する組織化されたシステムにパーツを無意識に配置することによって、多くの要素で構成される複雑な画像やデザインを単純化して組織化しようとするという考えに基づいています。

類似性

類似性の原則は、私たちの心が共有された視覚的特性を持つ要素を「類似」として自動的にグループ化することを示しています。 同様の色、同様の形状、同様のサイズ、および同様の向きがグループとして認識されます。 この原理は、以下のチャートに示されています。

左側のグラフのバーの色が異なるのとは対照的に、右側のバーは同じ青です。 変数（コスト/収益）が1つしかないことを考えると、これは理にかなっています。 バーを同じ色にすることで、データを理解しやすくなり、左側の異なる色の使用によって引き起こされる追加の認知的負担を取り除くことができます。

近接性

人間の目は要素が互いにどれだけ近いかに基づいて要素が関連していると認識するため、近接性は類似性よりも効果的です。

下のグラフでは、国別の売上高を4分の3で比較することを目的としています。 各国の売上高は近接しているため、四半期内で比較するのは簡単ですが、国別の売上高を分析するのは困難です。

改訂されたチャートはそれをより明確に伝えています。 この場合、情報は視覚化の目標に焦点を合わせるために優先されます。これは、主要なデータポイントを互いに近づけるためです。

囲い

1992年にPalmerによって導入された共通領域の原則は、境界が明確に定義された要素の囲い込みが、共通領域を共有している場合にグループとして認識される傾向があることを示しています。

以下の例では、灰色の領域内の3つのバーがグループの一部であるように見えます。 この手法は、視聴者がチャート内のオブジェクトのグループに集中するのに役立ちます。

結論

人間の知覚と認知プロセスの重要な要素を理解することは、優れたデータ視覚化を設計する上で不可欠な部分です。 B2Bダッシュボードや金融アプリなど、データの視覚化が必要な製品に取り組む場合、設計者は人間の脳の視覚プロセスと基本的なデータ視覚化の設計原則に注意する必要があります。

視覚のよく知られたゲシュタルト原理に精通していることは、設計者にとって大きなメリットであり、脳が複雑な画像をパターンに変換する方法を理解するのに役立ちます。 これらの原則に留意することは、データの視覚化を考案し、より効果的なグラフを設計するときに、より明確な視覚的階層を実現するためのプロセスにおいて価値があります。

さらに、事前に注意を払った処理と視覚的な変数、および色の正しい適用を認識することで、設計者はより効果的なデータの視覚化を作成できるようになります。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• 最高のデータ視覚化ツールの完全な概要
• データの視覚化–ベストプラクティスと基盤
• トップデータ視覚化の例とダッシュボードのデザイン
• ダッシュボードの設計-考慮事項とベストプラクティス
• COVID-19：究極のデザイン思考のユースケース