Google Design データビジュアライゼーションの解説の解説

今年の六月に書かれたSix Principles for Designing Any Chartという記事を読んでみましょう。Material DesignにData Visualizationのガイドラインが追加されましたが、その背景となる記事です。全文訳ではなく、原文を読むためのヒントと勝手な意見、解説、脱線です。参考にして原文も読んでください。

Be honest - 正直であれ

Data accuracy and integrity come first. Don’t distort or confuse the information for embellishment or partiality. Emphasize clarity and transparency.

データの正確さと整合性が一番。加飾のためや部分的だったりすることで情報を歪めない、混乱させない。明快さと透明性に重きをおく。

"Integrity" は人間に対して使うと誠実さとか高潔さ、物事にして使うと完全性、統合性、コンピュータやデータの文脈で使うと整合性といった意味になります。幅広く感じますがIntegrityの語源はラテン語で"wholeness"を意味する言葉、欠けている部分がないイメージですね。Integral（欠かせない）、Integer（整数 - 分数や小数に対して、欠けていない数）もセットにすると面白いです。続く文のpartiality（部分的であること）と呼応しています。

正直ではないグラフも世に溢れています。数学ガールの「グラフのトリック」の章が立ち読みできるので読んでみましょう（そして気に入ったら買いましょう）。

Lend a helping hand - 手助けをしよう

Provide context and help users navigate the data. Build affordances that prioritize data exploration and comparison.

文脈（context）を示してユーザを助けましょう。探索や比較のためのアフォーダンスを設けましょう。アフォーダンスってなんザンス？

Navigateは航海する、操縦する、ですが、そこからあたりの様子を把握してしっかり進むという意味にも使います。He is able to navigate in difficult situationといえばプロジェクトなどの難しい状況でもちゃんと舵取りができるという意味です。

Delight users - ユーザを喜ばそう

Always exceed expectations. Consider performance, polish, surprise, and innovation. Embrace dynamic, fast, and clever experiences.

期待を超える（exceed expectations）。パフォーマンス、洗練、驚き、イノベーション、ダイナミックで速くて賢い（雑）。でも情報を読む邪魔になる装飾は原則その1に反するのでダメです。ちょっとした驚きやうまくコーディネートされた（choreography - 振り付けされた）はユーザを幸せにしたり助けたりできます。

Exceeding expectationは人事評価の文脈でもよく使います。昇進するには、期待される貢献を超えましょう。

Give clarity of focus - 焦点をクリアに

Reduce cognitive load and focus on what matters. Every action, color, and visual element should support data insights and understanding.

認知負荷（cognitive load）を減らして大事なことにフォーカス。全ては本質の発見と理解のために。本文では"data-ink ratio"という言葉が使われてます。情報量に対して使うインクの割合を減らす。できるだけ簡潔に大事なことを伝えましょう。

Embrace scale - スケーラビリティを考よう

Allow the system to extend and adapt to any context. Respect different user needs on data depth, complexity, and modality.

様々な文脈に対応できるようにシステムを作り、データの深さ（詳細さ）、複雑さ、アクセスの方法など異なるニーズに対応しましょう。異なる画面サイズやアクセシビリティに対応したり、インタラクティブに少しずつ情報を提供したり。今時のデータビジュライゼーションはpngを貼って終わりではありません。

Embraceはいつも訳に迷います。抱きしめる、進んで活用する、受け入れる、優しく大事にする感じですね。

Provide structure - 構造を示す

Use visual attributes to convey hierarchy, provide structure, and improve consistency. Experiences should be intuitive and easy to use.

視覚的要素をうまく使い階層や構造を示す。一貫した表現で。静止した状態だけでなく、アニメーションの方向やタイミングなども構造を理解するヒントになります。表現を統一すれば全体を通しての理解の助けになります。

まとめ

いかがでしょうか。Material Designは例が充実している反面、理由や元になる考え方が結構削ぎ落とされていることがあります。この記事のように背景になる補ってくれるとありがたいですね。

蛇足

あちこちで繰り返しますが、ガイドラインは鵜呑みにするのではなく、なぜそうなっているのかを考え、役に立つように取り入れることが大事だと思います。Googleが言っているから、ではなく、納得できる部分、違うと思う部分、自分の仕事に役立つ部分など考えながら読みましょう。

批判的に読んで引っかかりを感じなければ本当に読んだことにならないと大学の時の哲学の教授が言っていました。名前も覚えていませんがそれだけは記憶に残っています。