Information Dashboard Design / Stephen Fewを読む（後半）

Information Dashboard Design / Stephen Fewを読む（前半）の続きです。

目次の構成（カッコと概要は私の補足です）※おさらい

Introduction（はじめに）
情報の津波を抑えるツールとしてのダッシュボードの重要性。
Chapter 1 — Clarifying the Vision（ビジョンの明確化）
ダッシュボードの定義、歴史と視覚デザインの重要性。
Chapter 2 — Variations in Dashboard Uses and Data（使用法とデータのバリエーション）
戦略的・分析的・業務的ダッシュボードの分類と表示されるデータの性質。
Chapter 3 — Thirteen Common Mistakes in Dashboard Design（ダッシュボードデザインにおける13の一般的な間違い）
13の視覚デザイン上の誤り（画面超過、コンテキスト不足、不適切な表示媒体など）。
Chapter 4 — Tapping into the Power of Visual Perception（視覚の力の活用）
短期記憶の限界、前注意的処理、ゲシュタルトの法則など視覚知覚の応用。
Chapter 5 — Eloquence Through Simplicity（シンプルさによる雄弁さ）
非データピクセルの削減とデータピクセルの強調。
Chapter 6 — Effective Dashboard Display Media（効果的なダッシュボード表示媒体）
用途に応じた表示媒体の選択と設計。
Chapter 7 — Designing Dashboards for Usability（ユーザビリティのためのダッシュボード設計）
情報の整理、配置・一貫性、配色やフォントによるユーザビリティ向上。
Chapter 8 — Putting It All Together（全てを統合する）
設計原則を適用した具体的なダッシュボード例の検証。

Chapter 5 — Eloquence Through Simplicity（シンプルさによる雄弁さ）

効果的なダッシュボードを作成するための戦略に焦点を当てます。
ダッシュボードデザインにおける原則は常にシンプルさでなければならず、不必要な装飾や注意を散らす要素を避けるべきです。

ダッシュボードデザインの主要な目標（Key Goals in the Visual Design Process）

ダッシュボードデザインの基本的な課題は、大量の有用な情報を、明瞭さを保ちながら狭い空間に押し込むことです。
限られた画面スペースを最大限に活用するために、視覚デザインプロセスでは2つの主要な目標が設定されます。

非データピクセル（Non-Data Pixels）の削減
- 非データピクセルとは、データ表示に使用されていないピクセル（空白の背景を除く）を指す
- 不必要な非データピクセルの排除: 装飾的なグラフィック、意味を持たない色の変化、冗長な境界線、塗りつぶし、グラデーション、グラフのグリッド線など、有用性を損なう要素はすべて取り除く
- 残った非データピクセルの控えめな表現（De-emphasize）: 構造をサポートするために必要な要素（軸線、グループ間の区切り線など）は、その役割を果たすのに必要な分に抑える
  ナビゲーションコントロールやボタンなどの非データ要素も、画面の右下隅など目立たない場所に配置する
データピクセル（Data Pixels）の強調
- 最も重要なデータに焦点を当てる
- 情報の凝縮（Condensing）: 情報をダッシュボードに収める最良の方法は、要約（Summarization） や例外（Exception） の形式で凝縮すること
  常にすべての詳細を表示するのではなく、問題や機会が発生した場合にのみ表示させる
- 最も重要なデータのハイライト: 最も重要なデータは2種類に分けられる
  常に重要な情報（静的な手段で強調）と、特定の瞬間だけ重要になる情報（動的な手段で強調）
  - 静的強調（配置）: ダッシュボードのレイアウト（配置）は静的であり、常に重要な情報を強調するのに最も効果的
    画面の左上と中央が最も強調される領域、この一等地に会社のロゴやナビゲーションコントロールを配置しない
  - 動的強調（視覚属性）: 色相、サイズ、線幅など、視覚属性のコントラストを動的に操作することで、例外的な情報に注意を向けさせる
    例えば、重要度に応じて色の彩度や明度（Intensity） を変化させる方法は、色覚異常者にも区別できるため、特に有用

Chapter 6 — Effective Dashboard Display Media（効果的なダッシュボード表示媒体）

多くの情報を一画面に凝縮し、一目で明瞭に伝えるという要件を満たすため、どのような表示媒体を選択し、設計すべきかに焦点を当てます。
表示媒体の選定は、以下の2つの基本原則に基づいています。

ダッシュボードで一般的に見られる特定の種類の情報を表示するための最良の手段であること
小さなスペースに収まるサイズであっても、その目的を果たすことができること

1. 最適な表示媒体の選択（Text vs. Graphics）

情報をテキストでエンコードすべきか、グラフィックでエンコードすべきかは、伝えたいメッセージとデータの性質に基づきます。

テキスト（Verbal Language）：
・テキストは正確性（Precision）に優れており、個々の値を検索する（lookup）場合に最も効果的
・単一の測定値を正確に伝えることが唯一の目的なら、シンプルなテキスト表示が最良
グラフィック（Visual Language）：
・グラフィックはデータの形状（Shape）、傾向、またはパターンを明らかにする場合に優れる
・複数の測定値をまとめて比較する場合や、全体像を把握する場合には、グラフィックが優位

効果的なダッシュボードは、テキストとグラフィックを組み合わせ、豊かな意味合いと定量的な精度を効率的に伝えます。

2. ダッシュボード表示媒体の理想的なライブラリ

理想的なライブラリは、以下の6つのカテゴリに分類されます。

A. グラフ（Graphs）

ダッシュボードでは定量データが主流であるため、最も重要なカテゴリです。

ブレットグラフ（Bullet Graphs）
・著者のStephen Fewがダッシュボード専用に発明したグラフ
・スペースを浪費する一般的な放射状のゲージやメーターの問題点に対処するために作成された
・線形デザインを採用し、主要な測定値を、比較測定値（目標など）および定性的な範囲（良い、悪いなど）と共に、小さなスペースに効率的に表示する
・比較測定値を超えた場合に形成される十字の形状は、前注意的処理によって知覚できるため、ユーザーは一目でパフォーマンスを把握できる
・定性的な状態をエンコードする際、色覚異常者でも区別できるように、色相（Hue） ではなく色の濃さ（Intensity） の変数を使用
棒グラフ（Bar Graphs）
・名義尺度（Nominal scales） や順序尺度（Ordinal scales） に関連付けられた測定値の表示に適する
・個々の値を強調したい場合や、隣接する値間の比較を容易にしたい場合には、時系列のような間隔尺度（Interval scales） のデータであっても、折れ線グラフよりも棒グラフが適する
・一般的に円グラフ（パイチャート）で表示される全体に対する割合（Part-to-whole） のデータも、正確かつ効率的な比較が可能な棒グラフが優れる
折れ線グラフ（Line Graphs）
・時系列などの間隔尺度に沿ったデータの全体的な形状や傾向を迅速かつ明確に把握するのに最適
スパークライン（Sparklines）
・Edward Tufteの発案で、「データ密度の高い、デザインがシンプルで、単語サイズのグラフィック」
・測定値の横に表示され、履歴全体にわたるトレンドを曖昧さなく提供するため、高度に凝縮されたデータ表示が必要なダッシュボードに理想的

B. アイコン（Icons）

シンプルで明瞭な意味を伝える簡単な画像です。
ダッシュボードで最も有用なアイコンは、アラート（Alert）、アップ/ダウン（Up/down）、オン/オフ（On/off） の3種類です。

アラートアイコン: 注意を引く必要のあるデータに目立つように使用されます。
　色覚異常者に対応するため、赤、黄、緑といった色相ではなく、単一の色相の濃さ（intensity） を変える

C. オーガナイザー（Organizers）

関連する情報のセットを特定の様式で配置するために使用されます。

テーブル (Tables): テキストやその他の表示媒体を列と行に配置する、一般的な整理方法
空間マップ (Spatial Maps): データが地理と結びついた意味を持つ場合にのみ有用で、データが地理と関係ない場合は不要
スモールマルチプル (Small Multiples): Edward Tufteが提唱したもので、同じ基本的なグラフを、一つの変数に沿って変化させながら、行または列、あるいはマトリックス状に配置する表

Chapter 7 — Designing Dashboards for Usability（ユーザビリティのためのダッシュボード設計）

見やすさと機能性を保証するために考慮すべき重要な側面について。
情報整理の原則、一貫性の維持、視覚的な美しさについて。

意味と使用をサポートするための情報整理
ダッシュボードの情報は、雑然としたものにならないよう、その意味と使用方法をサポートするように配置されなければなりません。
　1-1. グループをビジネス機能、エンティティ、および使用目的に応じて整理する
　　データを整理する出発点は、ビジネス機能、エンティティ、データの使用目的に沿ったグループを形成すること。
　　・役職に応じた整理
　　・効率的なスキャン順序
　　・設計開始時: 情報がどのように使用されるか
　
　1.2. 同じグループに属する項目を近接して配置する
　　近接性（位置）を使用し、項目を視覚的にグループ化する戦略。
　　作業中のタスクに関連する項目を近接して配置し、周囲のグループと区別することで、項目間の関連性を示す。
　　
　1.3. 最も目立たない手段を使用してグループを区切る
　　グループを区切る視覚的な手段（罫線、境界線、背景塗りつぶし色など）は、非データピクセルに該当する。　　
　　・空白スペースの活用
　　・境界線のミュート: 空白スペースだけでは不十分な場合、薄い境界線（light borders）を使用
　　
　1.4. 意味のある比較をサポートする
　　パフォーマンスの測定値は、他の測定値と比較されて初めて意味を持ちます。
　　・統合: 複数の項目を単一のテーブルやグラフに組み合わせる
　　・近接: 項目を互いに近接して配置する
　　・視覚的なリンク: 異なるグループの項目を共通の色でリンクする
　　・比較値の組み込み: 比率、パーセンテージ、実際の差異といった比較値
　　
　1.5. 意味のない比較を阻止する
　　重要であっても、すべてのデータが比較されるべきではありません。
　　デザインの選択によって、無関係なデータ間の比較を意図せず促してしまうことがあります。
　　・同じ色を関連付けようとする人間の自然な傾向が誤解を招く
　　・項目を空間的に分離する、異なる色を使用する

　
2. 迅速かつ正確な解釈のための整合性の維持
外観の違いは、意識的または無意識的に、見る側にその違いが何らかの意味を持つことを探させます。
無意味な多様性を避け、一貫性を保つことが重要です。

表示媒体の一貫性: 類似の種類のデータで、類似の目的を持つ場合、同じタイプの表示媒体を使用すべき
多様性のための多様性を避ける: 多様性のためだけに表示手段を変えない

視覚体験を美しくする
デザインの美しさ（Aesthetics）は、それ自体がユーザビリティ（使いやすさ）に貢献します。

装飾の排除: ダッシュボードの美学は常にシンプルさから生まれる雄弁さを追求すべき
不快な見た目の回避: ダッシュボードが「醜い」場合、見る側は目をそむけがちになる

　3.1. 適切な色の選択
　　色の不適切な使用は、ダッシュボードの外観を損なう原因です。
　　・明るい色の制限: 明るい色の使用は最小限に抑え、注意を必要とするデータを強調するためだけにする
　　・自然な色の使用: データが注意を引く必要がない場合、彩度の低い色を使用する
　　・背景色: 純粋な白ではなく、わずかにオフホワイトの淡い背景色を使用する**
　
　3.2. 明瞭さのために高解像度を選択する
　　グラフィック画像は並外れた視覚的明瞭さで表示される必要があります。
　　・解像度の低い画像は読みにくく、ダッシュボードをスキャンするプロセスを遅らせる
　　・視覚的な明瞭さは、派手なシェーディングやフォトリアリズムではなく、シンプルな高解像度画像
　
　3.3. 適切なテキストの選択
　　最も読みやすいフォントを使用すべきです。
　　・フォントの選択: 最速で、目に最も負担をかけずに読めるフォントを選択
　　・一貫性: 選択したフォントはダッシュボード全体で一貫して使用
　
4. 起動パッドとしての使用を設計する
ダッシュボードは、完全な理解や対応に必要なすべての情報を提供するわけではありません。
ダッシュボードはほとんどの場合、対話性（Interaction） を持つように設計されるべきです。

データ要素のリンク:
ダッシュボードを、追加情報へのアクセスを可能にする起動パッド（Launch Pad） として設計する
データ要素を直接クリックすることで、追加情報へのリンクが開始されるように設計する
マウスオーバー:
グラフ上の特定のデータポイントの正確な値を知りたい場合、マウスをホバーさせることで、テキストとして値がポップアップする
一貫性:
追加のデータへのリンクを開始するためのメカニズムは、混乱を避けるために、ダッシュボード全体で一貫させる

ユーザビリティのテスト
ダッシュボードのデザインがどれほど優れていても、ユーザーが持つ「あるべき姿」の先入観を払拭するのは困難です。

プロトタイプの提示:
ユーザーには、作成できる最も効果的なデザインの単一のプロトタイプを提示し、これを出発点として微調整する
複数の代替案の回避:
ユーザーは視覚的に設計する方法の専門知識はないため、複数の代替デザインを提示すべきではない
専門知識の説明:
デザイナーは、なぜそのメカニズムを選択したのかを説明し、適切な使用方法についてユーザーに教えるべき

Chapter 8 — Putting It All Together（全てを統合する）

戦略的、分析的、業務的な目的をサポートする4つの異なるビジネスシナリオのダッシュボード例を検証します。

1. 第8章の目的と構成（Chapter 8. Putting It All Together）

単に原則を学ぶだけでなく、その有効性が結果（一目で監視および理解できるダッシュボード）にあることを示します。
提示されるサンプルは、表示すべき情報の種類や、それを効果的に表現する興味深い方法を提案することも意図されています。

取り上げられる4つのサンプルは、以下の通りです。

Sample Sales Dashboard（セールスダッシュボードのサンプル）
役割: セールスパフォーマンスと機会を監視する（戦略的）
Sample CIO Dashboard（CIOダッシュボードのサンプル）
役割: 企業の情報システムやプロジェクトの側面を監視する（戦略的および業務的）
Sample Telesales Dashboard（テレセールスダッシュボードのサンプル）
役割: リアルタイムの業務を遅延なく監視し、必要な行動を取る（業務的）
Sample Marketing Analysis Dashboard（マーケティング分析ダッシュボードのサンプル）
役割: 企業のウェブサイトのマーケティングパフォーマンスを監視する（分析的）

2. サンプル・セールス・ダッシュボード（Sample Sales Dashboard）

セールスダッシュボードは、エグゼクティブダッシュボードに次いで、最も頻繁に実装されるダッシュボードの一つです。
四半期累計売上、パイプライン収益、利益、顧客満足度、市場シェアなど。

色を控えめに使用
セクションのタイトルに薄茶色を使用することでデータをグループ化し、赤色を目標から大きく逸脱したデータにのみ使用
ホワイトスペースのみを使用する
データを区切り、境界線、グリッド線、背景の塗りつぶし色は不必要であるため排除する
ブレットグラフ（Bullet graphs）を使用
目標値や過去の実績値に対する四半期累計収益や利益を比較する
スタック型棒グラフ（Stacked bars）を使用
地域ごとの四半期累計収益とパイプライン値（予想収益）を組み合わせ、ターゲットとの関係を容易に把握できるようにする
ほとんど必要とされない説明や指示を排除
ダッシュボードの使用開始時のみ必要となる情報のために単一のヘルプボタンを提供する

3. サンプル CIO ダッシュボード（Sample CIO Dashboard）

システム可用性、費用、顧客満足度、CPU/ストレージ使用率、主要プロジェクトのマイルストーンなど。
戦略的かつ業務的な情報システムのパフォーマンスを監視するために設計されています。

リアルタイムデータの強調:
左上には、システム可用性やアプリケーション応答時間など、即座に対応が必要な問題を通知するためのアラートを配置する
動的アラート:
アラートは赤色で表示され、注意をより強く引くために、点滅させたり、ボリュームが徐々に増す音を発したりする
アラートは、詳細な問題を示す他の画面へのリンクとして機能する
コンテキストとデザイン:
測定値を補完するために、許容可能なパフォーマンスの測定値など、豊富なコンテキスト情報を提供する
白スペースと控えめな配色（グレーと落ち着いたグリーン、そしてアラートのための赤色のみ）により、情報量は多いにもかかわらず、煩雑さを感じさせないデザインにする

4. サンプルテレセールスダッシュボード（Sample Telesales Dashboard）

テレセールススーパーバイザーがリアルタイムの運用を監視し、遅延なく行動を起こすための業務的な目的を持っています。

測定値の制限:
過剰な測定値は圧倒的になるため、コール待ち時間、コール応答時間、放棄されたコール数など、主要な指標を絞る
重要な指標の配置:
顧客の待ち時間、コール時間、放棄されたコールなど最も警戒すべき指標は、ダッシュボードの左上隅に配置する
対話性とアラート:
データは数秒ごとに更新されるため、問題に集中できるように 「データフリーズ／フリーズ解除」ボタン を提供する
アラート（赤丸）が最初に表示される際には、注意を引くために点滅し、場合によっては音声信号を発する

5. サンプルマーケティング分析ダッシュボード（Sample Marketing Analysis Dashboard）

ウェブサイトのマーケティング活動を監視するアナリストをサポートするための分析的な例です。

分析の焦点:
アナリストが調査すべき潜在的な問題や機会を特定するために使用する
データの配置と詳細度:
ランキング関係を示すように選択・配置し、過去のデータについては、遠い過去ほど詳細度を下げて表示する多焦点ディスプレイの手法を適用する
テキストの使用:
アナリストの関心領域を伝えるという目的に鑑みて、テキスト表示を多く使用する
グラフィックでは十分に伝わらない簡単な説明を添えて潜在的な問題領域を通知する、という目的に適する

最終的な言葉（A Final Word）

ダッシュボードを設計する際の究極的な目標は、常にコミュニケーションに焦点を当てることです。
ユーザーがシンプルに、明瞭に、そして迅速にダッシュボードを見て理解できるかどうかが最も重要です。
この目的から逸脱した、どれほど印象的で面白いデザインであっても、数日で飽きられ、数週間で使われなくなります。

最後に

書籍はこちら（Amazon）: Information Dashboard Design / Stephen Few
著者のWebサイトはコチラ: Stephen Few