データビジュアライズの備忘録-Preattentive Attribute-

データのビジュアライズを行う際に覚えておきたいことをまとめます。
今回はPreattentive Attributeです。

Preattentive Attributeとは？

Preattentive Attributeとは、視覚表現を見た際に私たちの脳が無意識的に処理を行う要素のことです。処理はミリセカンドより短い間隔で処理されるので、一般に意識することはありません。

Preattentive attributeの例を見てみましょう。
以下のような数字の羅列について、一見では数値の比較や正負の見分けることは難しいです。

Fig1-1. 数値の羅列

今度はPreattentive attributeの要素である長さを意識してビジュアル化してみみました。同じデータを表示しているのですが、上記の数字の羅列よりも売り上げの大きさがわかりやすいです。なにより、直観的に理解することができます。

Fig1-2. 長さを意識したビジュアライゼーション（棒グラフ）

なぜPreattentive Attributeか？

上述の通り、Preattentive Attributeは無意識的に処理される要素です。そのため、人間の意識からPreattentive Attributeにアプローチするのは難しいでしょう。
一方で、視覚表現に工夫を加えることで、脳が行う処理の負荷を下げることができます。そのためのアプローチがPreattentive Attributeを意識したビジュアライズです。
Preattentive Attributeにはいくつかの要素があります。以下に一例を示します。

1. 色

   1. 色相

   2. 彩度

2. 形

   1. 長さ

   2. マーク

   3. 方向性

   4. 形状

   5. サイズ

   6. 幅

3. 位置

4. 動き（点滅など）

意識したいこと

データ視覚化を考える時に必ず抑えておきたいPreattentive attributeは以下４つの要素です。

• 位置

• 色

• サイズ

• 形状

位置

上記4要素の中で一番印象が強いPreattentive Attributeです。人間の目は他のものと異なる場所に位置するものに注目する傾向があります。数あるグラフの中でも散布図はPreattentive Attributeの位置の力を確かめるのに最も良い例でしょう。散布図を見ると、X軸とY軸がどのような関係にあるのかが一見してわかります。

Fig2-1. 散布図

色

次に影響が大きいPreattentive Attributeは色です。色相をグラフに加えると、各要素がどのような属性をもっているのか一目で把握できるようになります。色相の他にも彩度を変更するのも、Preattentive Attributeの観点から有効です。

Fig2-2. 散布図(色つき)

サイズ

サイズも影響の大きいPreattentive Attributeの要素です。以下のグラフでは売上の規模に応じてマークの大きさを変えています。マークの面積が大きいほど売り上げが大きくなる様子が直観的に理解できますね。

Fig2-3. 散布図(サイズ)

形状

最後のPreattentive Attributeは形状です。それぞれの形状が異なることで、地域やセグメント、グループが異なることを示すことができます。

Fig2-4. 散布図(形状)

まとめ

本記事ではPreattentive Attributeを取り上げました。Preattentive Attributeには様々な要素があります。特に押さえておきたいのは、位置・色・サイズ・形状の4つです。
様々な工夫の積み重ねがわかりやすいデータビジュアライズにつながります。その工夫の最小単位がPreattentive Attributeといってもよいでしょう。小さな工夫を積み重ねてより分かりやすいビジュアライズをめざしていきましょう。

参考

Designin with your brain in mind - Using Pre-attentive attributes/Eilas Nodilinder

データ視覚化のデザイン/永田ゆかり著