ビジネスダッシュボード 設計・実装ガイドブック(6)
概要
これの続き。
第五章: ダッシュボードデザインの概要と全体像
ダッシュボードのデザインの特徴
データを見る人が映し出されているデータを正しく読み取れるようデザインすることが目的。
原則的にダッシュボードは次の2点の特性を持つ
- 複数チャートで構成される
各チャートは「種類、大きさ、データの粒度」があり、それらチャートの配置は「見せる順番、チャート間の関連が分かる配置」等が必要。 - インタラクティブ(動的)である
ダッシュボードは任意の条件でフィルタを重ねたり、グラフの一部を強調したりできる。
これら操作のボタンなどの配置もデザイン要素に含む。
この作業ステップは後述のステップがある
テンプレートデザイン
何処にどの様な情報があるのか、情報の構造を分かりやすくしませう。
- ダッシュボードサイズ設定
どんな端末で参照するのかによって、縦横の幅が決まります。
これはチャート数とユーザにどう(どんな端末で、どの様な操作で)使ってもらうかにもよる。 - ワイヤーフレームの作成
具体的に何処に何を配置するかどうかの作成です。
ダッシュボードの要素はおおむね下記要素。 - 配色ルールの決定
ダッシュボードの色が揃っていることは、ユーザがデータ分析に集中できる環境につながる。
ただし、特定の要素だけ特別な意味を持たせるために部分的に配色を変えることもあります。
配色は主に3種- メインカラー : タイトルやチャート部分など、多くの構成要素に頻出する色。青や緑の様な落ち着く色を指定します。
- ベースカラー : 背景色。こだわりが無ければ白が無難。使うとしても淡い色を使います。見やすさ優先。
- アクセントカラー : 注釈や参考資料のリンク、インタラクティブなボタンやチャートのタイトルを目立たせるのに利用。主に赤やオレンジなどの暖色系がおすすめ。
比較軸も配色ルールを決める。良い状態と悪い状態の配色等。
レイアウトデザイン
どのチャートを見れば良いのかが判断しやすい。
詳細設計の加筆修正ですね。
- 視線の流れを意識した配置
Z型 や F型 の視線誘導を考えればいい。
1画面型なら Z型、縦長なら F型を考えます。- 重要なものほど、左上や中央等の優先して見られる場所に配置せよ
- 視線の動きと分析の順番が一致するように配置せよ
- 縦長ダッシュボードのチャート配置の設計方法
- 分析要件のチャートエリアとして統合
分析上の役割が類似している分析要件を一つのグループにまとめるのがおすすめ。
例えば「ビジネスの状況確認、KPIのトレンド確認、KPI貢献度の高い施策発見」等をKPI状況分析エリアとしてひとまとめのエリアを作るなど。 - 分析の流れに合わせてチャートエリアをF字に配置
チャートエリアはダッシュボードにおける分析の流れとその順序を意識して配置しませう。
KPI状況分析 → 店舗別状況分析 → 顧客駆動分析 など。 - チャートエリア内のチャートはZ字に配置
視線の動きに合わせろってわけですね
- 分析要件のチャートエリアとして統合
- チャートエリア内の配置
チャートレイアウトは、グリッドレイアウトで考え、エリア毎に見出しを作成してください。
領域の境界の見せ方は3種- 余白を使って領域を区切る
- チャート背景に色をつけて、色の区切りを領域の区切りに見せる
- 罫線で切る
- テクニック
- 要素間を接近させることで、関連性を表現する
- チャート配置に構造的な意味を持たせる
- テキストサイズで見出しの大中小を分かりやすくする
- チャートのサイズを変える。重要な奴ほど大きく配置
- チャートの密度を変える。密度が高いほど情報量が多い＝把握に時間がかかる。見せたいものほど情報量を減らす。
チャートデザイン
知りたいことをチャートから読み取りやすい。
- チャートデザインの意義
ユーザにとって分かりやすい形式で正確にデータを可視化すること。 - シンプルなチャートで可視化する
分かりやすさ重視で、基本は 10 種類のチャートを選ぶ。- 基本
- 数値
- 棒グラフ
- 折れ線グラフ
- 数表
- エリアチャート
- クロス集計
- 補足
- 散布図
- バブルチャート
- ヒストグラム
- 地図へのプロット
シンプルなチャートを選ぶ理由は
- ダッシュボードのユーザがチャートの読み取り方を学ぶ必要がない
- BIツールの基本的な機能の範囲でチャートが構成できるから、構築・改修のハードルが低い
- 基本
- 最適なチャートを選択
指標の比較方法とチャートが合ってるかが判断の分かれ目
条件の掛け合わせのサンプル…これは便利！
| 比較軸なし | 比較軸の数=1 | 比較軸の数=2 | 比較軸の数3つ以上 | |||
|---|---|---|---|---|---|---|
| 時間軸あり | 時間軸なし | 時間軸あり | 時間軸なし | |||
| 大きさの比較 |
|
|
|
|
|
|
| 変化の比較 | ||||||
| 構成比の比較 |
|
|
|
|||
| 分布の比較 | ヒストグラム | ヒストグラム | ||||
| 値の関係性の比較 |
|
|
||||
- シグナルとノイズを意識したデザイン
なるべくノイズは減らそう。- シグナル : 集計値の持つ情報やその傾向を読む為の必要条件要素
- ノイズ : シグナル以外のチャート構成要素(色、背景、罫線)
例えば棒グラフでいちいちカラフルにされても意味ないし、無意味に判例出されてもスペース勿体ないし…、一定値毎に罫線あるのは良いけど、粒度が細かいとうざいし…といった感じ。
- 複雑なチャートは複数のチャートに分割することも考える
例えば時系列の売上の合計と、商品別売り上げは、「積み上げ棒グラフ」で表現できるが、全体の売上と、個別品目別の棒グラフに分解すれば、情報量が減って把握しやすくなる。
似たような例で- コンボチャート*1は、個別のチャートに分解することも検討する
- 表を棒グラフで表現できないか検討する
- モックアップ作成 デザインしようが固まったら、ワイヤーフレームにチャートを書き込んで、モックアップを作り、レビューを受けましょう。
インタラクティブ機能デザイン
知りたいことの理解を深めやすい。
- インタラクティブ機能の導入メリット
導入メリットは次の通り。
- ダッシュボードサイズの制限を超えた分析要件の提供が可能
- 対話的なデータの分析体験の提供が可能
- チャートを組み合わせた多角的分析の支援が可能
- 主要な機能は以下の通り
- フィルタ機能 : 任意に集計対象の条件を設定できる機能。
- ボタンによる指標やチャートの切り替え機能 : チャートの配置数が多すぎる場合に、整理する目的に使用できます。
- ツールヒント機能 : チャートの要素にマウスホバーした際に、詳細情報を表示する。
まとめ
具体的にデータをどう見せるかに踏み込んだ章ですね。
配色やレイアウトデザインは大体体感的に分かることですが、チャートデザインの周りでチャートの選択表は実にありがたい…。
この辺選ぶセンスが難しいのですよね…
*1:一つのチャートに、棒グラフと折れ線グラフが両方入るようなチャート
