ダッシュボードのデザイン

ダッシュボード設計の基本概念

Olga Scrivner, PhD

President, Scrivner Solutions Inc

デザインが重要な理由

 

  • 企業: NASDAQ
  • ニーズ: 毎日の市場動向を一般投資家に伝える
  • 解決策: タイムズスクエアのリアルタイム単一値ディスプレイ

 

トレンドラインが最善でない理由とは？

 

証券取引所

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
ダッシュボード設計の基本概念

デザインが重要な理由

 

  • 企業: NASDAQ
  • ニーズ: 毎日の市場動向を一般投資家に伝える
  • 解決策: タイムズスクエアのリアルタイム単一値ディスプレイ

 

トレンドラインが最善でない理由とは？

 

証券取引所

 

過去のインサイトとリアルタイム指標

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
ダッシュボード設計の基本概念

デザインの構成要素

                対象者

  • このダッシュボードを使用するのは誰か？
  • 対象者のニーズは何か？
  • 対象者に適したフォーマットは？
  • 利用頻度はどのくらいか？

  対象者

                        構成要素

  • 目的: 探索的か説明的か
  • フォーマット: 横方向か縦方向か
  • レイアウト: グリッドかフレックスか
  • ビジュアル: 値、ディメンション、図形

 

構成要素

ダッシュボード設計の基本概念

ダッシュボードの目的

              探索的ダッシュボード

探索的ダッシュボード

探索的ダッシュボードは、ユーザーがデータを探索するためのものです。

                    説明的ダッシュボード

説明的ダッシュボード

説明的ダッシュボードは、事前定義されたインサイトを提供します。

ダッシュボード設計の基本概念

探索的ダッシュボード

 

探索的ダッシュボード

 

 

  • カスタムデータセグメンテーション用フィルター
1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

探索的ダッシュボード

 

探索的ダッシュボード

 

 

  • カスタムデータセグメンテーション用フィルター
  • カスタマイズ可能なナビゲーションパネル
1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

探索的ダッシュボード

 

探索的ダッシュボード

 

 

  • カスタムデータセグメンテーション用フィルター
  • カスタマイズ可能なナビゲーションパネル
  • より詳細なビューへのドリルダウン
1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

探索的ダッシュボード

 

探索的ダッシュボード

 

 

  • カスタムデータセグメンテーション用フィルター
  • カスタマイズ可能なナビゲーションパネル
  • より詳細なビューへのドリルダウン
  • インタラクティブなビジュアル（ホバー、ツールチップ）
1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

説明的ダッシュボード

 

説明的ダッシュボード

 

 

  • データはあらかじめフィルタリングされている場合が多い
  • 事前定義されたストーリーライン
  • 経営幹部向けのプレゼンテーション
  • 行動を促す呼びかけ
1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

ダッシュボードのサイズ

                      物理的スペース

  • モニターサイズ - 画面の対角距離

      デスクトップ、ノートPC、タブレット、モバイル端末

モニターサイズ

ダッシュボード設計の基本概念

ダッシュボードのサイズ

                      物理的スペース

  • モニターサイズ - 画面の対角距離
  • 画面解像度 - ピクセル数と密度（幅×高さ）

                          フォーマット

  • 標準フォーマット - 長方形のダッシュボード

    • 比率 - 16:9
    • すべての要素が画面内に表示
    • スクロール不要

  • ロングフォーマット - 横方向または縦方向

      デスクトップ、ノートPC、タブレット、モバイル端末

モニターサイズ

                横方向（タイムライン形式） ロングフォーマット

ダッシュボード設計の基本概念

ダッシュボードのサイズ

                      物理的スペース

  • モニターサイズ - 画面の対角距離
  • 画面解像度 - ピクセル数と密度（幅×高さ）

                          フォーマット

  • 標準フォーマット - 長方形のダッシュボード

    • 比率 - 16:9
    • すべての要素が画面内に表示
    • スクロール不要

  • ロングフォーマット - 横方向または縦方向

      デスクトップ、ノートPC、タブレット、モバイル端末

モニターサイズ

                縦方向（新聞コラム形式） 縦方向フォーマット

ダッシュボード設計の基本概念

ダッシュボードのレイアウト

                  グリッドシステム グリッドシステム

  • 二次元マトリックス
  • バランスと対称性
  • シンプルなナビゲーション
  • 大きな集計数値（BAN）- 上段行

                                フォーカス

Fフォーカス

Fフォーカス

1 Baucke, Spencer. (2022). Dashboard design essentials.
ダッシュボード設計の基本概念

さあ、練習しましょう！

ダッシュボード設計の基本概念

Preparing Video For Download...