システムが完全なものになるにつれ、定性的なデータや定量的なデータもまたさまざまな頻度・複雑さでを取得できるようになります。このような状況では、情報の可視化がさらに重要になります。
端的に言うと、情報の可視化（information visualisation）とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです。
デザイナーの役割と情報の可視化
デザイナーの役割は、ユーザーにとってわかりやすい方法でデータを表現することです。これには、課題や制約、データを表現するために利用できるスクリーンサイズという制限が伴います。
もしデザイナーがユーザーが理解しやすいデータを作成できないと、ユーザーがデータを利用しても、グラフィックや数字、テキストの根底にある意味を抽出することはできません。さらに悪いことに、ユーザーは、そのようなデータを理解しようと、データを見境なく選り分けてしまいます。これでは、生のデータを提示された場合にユーザーが取るだろう行動とほとんど変わりません。そのため、適切に情報を可視化することで、迅速かつ正確にデータを利用でき、結果的にデータを比較し、結論を導き出し、決断できるようになります。
覚えておくべき重要な教訓のひとつに、技術が急速に進化している一方で、人間はそれと並行して進化しているわけではないということがあります。そのため、ダッシュボードのデザイナーは、人間の知覚の性質と限界を理解し、それらに寄り添う必要があるのです。
ダッシュボードとビジネス
BI（Business Intelligence）ダッシュボードを使用すると、経営者、マネージャー、チームリーダーなどのステークホルダーが、個人や部門、企業レベルでパフォーマンスを観察し、予測することができます。つまり、ダッシュボードは、企業全体のパフォーマンスといった包括的なものから、特定の製品の販売実績といった具体的なのものまでを観察することができるのです。
優れたUXを提供するようデザインされたダッシュボードは、ビジネスの健全性と安定性に関して包括的に観察できるだけでなく、社員の生産性にも直接影響を与えることができます。
ダッシュボードデザインのガイドライン
ダッシュボードは次のようにあるべきです。
- １つの画面上にある：ダッシュボードは通常Webベースであるため、Webブラウザを介して閲覧されます。
- ユーザーの目的をサポートする：ダッシュボードの用語と複雑さは、ユーザーの意図したものと一致させる必要があります。また、ハイライトや通知を使用することで、ユーザーの注意を特定の要素に引かなければなりません。
- データの根底にある意味を示す：提示されたデータが何を意味しているのかをユーザーが直ちに理解できなければいけません。これを達成するためには、適切にラベリングし、関連する視覚要素を体系的に分類し、統計的に言葉で説明することが重要です。
- データを要約する：ダッシュボードのデザイナーは、ユーザーがダッシュボードにアクセスしたら、すぐにもっとも関連性の高い情報を利用できるようにデザインする必要があります。要約された形で提示されるのが理想的です。
- データをより深く掘り下げる手段を提供する：要約されたデータの中で興味を引かれた点をさらに調査できるシームレスな手段をユーザーに提供しなければなりません。これにより、ユーザーはデータをより理解し、売上の急落などの例外が生まれた原因を突き止めることができます。
- 利用可能なスペースを最適に活用する：ガイドライン１を守っても、必ずしも使用可能なスクリーンのスペースが最適な形で使用されているとは限りません。なぜなら、可視化する要素のサイズを小さくして、すべてを１つの画面に詰め込むこともできるからです。しかし、それは優れた方法ではありません。意味の薄い画像など、データを持たない要素はすべて削除するべきです。
ダッシュボードデザインのベストプラクティス
直観的なレイアウトを使用する
情報可視化の専門家の間では、ダッシュボードはそれぞれの性質に基づいて、５つの領域に分けられるべきだという共通見解があります。その領域は以下の図の通りです。
もっとも優れた結果を得るためのダッシュボードレイアウト（出典：Interaction Design Foundation）
上のスクリーンショットからわかるように、表示したい情報の種類によって異なりますが、重要な情報はダッシュボードデザインの左上または中央に配置するべきです。次に重要な情報は右上または左下に、そしてもっとも重要度の低い情報は画面の右下に配置しましょう。これに関連して、ダッシュボードが表示されるディスプレイのサイズも考慮してください。それにより各セクションのサイズを調整する必要があります。
情報の集合
近接の法則によれば、人間は物理的に隣り合わせのアイテムをグループとして認識し、逆に遠くにあるアイテムは無関係のものだと見なします。セクション内であっても、この法則は各ダッシュボード項目の配置場所を決定する際の指針になります。
ゲシュタルトの近接の法則（出典：Interaction Design Foundation）
また、物理的に隣り合っていなくても、色、形、大きさ、位置が似ているものはグループであると認識します。この現象は、近似の法則と同じくゲシュタルトのグループ化の原理である、類同の法則によって説明されています。
ゲシュタルトの類同の法則（出典：Interaction Design Foundation）
人間の認知の限界を認識する
厳密に言えば、私たちはグラフィックや統計など、さまざまな種類の情報を無制限に表示することができますが、そこには重大な制約が１つあります。人間の認識力です。人間の認識力には、注意、記憶、学習、論理的思考、言語の生成と理解、問題解決や意思決定が含まれます。そのため、使用するチャートの数を増やしすぎないようにしましょう。また、ユーザーが傾向を分析して識別できるように、シンプルなチャートを使用してください。要するに、ダッシュボードに表示された情報を操作して使用するときに、ユーザーが短期記憶で保持しなければならない項目の数を制限するべきです。
不要な表示を取り除く
情報を表示するにしろ、ナビゲーションを提供する程度のことにしろ、ダッシュボードのデザインで使用されるすべてのピクセルには目的が必要です。
たとえば飾りの画像など、審美的な理由のためだけに存在しているものがあれば除去しましょう。Edward Tufte's Data-Ink ratioを使用すると簡単にそのチェックができます。「グラフィック上のインクの大部分は、データの情報を表現しているべきです。データが変化するにつれてインクも変化します。」Tufte氏が目標とするのは、データを表示されるために使われるインクの比率を最大化し、グラフ表示においてデータとピクセルが１：１対応した完璧なデザインを作ることです。
色を適切に活用する
色は、ダッシュボードのユーザー体験を大きく左右します。適切な配色はユーザーの注意を引き、ユーザーがデータを理解するのを助け、パターンや傾向を簡単に識別できるようになります。
しかし、色だけに依存するのはやめましょう。なぜなら、色覚障害のあるユーザーが混乱してしまう可能性があるからです。赤みがかった緑色と黄緑色のような多くの人が認識しにくい色の組み合わせや、微妙に違う色合いのような区別が難しい色の組み合わせは使用しないようにしましょう。
また補色を同じ領域で使うべきではありません。というのも、互いの色の効果を「打ち消し」てしまうため、本来意図したとおりに領域を知覚できなくなってしまうからです。
適切に情報を可視化する方法を選ぶ
最適な可視化の形式を選ぶことは、ダッシュボードデザインの鍵になります。以下は使用できる主な表現方法です。
棒グラフ
これらは、カテゴリーデータを即座に理解してもらうのに理想的なグラフです。実際、棒の高さが異なり、さらに色付けられていると、ユーザーはデータを認識して比較しやすくなります。
折れ線グラフ
折れ線グラフは、時間とともにデータがどのように変化したのかを示すために使用されます。通常数値はY軸に、時間はX軸に表示されます。連続した線に従うことでユーザーはパターンや傾向を簡単に認識できるので、ダッシュボードの素晴らしい付加要素になります。
散布図
散布図は、特定のデータセットの２つの変数の値を示します。データは、点または球を使用してグラフ上に配置されます。点の位置は、水平軸と垂直軸の両方の変数によって設定されます。
表
表は、ユーザーがすぐに認識して比較できるようにデータリストを表示したいときに便利です。情報を表示する方法の中でもっとも理解しやすいとは言えませんが、ユーザーが詳細を見たいときには必要になることがあります。少なくとも表は生のデータよりは理解しやすい情報であり、色を使用することでさらにわかりやすくなるでしょう。
円グラフ
円グラフは有名で魅力的な見た目ですが、ダッシュボード上のデータを視覚的に表す際に推奨される方法ではありません。実際には円グラフを解釈できるようになるためには、ユーザーが説明文に示された色情報のペアを覚えなければならない場合が多いです。覚えなければ、円グラフと説明文との間で注意を絶えず切り替えなければならず、記憶に負担がかかってしまいます。
さらに、人間は二次元の領域や角度を正確に比較することが得意ではありません。そのため、ユーザーは円グラフの角度を比較して、表示されているデータを比べるのに長い時間が必要になるでしょう。円グラフに複数のセクションがある場合、さらに複雑な比較が必要です。この点から、ダッシュボードデザインでは、円グラフを使用しないことをおすすめします。
空間マップ
空間マップは通常、地理空間データに使用されます。このマップのほとんどは、規則的な境界または不規則な境界を持つ二次元のセル配列です。これらのセルは、州や国などの存在する物理空間を表すために使用されるので、各セルの外周は、現実の対象物の形状と直接対応しています。色の濃淡でコロプレスマップを作ると、空間マップ全体のデータを簡単に比較できます。しかし、７つ以上の段階を設けると、短期記憶の限界を超えてしまい、ユーザーが比較しにくくなるので使ってはいけません。
ゲージ
ゲージは慎重に使用しましょう。ターゲットなど一部のデータを表現するときには効果的ですが、ほかの形式のデータを表現する際には、効果が非常に限定されます。なぜなら、このグラフは現実世界のゲージの模倣して表現していると見なされるからです。デザイナーは、デジタルの模造品でも、現実世界の表現に忠実である必要があります。
アイコン
アイコンは、アクションが必要な部分にユーザーの注意を向けることができるため、状態やアラートを表すのに非常に役立ちます。しかし、10個の異なる状態があるような複雑な状態では、解釈しにくくなる可能性があります。そのため、アイコンは慎重に使用し、ダッシュボードでもっとも重要なイベントのみを表示するように制限することをおすすめします。
スペースの限界を克服する
上手に表現されているダッシュボードの一例（ソース：Klipfolio）
上記のガイドラインに従うことで、使用できるスクリーンのスペースを最適化できますが、必ずしもすべての重要な情報を表示するという課題を解決できるとは限りません。表示しなければならない多数のデータをすべて表示すると、ダッシュボードのデザインが崩壊し、ユーザーが情報を理解できなくなってしまうかもしれません。このようなときは、より高度な技術が必要です。
要約された情報を表示する
すべてのデータセットを表示する代わりに、情報をグループにしてみてください。また、ダッシュボードが誰のためにデザインされているのかの判断と組み合わせることもできるでしょう。たとえば、セールスマネージャーは各地域の売上高を示す詳細なデータを求めていますが、マネージングディレクターが使用しているダッシュボードデザインでは、そのデータを１つの数値だけで表示することができます。
変化のみを表示する
再訪者は、一般的に新しい情報に興味があります。変化した情報のみを強調して表示するだけで、デザインが滅多に乱れなくなり、ユーザーは表示されている情報を簡単に理解できるようになります。
注意すべき点や異常なパターンのみを表示する
上記の手法と同様に、データ全体ではなく警告のみを表示することで、いくつかのデータを表示する必要がなくなります。たとえば、１日あたり100から200個売り上げるのが健全である場合、売上量が100を下回ったり、200を超えた日に警告を表示すると良いでしょう。これによって、たとえば毎日の値を示す棒グラフを表示するために使用していた多くのスペースを節約できます。
できるだけグラフィックでテキストを置き換える
適切に使えば、チャートはユーザーの注意を引き、表示されているデータを理解したり、類似点や相違点、一般的な傾向を比較しやすくしたりできます。しかし、何が表現されているのか理解するためにわざわざ分析しなければならないグラフィック表現は、体験に悪影響を与え、インサイトの獲得を邪魔してしまう可能性があります。
もっと知るためには？
私はダッシュボードデザインにおいてもっとも重要な領域をカバーしようとしてきましたが、この記事は決して網羅できているわけではありません。むしろ、心理学とインタラクションデザインの分野から多くの知識を引き出す魅力的な世界への導入です。このテーマにはもちろんさまざまなリソースがあります。
中でも私の経験からは、Interaction Design Foundationの「Information Visualization: Getting Dashboards Right」というコースをおすすめします。私は個人的にこのコースを取得しましたが、このコースでは、この記事で紹介しきれなかった題材まですべて扱っています。
マテリアルコネクションの開示：これは有料のレビューではなく、このコースのレビューでもありません。私はブログで紹介したいと思い、上記の商品やサービスを１つやそれ以上を無料で受け取りました。ただ、私は自分が個人的に使用していて、読者にとって価値があると信じた製品やサービスのみを勧めています。連邦取引委員会の 16 CFR, Part 255「広告における推薦および証言広告の使用に関するガイドライン」に従い、これを開示しています。
このコースに興味がある方は、Interaction Design FoundationがUsabilityGeekのすべての読者向けに３ヶ月間無料のUXデザインコースを提供しています。
結論
ダッシュボードの成功は、データを表現する個々のグラフ、パターン、傾向を認識して理解するユーザーの能力の観点から評価されるべきです。
優れたダッシュボードは、審美的な性質だけでなく、デザインを多面的に考察しなければ得られないものです。混雑していたり、グラフィックが曖昧で不自然だったり、テキストが冗長で目的がなかったりすると、ユーザーはデータを理解するために長時間解釈しなければならないため、いくら見た目が魅力的であっても役に立ちません。
このように、ダッシュボードはデザインの品質と同じくらい効果的です。ダッシュボードのデザインを改善し、ユーザー体験を向上させましょう。
