Information Dashboard Design / Stephen Fewを読む(前半)
Microsoftの公式リファレンスで紹介されていた参考文献から「Information Dashboard Design / Stephen Few」を読みます。
著者は、Stephen Few。
ヒューはPerceptual Edge社の設立者であり、データビジュアライゼーションの一人者でもあります。
目次の構成(カッコと概要は私の補足です)
- 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 1. Clarifying the Vision(ビジョンの明確化)
情報ダッシュボードが潜在能力を十分に発揮できていない現状の指摘と、著者による定義を示します 。
-
ダッシュボードの現状と課題
ダッシュボードは、情報過多を抑制し、人々が必要な情報を瞬時に監視できるようにするために登場した強力な伝達手段。
だが、ほとんどのダッシュボードは、主に技術的な問題ではなく、劣悪な視覚デザインのために効果的に機能していない。
多くは、明確なコミュニケーションという目標を損なう派手さや装飾(flash and dazzle)を強調している。
効果的なダッシュボードは、シンプルさに基づいた、情報に基づいたデザインの産物であるべき。 -
歴史的背景と定義
ダッシュボードは、1980年代に開発されたExecutive Information Systems(EISs) の新しい名称にすぎない。
EISの目的は、少数の重要な財務指標をシンプルなインターフェースで表示すること。
だが、当時はデータの不完全性や信頼性の問題から実現が困難だった。
以下、著者によるダッシュボードの定義。
「一つまたは複数の目的を達成するために必要な最も重要な情報を、一画面に統合して配置し、一目で監視できるようにした視覚的な表示」
この定義が強調するのは、以下の点です。
- ダッシュボードは視覚的な表示(Visual displays)であること
- 情報が単一画面に統合され、スクロールや画面切り替えが不要であること
- 情報は、目的達成に必要な最も重要な情報に絞られ、通常は 要約(summaries) や 例外(exceptions) の形で簡潔に表現されること
Chapter 2 — Variations in Dashboard Uses and Data(使用法とデータのバリエーション)
ダッシュボードを分類し、その典型的なデータ内容を明らかにします。
- ダッシュボードの分類(Categorizing Dashboards)
ダッシュボードが果たす 役割(Role) に基づく分類。
1-1.戦略的(Strategic)ダッシュボード
・目的: 経営層など意思決定者がビジネスの健全性や機会を監視するために、迅速な概要を提供
・コンテンツ: 高レベルのパフォーマンス測定値に焦点を当て、将来への道筋を示す予測
・デザイン要素: 極めてシンプルな表示媒体が最適
・更新頻度: 月次、週次、または日次の静的なスナップショットで十分
・双方向性: 通常は単純に現状を提示する一方向の表示
1-2.分析的(Analytical)ダッシュボード
・目的: データアナリストが傾向や原因を探求し、より深い洞察を得ることをサポート
・コンテンツ: より豊富なコンテキスト(広範な比較、より広範な履歴、より微妙なパフォーマンス評価指標など)が必要
・デザイン要素: 戦略的ダッシュボードよりも洗練された表示媒体
・更新頻度: 戦略的ダッシュボードと同様に、絶えず変化しないデータの静的なスナップショット
・双方向性: データ探索を可能にする 対話性(インタラクション) が不可欠
1-3.業務的(Operational)ダッシュボード
・目的: リアルタイムまたはそれに近いデータで日常の業務活動を監視し、即座の対応を必要とする
・コンテンツ: 情報はより具体的で、より深いレベルの 詳細(ディテール) を提供
・デザイン要素: 表示媒体は非常にシンプル
・双方向性: 詳細が必要な場合、ドリルダウンやマウスオーバーによる対話性が有用
- 典型的なダッシュボードデータ(Typical Dashboard Data)
主に、現在進行中の事柄の定量的な測定値を表示する。
・データ内容: ダッシュボードに表示される定量的な情報(売上、費用、利益、顧客満足度、システム使用率など)
・データの形式: 効率的かつ簡潔さを可能にするため、定量データは要約される
※頻繁に使われる要約形式は合計、平均、分布の測定値(標準偏差など)
・コンテキストと比較: 測定値は単独よりも、他の関連する測定値と比較することで、その意味が豊かになる
※例えば、昨年の同日、予算目標、過去の予測、通常範囲など
※比較は、違いを明確に伝えるためにグラフィックが使われることも多い
※差異のパーセンテージなど比較値のみを単一の数値として表示することもある
・非定量データ: 単純なリストやプロジェクト管理に関連するスケジュール、エンティティ間の関係を示す情報など
※例えば、顧客トップ10、調査すべき問題、プロセス内のステップ
Chapter 3 — Thirteen Common Mistakes in Dashboard Design(ダッシュボードデザインにおける13の一般的な間違い)
ダッシュボードのデザインを台無しにする13の一般的な視覚デザイン上の問題。
- 単一画面の境界を超えること(Exceeding the Boundaries of a Single Screen)
ダッシュボードの大きな利点、 同時視認性(simultaneity of vision、必要な情報をすべて一目で同時に見ること) が失われます。
・データを別々の画面に断片化すること(Fragmenting Data into Separate Screens)
・スクロールを要求すること(Requiring Scrolling)
- データに不十分なコンテキストを提供すること(Supplying Inadequate Context for the Data)
測定値を単独で表示しても意味がほとんどありません。
その数字が「良い」のか「悪い」のか、または目標と比較してどうか、といった適切なコンテキストが必要です。
・コンテキストがないと、データは画面上に存在するだけで、洞察を与えたり行動を促したりしない
・コンテキストを提供しないゲージ(メーター)は、スペースを消費しているだけ
- 過剰な詳細や精度を表示すること(Displaying Excessive Detail or Precision)
ダッシュボードは通常、迅速な概要を提供するため、高レベルの情報を必要とします。
・過剰な精度($3,848,305.93を$3.8Mと表示しないなど)や、不必要な詳細(時間を秒単位まで表示するなど)は、見る側の処理速度を低下させる
・不必要な情報ごとに、重要な情報のフィルタリングに費やされる時間が無駄
- 不十分な測定値を選択すること(Choosing a Deficient Measure)
測定値が正確であっても、把握すべき意味を明確かつ効率的に伝達しない場合、それは不十分です。
・例えば、収益と予算の差を知る場合、収益額と予算額を別々に表示するより、差異をパーセンテージで直接表現する
- 不適切な表示媒体を選択すること(Choosing Inappropriate Display Media)
定量データの提示において、最も一般的な間違いです。
・円グラフ(パイチャート) は、定量データを効果的に表示できない
・定量データの表示は、棒グラフ(バーグラフ)が優れている
・バブルチャートも、面積の比較が不正確になるため、データを不必要に不明瞭にする
・レーダーグラフはまれに適切で、棒グラフのような線形表示の方がデータは明確になる
・データが地理と結びついていないのに、地図の使用も、多くのスペースを占有するだけ
- 無意味な多様性を導入すること(Introducing Meaningless Variety)
ダッシュボードに無意味な多様性を導入すると、表示効果が損なわれます。
・見る側に、データを見るたびに異なった知覚を強制すると、時間と労力が無駄になる
・常に最適な表示媒体を選択すべきで、その結果、ダッシュボードがすべて同じ種類のグラフで埋め尽くされても問題ない
・一貫性があることで、ユーザーは同じ知覚を用いてデータを解釈できる
- デザインが不十分な表示媒体を使用すること(Using Poorly Designed Display Media)
コンポーネントのデザインが不十分だと、明瞭かつ効率的なコミュニケーションを妨げます。
・凡例(Legend)はグラフと凡例の間で視線往復を生じるため、要素に直接ラベルを付けるべき
・円グラフ(パイチャート)のセグメントを明るすぎる色にすると、感覚的な過負荷(sensory overkill)となり、データから注意を逸らす
・3D効果はデータを解釈しにくく、一部のデータが他のデータによって 隠されてしまう(オクルージョン)
・棒グラフの色が異なることに意味がない場合、その違いは不必要に注意を引き、存在しない意味を探すことにつながる
・棒グラフにおいて、比較すべき棒が隣り合っていないと、不適切なデータ配置によって比較が難しくなる
・現実の物理オブジェクトをリアルに再現しようとする誤った努力により、数字が読みにくくなる
- 定量データを不正確にエンコードすること(Encoding Quantitative Data Inaccurately)
グラフが、データ値を誤って表現するように設計されている場合があります。
・棒グラフでは、定量的な値は棒の長さによってエンコードされるため、棒グラフは常にゼロから始める
- データの配置が悪いこと(Arranging the Data Poorly)
データの配置は、見た目を良くするためだけでなく、データの使用方法に合わせて行います。
・最も重要なデータは目立つように配置
・ダッシュボードで最も目立つ位置(左上)が、ロゴやナビゲーションコントロールの場合、一等地の無駄遣い
- 重要なデータを非効率的、または全くハイライトしないこと(Highlighting Important Data Ineffectively or Not at All)
たとえ目立つエリアになくても、最も重要な情報にすぐに目が向くように設計されるべきです。
・すべてが視覚的に目立っていると、結果として何も際立たなくなる
・ダッシュボードにある情報は、すべてが等しく重要ではない
・見る側の目は、常に最も重要な情報に、最初に向けられるべき
- 役に立たない装飾でディスプレイを乱雑にすること(Cluttering the Display with Useless Decoration)
よく見られる問題は、不必要な装飾の多さです。
・装飾は、最初に見るときは楽しむかもしれないが、だんだん煩わしく感じるようになる
・装飾的な要素や無意味な色やグラデーションは、データから注意を逸らし、煩雑さ(Clutter)を増大させる
・空白(Blank space) は、無意味な装飾よりも優れている
・データ視覚化の専門家エドワード・タフティ(Edward Tufte)は、「統計が退屈なら、間違った数字を選んでいる」 と述べ、数字を装飾するグラフィックアーティストの傾向を批判している
- 色の誤用または過剰使用(Misusing or Overusing Color)
ダッシュボードの異なるセクションで同じ色が使われている場合、脳はそのコントラストに意味を持たせ、それらの間に関係性を見出そうとします。
・赤、黄、緑の色を意味付けに使用することは一般的だが、これは色覚異常を持つ人を排除することになる
- 魅力的でない視覚的ディスプレイを設計すること(Designing an Unattractive Visual Display)
ダッシュボードが不快な見た目である場合、見る側は目をそむけがちになります。
・見た目の美しさはユーザビリティ(使いやすさ)に貢献する
・データを魅力的かつシンプルに表示し、気を散らすものを加えないこと
・デザインの基本原則であるシンプルさを指針とする
Chapter 4 — Tapping into the Power of Visual Perception(視覚の力の活用)
効果的なダッシュボードを設計するため、視覚的な知覚に関する科学的知見を応用します。
ビジョン(視覚)は、人間の感覚の中で最も強力で、見るという行為と思考は密接に結びついています。
データを効果的に表示するためには視覚的知覚について理解し、その科学的な知見をデザインに直接適用します。
- 短期記憶の限界の理解(Understanding the Limits of Short-Term Memory)
私たちは目で見るのではなく、脳で見ています。
目が光を登録する感覚メカニズムであるのに対し、知覚は目が登録したものを理解するプロセスであり、脳内で発生します。
・短期記憶の容量: 短期記憶(ワーキングメモリ)の容量と、一度に格納できる視覚情報の 塊(チャンク) は限られている
・チャンキングの最適化: 情報が効率的に知覚・理解できるように、最適なチャンキングをサポートするよう設計されるべき
・単一画面の必要性: 短期記憶の容量が限られているため、一緒に見られるべき情報は、スクロールや複数画面への切り替えを必要とせず、一画面内に収める必要がある
- 迅速な知覚のための視覚的エンコーディング(Visually Encoding Data for Rapid Perception)
意識的な処理よりも速く起こる視覚的知覚の初期段階を 前注意的処理 (Preattentive Processing) と呼びます。
この処理は、特定の視覚属性を検出するように調整されており、意識的な思考なしに、特定のものが目立ち、特定のオブジェクトのセットがグループ化される結果をもたらします。
・前注意的属性のカテゴリ: 前注意的属性は、色 (Color)、形 (Form)、空間的位置 (Spatial Position)、動き (Motion) の4つ
・定量データのエンコーディング: すべての属性が定量的な知覚(より大きい、より小さいなど)に使用できるわけではない
・2次元の位置 (2-D Position):すべての前注意的属性の中で、違いを最も容易かつ正確に知覚できる
・線の長さ (Line Length):棒グラフで定量値を棒の長さとしてエンコードする際に有用
・サイズ (Size):定量的な知覚は可能だが、精度に限界があり、人間は2次元の面積の差を過小評価するため、サイズの違いを使って定量的な値をエンコードする際には注意が必要
・色相 (Hue) や 形状 (Shape) は、定量的な値ではなく、カテゴリカルなデータ(項目が異なること)を伝える
・色の使用
・鮮やかな色と控えめな色の使い分け: 明るく、完全に彩度の高い色は、注意を引く必要のある特別なケースに使い、自然界に共通する落ち着いた色(ソフトな灰色、茶色、青など)は、ダッシュボードの標準的な配色に使う
・色の知覚の相対性: 色は周囲のコンテキストによって大きく影響を受ける
※例えば、同じ灰色の四角形でも、背景のグラデーションによって明るさが異なって見える
- ゲシュタルトの視覚の法則(Gestalt Principles of Visual Perception)
ゲシュタルト心理学は、目にするパターン、形、組織をどのように知覚するか、を理解する研究から生まれました。
これらの原則は、データを意図的にグループ化、分離、または目立たせるのに役立ちます。
主要な6つの原則は以下の通りです。
1. 近接性 (Proximity): 近くに配置されたオブジェクトは、同じグループに属すると認識される。空白(ホワイトスペース) は、グループを分離する最も簡単な方法
2. 類似性 (Similarity): 色、サイズ、形、向きが類似しているオブジェクトは、グループとしてまとめられる傾向がある
3. 囲い込み (Enclosure): 線や共通の色で視覚的な境界線によって囲まれたオブジェクトは、グループとして認識される。囲い込みによって生成されるグループ化の認識は、近接性や類似性よりも強力
4. 閉合 (Closure): 人間は曖昧な視覚刺激(開いている、不完全な形)に直面すると、それを自然に閉じた、完全な形として知覚する。グラフのデータ領域を定義するために、完全な枠線や塗りつぶし色ではなく、X軸とY軸の2つの軸のみで済ませることが可能
5. 連続性 (Continuity): 互いに整列している、または継続しているように見えるオブジェクトは、全体の一部として認識される。テーブルや表でテキストのインデント(字下げ) を使用して情報をグループ化するのに利用される
6. 連結 (Connection): 線などで何らかの形で接続されているオブジェクトは、同じグループの一部として認識される。接続によって生じるグループ化の知覚は、近接性や類似性よりも強く、囲い込みの原則に次いで強力
最後に
Chapter 5からChapter 8は後半に続きます。
書籍はこちら(Amazon): Information Dashboard Design / Stephen Few
著者のWebサイトはコチラ: Stephen Few
関連レシピ
Information Dashboard Design / Stephen Fewを読む(後半)
2025-11-24
[Information Dashboard Design / Stephen Fewを読む(前半...
Envisioning Information / Edward Tufteを読む
2025-11-22
[Microsoftの公式リファレンスで紹介されていた参考文献](https://learn.mi...
Power BIのビジュアルとデザインの最適解について
2025-11-21
Power BIの美しいグラフを作成するには、Microsoftの公式リファレンスを参考にします。...