直感とビジュアライズ

西田 善彦さん（富士通デザイン株式会社）
Data Visualization Japan meetup #1（2014-09-16）

データビジュアライズにおいて、『直感的』というキーワードをよく耳にすると思います。しかし実際にビジュアライズしてみると、直感的にわかりやすく表現するのは意外と難しかったりします。そういった疑問に対して、『どの表現がどのような直感を与えるのか』をビジュアライズ関連の書籍などを中心に調査することで、分析してみましたのでご紹介します。

Transcript

1. 直感とビジュアライズ 西田善彦
2. 自己紹介 西田善彦 某IT企業でUIデザイナー＆インタラクションデベロッパーとして勤務 ! facebook: yoshihiko.nishida.54 2 /18
3. The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?̲r=0 3 /18
4. こんなことありませんか？ 「うーん、よくわからない、、、」 「かっこいいけど、、」 「で、どういう意味？」 「もっと直感的にしてください。」 4 /18
5. ビジュアライズはデータを直感的に表現するもの 地図 位置情報にマッピングして、地域ごとの特性を把握しやすく ! 2次元のグラフ X軸とY軸に情報を割り振ることでデータの傾向を把握しやすく ! ヒートマップ 色を使ってデータの傾向を把握しやすく etc… 5 /18
6. テック系企業のIPOデータの比較 • X軸：年代 • 円の色：年代 • Y軸：評価額 • 円の大きさ：評価額 The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?̲r=0 6 /18
7. こんなところがわかりにくい（と個人的に思う） • 同じ情報なのに別々の表現 • 年代を表すのに色を使っているが、あまりピンとこない • 透明度に意味はない？ • 評価額の単位が指数関数的なので、面積でわかりやすくしている？ データを表現する方法がもったいない 7 /18
8. 直感的なビジュアライズをするために データや情報には特性がある 量的、質的、連続的、カテゴリ的、LATCH・・・・ ! 表現にも特性がある 形状、大きさ、配置、色相、明度、彩度・・・ ! 表現は感覚と繋がっている 距離が近い＝関係がありそう 距離が遠い＝関係なさそう データを適切な感覚を与える表現とマッチングさせる 8 /18
9. 44の事例を調査 • 書籍やインターネットなどから、表現方法が異なる 44のビジュアライズの事例を収集 • 使われている表現、意味、気付きを分析 9 /18
10. 表現によく割り当てられる情報 次元 点・円 四角 直線 曲線 面 オブジェクト 人 サイト ジャンル 会社 役職 消費量 球 イベント 共作関係 時系列 メール関係 推移 関係 イベント間の 関係 つながり リンク 引用関係 送受信の関係 受信関係 単語 フォルダ 州 位置・配置 大きさ 長さ 太さ 円で均等配 モジュール 置 の量 時系列 影響力 着弾位置 回数 類似度 アクセス数 位置座標 時系列 部門 形状 面積 色相 グループ 分類 速度 滞在時間 人・会社 の分類 支援の強さ 差の度合い 消費量 イベントの類 情報量 似度 彩度・明度 回数 滞在時間 高い/低い 編集者 意見の近さ 送受信の間 共有量 隔 州 包含関係 地形 作業順序 州 10 /18 使用率 容量 編集量 フォルダの 関係 包含関係 当選陣営 作業内容
11. 表現方法が与える直感的な視点と気づき 順番 間隔 位置 距離 密度 遠近 角度 線 面 太さ 長さ 大きさ 高さ 形状 色相 色 傾斜 寒暖 彩度 トーン 明度 明暗 11 /18 連続性がある、ない 序列がある、ない 詰まっている 偏っている 関係がある、ない 近い、遠い 急速、緩やか 関係が強い、弱い 量が多い、少ない 量に差がある、ない 均等、不均等 系列・ジャンル 同じ種類か異なる種類か 高い、低い 熱い、冷たい 濃い、薄い はっきり、ぼんやり 強い、弱い
12. オブジェクトの種類と気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 点・円 四角 人や物体 そのもの 対象となる オブジェクトがある 直線 つながり 時系列 連続性がある/ない 曲線 つながり 連続性がある/ない 面 形状を持ったもの 量を持ったもの 量が多い/少ない 12 /18
13. 点・円・四角のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 位置 座標 類似度 偏り 密/疎 大きさ 数量 影響度 多い/少ない 影響が強い/弱い 13 /18
14. 直線のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 座標 つながり、連続性 長さ 数量 類似度 多い/少ない 影響が強い/弱い 遠い/近い 角度 （点の位置関係？） 急速/緩やか 位置 太さ 関係値 （やりとりの回数など） 14 /18 関係が強い/弱い
15. 曲線のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 位置 座標 遠い／近い 曲率 （ベジェ計算?） 急速/緩やか 大きさ 関係値 （やりとりの回数など） 関係が強い/弱い 15 /18
16. 面のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 形状 カテゴリ 種類が同じ/種類が異なる 面積 数量 容量 多い/少ない 16 /18
17. 色のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 色相 ジャンル 種類が同じ/種類が異なる 明度 数量 包含関係 同系統 有効/無効 彩度 数量 包含関係 同系統 重要である/重要でない グラデー 寒暖 変化 ション 高低 偏り 17 /18
18. 直感的なビジュアライズのポイント • 無作為にビジュアライズしても、わかりにくいものしかできない。 ! • 各表現のプロパティと与える気づきを知ることで、 より直感的にビジュアライズすることができる（はず）。 18 /18
19. ご清聴ありがとうございました。