5.10 データ可視化デザイン

概要と動機

グラフは、インクでできた議論です。データをプロットするとき、読み手が最初に何に気づき、何を比較し、先に進む前の2秒間にどんな結論に至るかを選んでいます。うまく行えば、難しい問いが自ら答えます。傾向は明白で、外れ値は飛び出し、二つのグループははっきり違う。下手に行えば、同じデータが誤導し、混乱させ、あるいは単に退屈させ、それが知らせるはずだった決定は、勘で下されます。データ可視化とは、数字を、人々がその数字の意味を見られる絵に変える、デザインの技芸です。

本章は、その技芸についてです。正しいグラフを選ぶこと、データを誠実にエンコードすること、目が行くべき所に着地するよう色とレイアウトを使うこと、そして全体をアクセシブルに保つこと。グラフはインターフェースであり、部の残りのすべてを引き継ぐので、第5部の中に位置します。5.1章のユーザーエクスペリエンス(UX)の基礎の上に築かれ、5.2章のデザインシステムからトークンとコンポーネントを借り、5.3章のアクセシビリティの義務を満たさなければならず、5.4章のコンテンツデザインの平易で目的のある声で語ります。意図して配管には立ち入りません。分析とビジネスインテリジェンスのデータパイプライン、ウェアハウス、レポーティングツール(7.3章)は別の主題で、7.5章のより広い意思決定科学とデータ文化もそうです。ここでは、データがどこから来ようと、絵を良いものにする方法を学びます。

大きなチームにとって、賭け金は調整と信頼です。すべてのスクワッドが自分のグラフをスタイル付けすると、会社は「時間にわたる収益」の五十の方言を抱え、それぞれ異なる軸、色、丸めを持ち、経営陣はそのすべてを信頼しなくなります。企業の設定では、誤解を招くダッシュボードは、本物の予算を間違った方向に動かします。政府では、公開されたグラフは市民とのコミュニケーションの行為であり、10.16章の利害関係者コミュニケーションの問題です。公衆衛生のグラフィックの切り詰められた軸は、何百万人もの人々を動揺させたり、偽りに安心させたりしえ、アクセシビリティは好みではなく法的義務です。良い可視化のデザインは、データが信じられる権利を得る方法です。

主要原則

読み手が持つ問いから始め、それに答えるグラフを選びます。
視覚的なエンコーディングをデータの種類に合わせます。正確な比較には位置、カテゴリーには色相。
データを運ぶインクの割合を最大化します。何も運ばない装飾は削除します。
目が最初にその点に着地するよう、前注意属性を意図して使います。
データの役割(連続、発散、カテゴリー)でパレットを選び、色覚に配慮して保ちます。
色だけに頼らないこと。テキスト、構造、表のフォールバックを提供します。
スケールについて真実を語ります。切り詰められた軸、誤解を招く面積、理由のない二重軸はなし。
洞察に注記を付けます。読み手に探させてはいけません。

推奨事項

問いから始め、それからグラフを選ぶ

すべての良いグラフは、データセットではなく、問いから始まります。グラフの種類に手を伸ばす前に、読み手の問いを一文で名指しし、それからタスクに対応づけます。比較(「どちらが大きいか」)には、長さが共通の基準線に置かれ、目が苦もなく順位をつけられる棒グラフ。時間にわたる傾向(「どちらに向かっているか」)には、つながった線が連続的な変化として読めるので、折れ線グラフ。分布(「どう広がっているか」)には、形、中心、外れ値を示すヒストグラムや箱ひげ図。全体に対する部分(「各部分はどんな割合か」)は、人々が角度よりはるかに正確に長さを比較するので、通常、円グラフより積み上げ棒グラフのほうがよく仕えます。円グラフは、分割が話のすべてである二、三切れのために取っておきます。関係(「この二つは一緒に動くか」)には、相関とクラスターを一目で明らかにする唯一のグラフである散布図。

規律は、問いにグラフを選ばせることであり、決して逆ではありません。印象的に見えるから選ばれたグラフの種類(3Dの分解された円グラフ、レーダーチャート、穴に数字のあるドーナツ)は、読み手ではなく、デザイナーの利益のために下された決定です。表のほうが問いに速く答えるとき(四行の正確な数字を必要とする読み手に、グラフはまったく要りません)、表を使います。グラフが正当化されるのは、絵が、格子の上の数字が隠すパターンを明らかにするときだけです。

視覚的なエンコーディングをデータに合わせる

グラフは、データを視覚的な性質に対応づけることで機能し、それらの性質は等しくありません。何十年もの知覚の研究がそれらに順位をつけています。共通のスケール上の位置は、人間が持つ最も正確なチャネルで、だから共有の軸上の棒と点が、比較ではほかのすべてに勝ります。長さが次、それから角度と傾き、面積、色の濃さ、そして最後に色相で、量を判断するにはほとんど役に立ちませんが、カテゴリーのラベル付けには優れています。最も正確なチャネルを、最も重要な量に使います。

チャネルをデータの種類にも合わせます。量的データ(件数、金額、期間)は、位置、長さ、連続した色のランプに属します。順序データ(小、中、大)は、順序のあるサイズや明暗のランプを使えます。カテゴリーデータ(地域、製品ライン、政党)は、色相や形に属し、あるカテゴリーが別のカテゴリーより「多い」ことを示唆するサイズには決して置きません。古典的な間違いは、カテゴリーを虹色でエンコードし、読み手の目がデータにない順序を発明してしまうことです。量が読まれる所には量を、アイデンティティが読まれる所にはアイデンティティをエンコードします。

グラフィカルな卓越を追求する: データインクを最大化する

エドワード・タフテは、可視化に最も明確なデザインの倫理を与え、それは内面化する価値があります。彼の中心的な尺度はデータインク比です。ページ上のすべてのインク(あるいはピクセル)のうち、実際にデータをエンコードする割合はどれだけか。それ以外のすべて(重いグリッド線、囲み枠、ドロップシャドウ、背景の塗り、冗長な凡例、装飾的な3D)は、読み手の注意への税です。タフテはこの装飾をチャートジャンクと呼び、指示は率直です。消せ。グリッド線を囁くほど薄くし、グラフの枠を外し、凡例まで目を移させる代わりにデータに直接ラベルを付け、データがほぼ単独で立つようにします。グラフが完成するのは、加えるものが何も残っていないときではなく、意味を失わずに取り除けるものが何も残っていないときです。

タフテの一つの考えは、チームのために特に言及する価値があります。スモールマルチプルです。八つの系列を一つの絡まった折れ線グラフに詰め込む代わりに、同じ軸とスケールで、系列ごとに一つずつ、八つの小さなグラフを格子に描きます。すべてのパネルが直接比較可能なので、目は格子をスキャンして、外れたものを即座に見つけます。スモールマルチプルは、「読むには線が多すぎる」を「ざっと見られるページ」に変え、一つの過負荷なプロットに色と凡例の項目を積み上げるよりはるかによくスケールします。

前注意属性と視覚的な階層を使う

いくつかの視覚的な違いは、意識的な注意の前、ほんの一瞬で、読み手がそれを「探して」いなくても登録されます。これらの前注意属性(灰色の点の中の一つの赤い点、一つの長い棒、空間で離された一つの項目)は、目を導く最も強力な道具です。意図して使ってください。グラフの要点が、一つの地域が遅れをとっていることなら、その地域に色を付け、残りを灰色にします。読み手はタイトルを読む前にメッセージを見ます。すべてが明るく太いなら、何も際立ちません。コントラストは相対的で、強調だらけのページはノイズだらけのページだからです。

これは、データに適用された視覚的な階層です。読み手が最初に気づくべき一つのことを決め、最も強いシグナルをそこに使います。タイトルと注記が、言葉で要点を述べます。色と太さが証拠を指します。支える他のすべて(軸、グリッド線、二次的な系列)は、前景が語れるよう灰色に退きます。階層のないグラフは、読み手に、何が重要かを見極めるデザイナーの仕事をさせます。

役割で色を選び、色覚に配慮して保つ

色は最も誤用されるチャネルなので、三つのファミリーを持つシステムとして扱ってください。連続パレットは一つの色相で明から暗に進み、低から高に及ぶ量(人口密度、収益)をエンコードします。発散パレットは、中立の中点で出会う二つの色相を持ち、中心からの逸脱(気温の偏差、ゼロを中心とした損益、中立を中心とした調査の同意)をエンコードします。カテゴリーパレットは、順序のないグループにラベルを付けるための、異なる色相の集合です。それ以上では読み手が区別できなくなるので、おおよそ七色に留めます。誤ったファミリーを選ぶこと(量にカテゴリーの虹色、順序のないカテゴリーに連続のランプ)は、読み手の知覚と戦います。

それからアクセシブルにします。男性のおよそ12人に1人が何らかの形の色覚の特性を持つからです。赤と緑は古典的な罠です。赤が悪い、緑が良いのグラフは、最も一般的な特性の人には見えません。色覚に配慮したパレット(青からオレンジの発散スキームと、ColorBrewerのようなツールのよくテストされたカテゴリーのセットは、安全な出発点です)を選び、出荷前に一般的な特性をシミュレートして検証します。テキストとマークが5.3章のアクセシビリティ標準が求める比率を満たすよう、コントラストもチェックします。色は、それなしでも生き残るメッセージを補強するべきです。

色だけに頼らず、代替を提供する

データ可視化におけるアクセシビリティは、パレットの選択を超えます。ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)の中核のルールは、色が情報を伝える唯一の方法であってはならないということです。したがって、色を第二の手がかりと組み合わせます。直接のラベル、散布図の異なる形やマーカー、折れ線グラフの異なる線種(実線、破線)、重要な棒のテキストのラベル。あなたの色相を区別できない読み手でも、冗長なエンコーディングからメッセージの全体を得られるべきです。

本物のテキストの代替とフォールバックを提供します。グラフの画像には、「売上のグラフ」ではなく要点を述べる代替テキストと、傾向を名指しするより長い説明やキャプションが必要です。実用的な所では、基になるデータをアクセシブルな表として提供し、スクリーンリーダーのユーザーと表計算志向のアナリストの両方が数字を直接得られるようにします。これは、5.2章の「コンポーネントで一度解決する」規律に呼応します。適切なロール、対話的な要素のキーボードフォーカス、組み込みの表ビューを備えたアクセシブルなグラフのコンポーネントを築き、すべてのチームがダッシュボードごとに再発明するのではなく、アクセシビリティを引き継げるようにします。

探索、説明、監視のどれかを知る

グラフは三つの異なる仕事に仕え、それらを混同すると悪い仕事を生みます。探索的な可視化はあなた、アナリスト自身のためで、データの中から面白いものを探します。聴衆は反復する一人の専門家なので、速く、密で、醜くてよい。説明的な可視化は聴衆のためで、すでに理解した特定の発見を伝えます。意図的で、注記があり、単一のメッセージに削ぎ落とされ、10.16章のストーリーテリングに属します。ダッシュボードは三つ目のものです。既知の指標を時間にわたって監視する、持続的で一目でわかる表示で、一回限りの議論ではなく「今何かおかしいか」に最適化されています。

デザインを仕事に合わせます。見出しと強調された一つの系列を備えた説明的なグラフは、読み手が多くの指標を一目で、そして目がレイアウトを学べる一貫した配置で必要とする、監視のダッシュボードには間違っています。語りの注記を詰め込まれたダッシュボードは、毎朝チェックするには疲れます。そして生のプロットだらけの探索的なノートブックを、説明であるかのように経営陣に渡してはいけません。まず仕事を決めてください。デザインはそれに従います。

決して誤導しない: 誠実なスケール、誠実な面積

信頼を破壊する最も速い方法は、真実に見えながら嘘をつくグラフです。最もよくある嘘は、切り詰められた軸です。棒グラフのy軸を0ではなく90から始めると、棒の長さがもはや値に対応しなくなるため、2パーセントの差が崖になります。棒は常にゼロから始まらなければなりません。大きさではなく変化をエンコードする折れ線グラフは、はっきりラベルを付ければ、非ゼロの基準線を使ってよい。二つ目の罠は二重軸です。一つのグラフに二つのy軸のスケールを置くと、スケールをずらして好きな相関を作り出せ、読み手がそれに気づくことはまれです。代わりに、揃えた二つのグラフか指数化したビューを好みます。三つ目は誤解を招く面積です。値を表すアイコンやバブルを幅と高さの両方で拡大縮小すると、面積は二乗で増え、差を大きく誇張します。辺の長さではなく、面積でスケールしてください。

これらを、スタイルの好みではなく、誠実さのルールとして扱ってください。グラフは、読み手に信頼してほしいと頼んでいる主張であり、これらの歪みのそれぞれが、知覚の仕組みを悪用して、小さなものを大きく、あるいは無関係なものを関連して見せます。以下の政府と企業の事例は、聴衆が公衆や取締役会であるとき、その裏切りがどれほど高価になるかを示しています。

洞察に注記を付け、対話性は抑制して加える

読み手に要点を見つけさせるグラフは、半分しか終わっていません。注記を付けます。トピック(「時間にわたる登録」)ではなく発見を述べるタイトル(「3月のローンチ後に登録が倍増」)、重要なイベントへの吹き出し、目標や平均の基準線。注記は、5.4章のデザインが絵と出会う所です。言葉が議論を運び、マークが証拠を提供します。

対話性は、本物のフォローアップの問いに答えるときにだけ、その場所を得ます。正確な値のツールチップ、セグメントへの絞り込み、詳細へのドリルダウンは、読み手に、静的なグラフが保持できない次の問いがあるときに役立ちます。しかし対話性はコストです。ホバーの後ろに情報を隠し、タッチとキーボードのユーザーでは失敗し、パフォーマンスを這うように遅くしえます。ウェブでは、5.6章の描画の予算に注意してください。数万のポイントには、数万の個別のドキュメント要素ではなく、キャンバスか集計されたビューが向いています。既定の静的なビューが中核の話全体を語るようにし、対話にその下の深さを明らかにさせます。

トレードオフ: 長所と短所

決定	長所	短所
プロダクトで可視化を築く	デザイン、アクセシビリティ、対話の完全な制御	エンジニアリングの時間がかかる。パフォーマンスと保守を自分で持つ
BIツールのグラフを使う	速く、安く、ウェアハウスにつながっている	汎用的な見た目。限られたアクセシビリティと注記の制御
対話的なグラフ	フォローアップの問いに答える。その場で探索する	より遅く、アクセシブルにしにくく、印刷とタッチで失敗する
静的なグラフ	速く、アクセシブルで、印刷に適し、曖昧でない	読み手の次の問いに答えられない
ダッシュボード	多くの既知の指標を一目で監視できる	一回限りの議論には貧しい。指標の乱立を誘う
説明的なグラフ	一つのメッセージを力強く届ける	監視や自由な探索には間違い
豊かな色と効果	目を引く。洗練されて感じられる	チャートジャンク。データインク比とアクセシビリティを損なう

繰り返される緊張は、表現力対誠実さと明晰さです。グラフをより豊かにするあらゆる機能(第二の軸、色のグラデーション、3Dの遠近法、アニメーション)は、誤導したり要点を埋めたりする方法も加えます。少ないことを既定にして解決してください。問いに答える最も単純なグラフを、最少の色で、真実を語るスケールで。特定の読み手の問いが求めるときにだけ表現力を加え、アクセシビリティとパフォーマンスのコストを承知のうえで払います。もう一つの変わらないトレードオフは、作るか買うかです。BIツールは数分で画面にグラフを出し、社内の監視には正しい選択です。顧客向けのプロダクトに埋め込まれる可視化は、通常、専用に作られたコンポーネントだけが与えるデザイン、アクセシビリティ、パフォーマンスの制御を必要とします。

チームで議論すべき問い

グラフは一つの視覚言語を共有していますか。それとも、すべてのチームが独自のものを発明していますか。 各スクワッドが独自の色、軸の慣習、丸め、グラフの種類を選ぶと、組織は信頼を静かに損なう方言を蓄積します。異なるスケールと異なる緑で「アクティブユーザー」を示す二つのダッシュボードは、データが頼れないことを経営陣に教えます。三つのチームからの同じ指標のグラフを三つ持ち込み、並べてください。見つかるギャップ(ここでは切り詰められた軸、そこではカテゴリーの虹、一方は千単位、他方は百万単位の収益)は、合意されたパレット、既定の軸のルール、組み込みのアクセシビリティを備え、5.2章のデザインシステムのように統治される、共有のグラフのコンポーネントライブラリの論拠です。目標は、会社のどのグラフも一目で正しく読めることです。文法が共有されているからです。
最も重要なグラフは、色覚に特性のある読み手とスクリーンリーダーに耐えますか。 データ可視化のアクセシビリティは、グラフが作った人々にはまだ問題なく見えるので、飛ばしやすく、それがまさに罠です。リーダーシップが最もよく見る三つのグラフを取り、色覚のシミュレーターにかけ、それから画面を消して、代替テキストと表のフォールバックだけで理解してみてください。赤と緑の状態のグラフが平坦になる、代替テキストが「グラフ」としか言わない、マウスなしで基になる数字に到達する方法がない、といった場合、現在排除している読み手のグループが見つかったことになり、公共部門の仕事では、それは5.3章の標準のもとでの法的な露出です。誰がそれを直すか、一度で解決されるよう、その修正が共有のコンポーネントに属するかを決めてください。
決定を駆動する各グラフについて、それが答える問いを指し示し、誤導しないことを確認できますか。 多くのグラフは、生きた問いに答えるからではなく、誰かがかつて作ったから存在し、最もよく見られるもののいくつかは、誰も気づかずにスケールを歪めています。主要なダッシュボードのグラフをたどり、それぞれについて、それが知らせる決定を名指しし、その誠実さをチェックしてください。棒はゼロから、理由のない二重軸なし、面積は誠実にスケール、トピックではなく発見を述べるタイトル。現在の問いに答えないグラフは削除の候補で、誤導するものは緊急の修復の候補です。差を静かに誇張するグラフは、グラフがないよりも悪いからです。これは7.5章の意思決定の文化に直接つながります。グラフを信頼するチームは、より速く、より根拠のある判断を下します。
チームがグラフを必要とするとき、最初にBIツールの組み込みのグラフに手を伸ばすか、統治されたコンポーネントライブラリに手を伸ばすか、そして誰がどちらかを決めますか。 BIツールへの引力は本物です。速く、安く、すでにウェアハウスに配線されているので、ほとんどの監視のダッシュボードはそこに属します。しかしその汎用的な既定は、方言とチャートジャンクが忍び込む所で、そのアクセシビリティと注記の制御は通常弱く、それは評判を運ぶ顧客向けと公共のグラフで最も重要です。大きな組織では、危険は既定が決して決まらないことで、各チームが最も楽なものに流れ、資産群が断片化します。グラフが今日実際にどこで作られているかの目録、BIツールと専用に作られたコンポーネントの並べた例を少し、それぞれのアクセシビリティのギャップを持ち込んでください。企業と政府の設定では、調達の現実を織り込んでください。一つのBIプラットフォームに何年も縛られることが多いので、契約の後ではなく前に、どのグラフを誠実にアクセシブルに描画でき、どれが統治されたコンポーネントを要するかを正確に知っておいてください。
外部あるいは経営陣の聴衆にグラフを公開できるのは誰で、その前にどんなレビューを通りますか。 セルフサービスの分析は本物の利点ですが、誤解を招くグラフが、第二の目なしに取締役会や公衆に届きうることを意味し、公開されたグラフィックの切り詰められた軸やラベルのないスパイクは、防ぐより元に戻すほうがはるかに難しい。緊張は、速度と自律対、誠実さと信頼です。ゲートが厳しすぎると人々は回避し、緩すぎると、市場や支持者を動揺させるグラフを出荷します。最も目立つグラフの現在の公開経路、レビューなしに外部の聴衆に届いた例、方法と不確かさがグラフ自体に注記されているかの証拠を持ち込んでください。公共部門と規制対象の仕事では、これは切実です。公式統計は市民とのコミュニケーションであり、10.16章の利害関係者の信頼の問題なので、誰が承認し、どんな誠実さとアクセシビリティのチェックリストを適用し、グラフが誤導したとき責任がどこにあるかを名指ししてください。
対話性をどこに加えていて、既定の静的なビューは、マウスなしでもまだ話全体を語っていますか。 対話性は魅惑的で高価です。ホバーの後ろに値を隠し、タッチとキーボードのユーザーでは壊れ、5.6章が警告するように、大きなデータセットで描画の予算を這うように遅くしえます。相反する考慮は、本物のフォローアップの問い(正確な値、ドリルダウン、絞り込んだセグメント)が、ときにコストに見合うことなので、目的は禁止ではなく抑制です。出荷している対話的なグラフの一覧、それぞれをマウスなしとスマートフォンで試した結果、データが数万のポイントに育ったときのパフォーマンスの数字を持ち込んでください。企業と政府の聴衆にとって、アクセシビリティの角度は5.3章の標準のもとでの法的義務であり、グラフはキオスク、印刷物、支援技術で読まれるので、静的で注記のある既定が中核のメッセージを運ばなければならず、対話はその下の深さを加えるだけです。

セクター別の視点

スタートアップ。 速度が勝つので、人員を置けない可視化のコンポーネント群を築くのではなく、BIツールにすでにあるグラフや軽量なグラフライブラリに頼ってください。後で見返りのある一つの安い決定は、初日に色覚に配慮した単一のパレットと、ゼロから始まる棒の習慣を選ぶことで、十人の顧客を得る前に、同じ指標の十数の方言を蓄積しないようにします。アクセシブルにする時間のない対話的なものより、発見を述べる静的で注記のあるグラフを好みます。

小規模事業者。 データの専門家がおらず予算も厳しいので、可視化を、すでに払っているツール、つまり表計算、分析のSaaS、CRMのダッシュボードから得るものとして扱ってください。重要な少数の誠実さのルール(棒はゼロから始まる、量に虹を使わない、九切れの円グラフを使わない)を学び、独自のものを依頼するのではなく、既製の色覚に配慮したパレットを適用します。グラフは築くのではなく買い、注意は正しく読むことのために取っておきます。

大企業。 問題は多くのチームにわたる一貫性なので、可視化をデザインシステムのように統治してください。合意された連続、発散、カテゴリーのパレット、誠実な軸の既定、標準の数値の書式、組み込みのアクセシビリティを備えた、共有のグラフのコンポーネントライブラリ。8.1章のデリバリーのパイプラインで、ビジュアルリグレッションと誠実さのチェックで徹底し、軸を切り詰めたりコントラストに失敗したりするグラフが、出荷前にブロックされるようにします。見返りは、どのチームのグラフも一目で正しく読め、リーダーシップが数字のどのバージョンを信じるべきかを尋ねるのをやめることです。

政府。 すべての公開されたグラフは、コミュニケーションの行為であり、公的な説明責任の対象なので、誠実なスケールとWCAGのアクセシビリティは、好みではなく義務です。ゼロから始まる棒、面積は面積でエンコード、色覚に配慮したパレット、発見を述べる平易な言葉のタイトル、すべてのグラフの隣にダウンロード可能なアクセシブルな表を義務づけてください。方法と不確かさをグラフ自体に注記し、議論を呼ぶ数字が誤解を招く見出しに還元されないようにし、調達するどのBIツールもこれらの標準を満たせることを確認してください。義務はベンダーにかかわらずあなたのものだからです。

事例

スタートアップ。 10人の分析スタートアップは、顧客向けの利用ダッシュボードを出荷します。最初の版はBIツールの既定のテーマを使っていました。カテゴリーの虹色、あらゆる所のグリッド線、誰も読めない九切れの円グラフ。ユーザーは、数字が信頼できないと感じると不満を言います。チームは、小さな色覚に配慮したパレットを持つ埋め込みコンポーネントとして再構築し、円グラフを並べ替えた棒グラフに置き換え、グリッド線を薄くし、凡例が消えるよう直接ラベルを加えます。発見を述べるタイトルを設定し、すべてのグラフに代替テキストと表の切り替えを加えます。顧客がついに一目で読めるようになったので、ダッシュボードのエンゲージメントが上がり、よりきれいなデザインがデモでのセールスポイントになります。

大企業。 多国籍の銀行は、数十のチームが築いた数百の社内ダッシュボードを持ち、それぞれ独自の色と軸の習慣があり、同じ指標がどのスライドでも異なって見えるので、経営陣は日常的にそれらを信頼しません。会社は、BIプラットフォームの上に統治されたグラフのライブラリを導入します。合意された連続、発散、カテゴリーのパレット、棒の軸はゼロから始まるという固いルール、標準の数値の書式、すべてのコンポーネントに組み込まれたアクセシビリティ。8.1章のデリバリーのパイプラインのビジュアルリグレッションのチェックが、標準に違反するグラフをブロックします。一年のうちに、どのチームのグラフも一目で正しく読め、リーダーシップは「この数字はどちらのバージョンを信じるべきか」と尋ねるのをやめます。

政府。 国の統計機関は、経済、健康、人口の公開データを発行し、そのグラフは、基になる数字を検証できないジャーナリスト、政策立案者、市民に読まれます。機関はすべてのグラフを、公衆とのコミュニケーションであり、10.16章の利害関係者の信頼の問題として扱います。誠実なスケール(ゼロから始まる棒、誤解を招く二重軸なし、面積は面積でエンコード)、地域比較のための色覚に配慮した発散パレット、発見を述べる平易な言葉のタイトル、WCAGを満たすためにすべてのグラフの隣にダウンロード可能なアクセシブルな表を義務づけます。議論を呼ぶ数字が公開されるとき、注記がグラフ自体に方法と不確かさを説明するので、切り詰められた軸やラベルのないスパイクが、公衆の信頼を損なう誤解を招く見出しになることは決してありません。

ビジネスケース: 動機、ROI、TCO

良い可視化のデザインの見返りは、より速くより良い決定と、より少ない高価な間違いです。問題を一目で明らかにするダッシュボードは、シグナルから行動までの時間を縮め、真実を語るグラフは、切り詰められた軸が作り出した幻を予算が追うのを防ぎます。これらの利益は請求書に載せにくいですが、本物です。どのグラフを信じるかを議論して費やされたすべてのリーダーシップの会議、読み誤った傾向の上に築かれたすべての戦略、プロダクトの分析が読めなかったために解約するすべての顧客は、明確なデザインが取り除くコストです。銀行の例のように、グラフが本物のお金を駆動する所では、信頼された数字の価値は、それをうまく築くコストをはるかに上回ります。

採用のコストは、ほとんど一度きりで共有されます。合意されたパレット、軸と書式のルール、アクセシビリティの既定を定義し、それからグラフのコンポーネントライブラリに符号化して、チームがダッシュボードごとに再決定するのではなく、それを引き継げるようにします。継続的な所有のコストは本物ですが控えめです。ライブラリの保守、標準が進化するにつれたアクセシブルな状態の維持、一度きりのカスタムグラフの乱立への抵抗。放置のコストは静かに複合します。一貫せず、誤解を招き、アクセシブルでないグラフは、すべてのデータへの信頼を侵食し、規制対象と公共部門の設定で法的リスクを招き、人々を生の表計算に戻し、7.3章の分析スタックへの投資全体を無駄にします。リーダーシップに論拠を示すには、可視化の品質を彼らがすでに追跡している成果に結びつけます。意思決定の速度、レポーティングへの信頼、公共部門ではアクセシビリティのコンプライアンス。

アンチパターンと落とし穴

切り詰められた棒グラフの軸: 小さな差が深い溝に見えるよう、棒をゼロより上から始めること。最もよくあるグラフの嘘。
理由のない二重軸: 一つのグラフに二つのy軸のスケールがあり、著者が見せたい相関を作り出すようにずらすこと。
誤解を招く面積: アイコンやバブルを辺の長さでスケールし、その面積、したがって知覚される値が二乗で増えること。
量に虹色: 順序のある量を順序のないカテゴリーの色相でエンコードし、目が大きさを読めなくなること。
多くの切れの円グラフ: 三切れを超えて、読み手に判断できない角度を比較させること。並べ替えた棒グラフを使います。
チャートジャンク: データインク比を下げて信号を埋める、重いグリッド線、枠、3D、ドロップシャドウ。
唯一の手がかりとしての色: ラベルも形もない赤緑の状態で、色覚に特性のある読み手とスクリーンリーダーには見えないこと。
凡例探し: 線や棒への直接のラベルで足りる所で、遠くの凡例まで往復を強いること。
すべてが強調: すべての系列が太く明るく、コントラストが崩れて何も際立たないこと。
表が勝つ所のグラフ: 読み手が正確に読む必要のある四つの正確な数字のための絵。

成熟度モデル

レベル1、開始: グラフは手近なツールでその場しのぎで作られます。色、軸、書式は作者ごとに異なり、切り詰められた軸とカテゴリーの虹色は一般的で、アクセシビリティは考慮されず、読み手は結果を信頼しません。
レベル2、発展: 一部のチームが基本的な実践を採用しますが、組織全体で一貫しません。ある所では棒がゼロから始まり、明らかなチャートジャンクはレビューで抑えられ、いくつかのチームにはハウスパレットがありますが、廊下の先の別のチームはまだ九切れの円グラフと赤緑の状態のグラフを出荷しています。
レベル3、標準化: 共有のグラフのコンポーネントライブラリが、合意された連続、発散、カテゴリーのパレット、誠実な軸のルール、標準の書式、アクセシビリティ(色覚への配慮、代替テキスト、表のフォールバック)を符号化しています。標準は文書化され組織全体で徹底され、説明的、探索的、ダッシュボードの用途は設計によって区別されます。
レベル4、管理: 可視化の品質が、ベースラインに対して測定され、制御されています。アクセシビリティとグラフの誠実さのチェックがデリバリーのパイプラインで走って合格率を報告し、ゼロから始まる棒、コントラストに適合する色、表のフォールバックを持つグラフの割合が指標として追跡され、理解度は本物の読み手でベースラインに対してテストされ、各主要な指標の分岐した方言の数は、一つに向かう傾向として観察されます。標準に違反するグラフはリリース前に捉えられ、意見ではなく数字が、ライブラリが手入れを必要とする所を駆動します。
レベル5、オーケストレーション: 可視化は継続的に改善され、組織全体に統合されています。標準はアクセシビリティの要件と読み手のニーズが変わるにつれて適応し、パレット、コンポーネント、慣習は測定された証拠から洗練され、注記と語りが標準で、実践は分析と意思決定の文化に織り込まれているので、どのチームのグラフも一目で正しく読め、視覚言語は組織が学ぶにつれて進化します。

議論のためのアイデア

主要なダッシュボードのどのグラフが、軸がゼロから始まれば違って見え、それは話を変えますか。
最も重要なグラフを選んでください。そのメッセージはグレースケールで生き残りますか。そうでないなら、どんな冗長な手がかりが直しますか。
静的で注記のあるグラフのほうが話全体を速く語れる所で、対話的なグラフを使っているのはどこですか。
グラフのタイトルは発見を述べていますか、トピックを述べていますか。そして見出しの数字が静かに逆転したら、誰が気づきますか。
どのグラフが現在の決定に答えず、誰も惜しまずに削除するには何が必要ですか。
チームはいつ、プロダクトで可視化を築くべきか、BIツールを使うべきか。選ぶための書面のルールはありますか。

要点

読み手の問いから始め、それからグラフを選びます。比較には棒、傾向には線、関係には散布図、分布にはヒストグラム、全体に対する部分には円グラフより並べ替えた棒。
エンコーディングをデータに合わせます。位置と長さを最も重要な量に使い、色相はカテゴリーに使い、大きさには決して使いません。
グラフィカルな卓越を追求します。データインク比を最大化し、チャートジャンクを削除し、スモールマルチプルを使い、前注意のコントラストと明確な階層で目を導きます。
色をシステム(連続、発散、カテゴリー)として扱い、色覚に配慮して保ち、色だけに頼らず、ラベル、代替テキスト、表のフォールバックを提供します。
スケールについて真実を語り(棒はゼロから、誠実な面積、理由のない二重軸なし)、洞察に注記を付け、本物のフォローアップの問いが求めるときにだけ対話性を加えます。

参考文献とさらなる読み物

Edward R. Tufte, The Visual Display of Quantitative Information
Edward R. Tufte, Envisioning Information
Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten
Stephen Few, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring
Cole Nussbaumer Knaflic, Storytelling with Data: A Data Visualisation Guide for Business Professionals
Alberto Cairo, The Truthful Art: Data, Charts, and Maps for Communication
Alberto Cairo, How Charts Lie: Getting Smarter about Visual Information
William S. Cleveland, The Elements of Graphing Data
Jacques Bertin, Semiology of Graphics: Diagrams, Networks, Maps
Tamara Munzner, Visualisation Analysis and Design
Cynthia A. Brewer, ColorBrewer: Colour Advice for Cartography (colorbrewer2.org)
World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) 2.2