データによるストーリーテリング

データによるストーリーテリング

今回、サンフランシスコ空港のすぐ近くで開催されたODSCというカンファレンスに参加してきたのですが、その中の一つの講演が、ほぼ「大学生向け文章の書き方の可視化バージョン」といった趣きだったので、興味のある方もいるかと思い、メモを公開します。プログラマの場合も、このあたりの知識があるとデザイナーとの連携もスムーズになるではないでしょうか。さらに言えば、データ・ダッシュボード系のアプリケーション作成の場合、こういった知識を念頭に作れば、そのまま使えるレベルのシンプルなモックを作ることもできると思います。

ポイントは、__（コンピュータを使った）データ表現のためのスキルは、センスや才能ではなく学ぶものである__という点に尽きます。コードを書いて作るタイプの可視化も、Excelで作る各種チャートも根本は同じで、適切にスキルを学んでいれば、手書きの技術に左右されないために、ダイレクトにアウトプットの質を向上できます。

背景

アメリカの大学生は、まず最初に基本的な文章(essay、日本語の_エッセイ_とはニュアンスが異なり、カタカナ英語の_レポート_に意味が近いです)の書き方を、文系理系問わずに教え込まれるのですが、最近はデータもそれを扱うツールも増えてきたため、論文やプレゼンを構成するためのデータの表現の仕方もリテラシーの一部となっています。最近企業などで働く実務者向けのデータ解析や可視化関連のカンファレンスでこの手の話題をする人は多いのですが、今回の方の講演はとてもよくまとまっていると思ったので紹介します。

余談ですが、このあたりのことを多く含む記事を過去に書きましたので、興味のある方はそちらもどうぞ

• プログラマーが効果的な可視化を作成する

Follow the Yellow Brick Road: What the Wizard of Oz Can Teach You about Storytelling with Data

by Cole Nussbaumer

最近出版されたこの本の著者です。基本的にビジネスデータのアナリスト兼、可視化のリテラシー教育を行っている方のようです。

基本的な作業の流れ

今回の講演は、彼女が最近上梓した本のダイジェスト版という感じです。興味のある方は買ってみてはいかがでしょうか。

• storytelling with data

講演の内容は以下のセクションに分かれていました:

• コンテクストの理解
• 可視化技法の選択
• ゴミ(clutter)の除去
• オーディエンスのアテンションを得る
• ストーリーを語る

以下それぞれのポイントに関するメモです。

データのコンテククストの理解

• オーディエンスは誰かを考える
• 彼ら（オーディエンス）はデータから何をしようとしてるか
• どのようにそのデータは何らかの結論に導くのを助けるか

適切な可視化手法の選択

• 複雑な可視化を考える前に
  • シンプルなテキストのみで十分な場合も多い
  • ある重要な一つの数値（例：今期の決算、製品の性能の向上など）を示したいのならば、数字とともに一言「結果はこれです」で済む場合も多い。
• テーブルを利用するかチャートを使うかの選択
  • グラフの例
    • 散布図: 年齢と身長など
    • 折れ線: 映画のトータルの収入の推移
    • Slope graph: 変化のスピードの可視化
    • 棒グラフ
      • よく縦方向にバーを伸ばす傾向があるが、ラベルが自然に配置できるので、横向きに作ったほうがテキストを読みやすく理解しやすい場合が多い。
    • パイチャート
      • カテゴリ数が少ない場合に、割合の表示のみ使う
      • 3Dを使う人は考えを改めましょう
        • 言い換えれば___絶対に使うな___
      • 過剰な装飾を避け、数字とカテゴリのテキストだけにする
      • バーチャートへの変更も考える
        • 同じデータがその方が見やすくなる場合も多い
• どの手法を使って良いかわからない場合は、同一データから複数のものを作成し、他人からフィードバックを得る
  • これがコンピュータベースの場合の強み
  • 同じデータから複数の可視化手法を試すのが比較的容易
  • 例：　マルチバーグラフからマルチライングラフへ　（手法の変更により、変化に主眼があることを強調）

適切なディスプレイ手法の選択

• 最終的に表示された時に効果的になるような色の選択

余計なもの(Clutter)の除去

ゲシュタルトと人間の知覚に関する理論を理解する

以下の要素の調整について、漫然と行うのではなく、各パラメタを意図をもって使う

• proximity
  • 配置
• similarity
• enclosure
  • 囲いなどでグループを表す
• closure
  • バックグラウンドカラーによる指示など（カーソル）
• continuity
  • 見えないラインを見えるようにする（揃えることにより）
• connection

カテゴリに対するマッピングが多すぎることの危険性

• 人の知覚能力の限界を知る
• 要素が多すぎると必要なものが見つからない
  • 例：　コントラストの戦略的な利用
  • 多色の代わりにコントラストの違いを使いポイントを示す

ミニマルな表現にこだわる

• 伝えたいポイント以外の要素を削る
  • 例: 折れ線グラフによる複数の製品の価格変動の表現(時間 vs 価格のシンプルなグラフ)
    • 必要のない小数点があれば消す
    • グリッドの消去
    • マーカー（各時点におけるデータポイント。Excelではデフォルトで表示される）
    • レジェンドの移動（枠外から直接各ラインの横に）

Focus on audience’s attention

• Iconic memory(短期記憶よりさらに短い、人間の近くにおける最小単位のようなもの)を意識する

• 一見しただけで得ることができる情報は限界がある

  • Preventive attributes
    • orientation
    • shape
    • line length
    • line width
    • size
    • curvature
    • added marks
    • enclosure
    • などなど
  • これらを効果的に利用して相手の無意識下の知覚に訴えかける
  • 例：テキスト
    • 太字、フォント、色、サイズなどを利用して重要な部分、そうでない部分を分ける
    • あるいは似たような要素を使いカテゴライズする（同じグループには同じフォントなど）
  • チャートと文章を組み合わせる
    • チャートの各ポイントは文章で表現して、図の中の色とシンクロさせる

• オーディエンスがまずどこに注目するかを常に考える

  • コントラストは適切か？
  • ハイコントラストと多色の併用は、見る人のattentionの分散につながる
  • カラフルすぎることに気をつける
    • 多すぎる色の危険：　人間はあまり大量の色を同時に認識できない
      • 同一チャート内では数色に止めるのが無難

• 色の心理的効果

  • トーンの基本を学ぶ
    • （この辺りは検索すればいくらでも例が出てきます。デザイン系の教科書にも必ず出てきます）
  • 例：ブルーから黒に、グリーンと赤の比較（赤は「危険」を表す、など）
  • 文化における色の意味合いの違いを可視化したもの: Colours in Culture
    • http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
    • 文化における違いを理解する

Tell a Story

• 基本的な概念/テクニックの重要性
  • 高校や大学で学ぶ基本的な論文の構造
    • イントロ、ボディ（サポーティング・アイデア）、結論
    • データ可視化でもこの構造を意識する
      • plot, twists, and ending

まとめ

詳細は彼女の本を買ってみてください。ここに書いてあることは、文章にしてみればある意味全て当たり前ですが、意外と実践できていないものです。UI/UX設計の場合も、この辺りの基本的な知識は使えると思うので、それを意識しながらアプリケーション作成をすることは大切だと思います。