この記事は作者Jeromeさんの同意を得て翻訳したもので5つの一連の記事の5つ目です。
SOURCE: Charts, assemble!
1. ハロー、ダッシュボード！
2.Web時代のチャート
3.ダッシュボード vs データビジュアライゼーション
4.プロダクトとしてのダッシュボード
5.チャートアセンブル！
SOURCE: Charts, assemble!
1. ハロー、ダッシュボード！
2.Web時代のチャート
3.ダッシュボード vs データビジュアライゼーション
4.プロダクトとしてのダッシュボード
5.チャートアセンブル！
前回の記事から 、ダッシュボードは、特定の問題を解決するためのツールであることが分かっていただけたかと思います。これらはまた、個々のチャートとデータから構成されます。
情報を選択する
ダッシュボードが特定の目的に特化しているのは望ましいです。なぜなら、解決しようとしている問題があるからこそ「1.情報の取捨選択」、「2.優先順位付け」ができるからです。それはダッシュボードデザインの本質的な2つのタスクです。繰り返し言いますが、我々が持っているすべてのデータポイント表示する必要はありません。
これらの2つのタスクを行うのにユーザー調査は大変役立ちます。デザイナーとして、我々は正しいメトリックを選んだと思うかもしれませんがユーザーにきちんと響く必要があります。私達は比較的取得やすいデータだったり、自分たちにとってうなずけるデータを好む傾向があります（つまり楽をする）。しかしユーザーによって意味のあるデータはもっと複雑で洗練されていて、でもデータを集めるのが難しいものかもしれません。
以下はその実例です。
私がFacebookでAudience Insightsに携わっていた時、私達はマーケターのために、あるグループがFacebookの中である事に対してどのように興味を持つことが出来たか？、という理解をサポートするページをデザインしました。（リンク/スクリーンショットは、 Golden State Warriorのファンの例）。私たちはFacebookのユーザーを分類する主な方法の1つは、直近の4週間のうち、何日Facebookにいたか？ということです。それは、L28と呼ばれるメトリックでFacebookが人々を理解しているハイレベルのメトリックの1つです。私たちは、このページの最初のバージョンでそれをインテグレートしました。しかしそれはFacebookだけのユニークなメトリックではないにも関わらず（よくあるメトリックなのに）、ユーザーにとって有益なものではなく、もっと適切なメトリックよりも場所をとっていました。
その代わりに目前のタスクにもっと関連の高いメトリックを組みこみました。（ユーザーのアクティビティのプリズムを通してよりユーザーの感覚が得られるような）例えば、Warriorsのファンは一般的なFacebookユーザーに比べて、PCのみという人がかなり少ないです。彼らはアプリよりもモバイルwebでサイトをちら見する傾向があり、またAndroidを使っているユーザーが多いです。彼らはShare、Comment、Likeなどでよりアクティブに行動しています。（訳者注：グレーのエリアが一般的なFacebookユーザー）
情報ハイラルキー
情報が選択され、どの情報が他よりも大事か分かれば、それをビジュアルに表現することができます。ここでは、いくつかのチョイスを紹介します。
いくつかのメトリックスを他の物より上部に、もしくは大きく表示します
ハイラルキーと優先順位付けのことを考えればこれは当然のことと言えるでしょう。一般的にユーザーに覚えてほしい最も重要なことを表す1〜3の変数を考えましょう。もし、3つ以上思いつくのであれば、タスクを精査し、そのタスクを2つに分割する必要があります。
変数の残りの部分はこれらのスーパーハイレベルのメトリックをサポートします。ここでも、典型的な状況では、（3以上は再考する余地があります）最大3つのレベルを思い付くことができます。一部のメトリックは、ハイレベルのメトリックをサポートすることができます（すなわち、異なる角度でそれらを表示したり、それらを説明します）と、いくつかの測定基準は、順番にそれらをサポートすることができます。
一緒にいくつかのメトリックを一緒に表示する
Stephenはダッシュボードは1ページにフィットすべきと主張しています。ダッシュボードの美徳は情報を一緒に表示することだからです。しかし、モダンなWebの柔軟性、モバイルの制約を考慮するとこれは絶対的ではないでしょう。しかし、複数の変数を同時に見ることは価値があることもあるというのもまた事実です。そういう意味で、cssのfixedを用いて、常に画面上に表示する要素を持つことも意味があると思います。
いくつかのメトリックを2つ目のカードに（マウスオーバー、ポップアップ、またはドリルダウンビュー）
情報のハイラルキーは、単に重要な情報を格上げするということではありません。情報の格下げもまた重要です。インタラクティブなダッシュボードの素晴らしいところは、そのための多くのメカニズムがあることです。一部の情報は、「オンデマンド用の詳細」として保持し、必要なときにのみ表示することができます。
データに与えるフォームを見つけ出す
あなたはデータを持っています。それはおそらく、時間とともに変化する（そしてヒストリーデータもあるでしょう）。そしてそれはいかに重要であるかもご存知のとおりです。
静的数値として表す（そして、さらに、その数値の精度を調整する）ことができ、または時系列として（すなわち、折れ線チャート、エリアチャート、棒チャートなど）、またはその両方も可です。
答えるためのキーとなる質問は最新の図表に対して、ヒストリー全体とある時間の中で変化したメトリックのどちらが重要で関連性があるか？ということです。もし、ヒストリーが常に重要、もしくはいかなる文脈においても害がないと思っているのであれば、もう一度考えてください、その重要性が明確に証明されない限り、それはただの要約されたビジュアルエレメントですし、誤解されやすいものでもあります。たとえそれはちいさなスパークラインでも、です。（訳者注：時系列のヒストリーをただ出せばよいというものではなく（ダッシュボードらしくはみえるけれども）、その変化に意味がないのであれば出す必要はないということです）
これは私がFacebookで関わった適切なハイラルキー構造を適用した別の例です。
Page InsightsはFacebook PageにおけるGoogle Analyticsのようなものです。当然のことながら、左上に置くメトリックは、Page Likesです。全体のポイントは、人々に何がすの数字に影響を与えたか、どのように成長したかを理解させることです。2つのハイレベルのメトリックが右側のカードの同じ列に表示されています。Post Reach for the week（今週、このFacebook Pageからコンテンツ見ている人の数）とEngagement（コンテンツにアクションした人々の数 - Like、Comment、Share、クリックなど）です。
The number of new Page Likesはラインチャートと数字の両方で表示されており、レベル2のメトリックの例です。それはトップメトリックであるTotal Page Likesをサポートしてます。折れ線グラフはメトリックレベル3のメトリックとして表示されています。それは今週のものと比較されており、それにより先週は良い週であったことを理解するのを助けてくれます。
これは私がFacebookで関わった適切なハイラルキー構造を適用した別の例です。
Page InsightsはFacebook PageにおけるGoogle Analyticsのようなものです。当然のことながら、左上に置くメトリックは、Page Likesです。全体のポイントは、人々に何がすの数字に影響を与えたか、どのように成長したかを理解させることです。2つのハイレベルのメトリックが右側のカードの同じ列に表示されています。Post Reach for the week（今週、このFacebook Pageからコンテンツ見ている人の数）とEngagement（コンテンツにアクションした人々の数 - Like、Comment、Share、クリックなど）です。
The number of new Page Likesはラインチャートと数字の両方で表示されており、レベル2のメトリックの例です。それはトップメトリックであるTotal Page Likesをサポートしてます。折れ線グラフはメトリックレベル3のメトリックとして表示されています。それは今週のものと比較されており、それにより先週は良い週であったことを理解するのを助けてくれます。
点をつなげる
最終的には、ダッシュボードはチャートの集合以上のものです。これは、アンサンブルともいえます：チャートとデータが秩序と構造によって全体として順序と構造で、全体として消費されることを意味します。一緒に表示されているチャートは一緒に見られるべきです。そのように得られた情報は、ただ並べた情報よりもはるかに有用なはずです。
Linkingは与えられたチャートのエレメントを他のチャートの影響と共に強調表示するためのコンセプトです。一般的な使用例は、一特定の時点についてのデータを見て、関連するチャートでのその時点の値を参照することです。以下に例を示します。
Linkingは与えられたチャートのエレメントを他のチャートの影響と共に強調表示するためのコンセプトです。一般的な使用例は、一特定の時点についてのデータを見て、関連するチャートでのその時点の値を参照することです。以下に例を示します。
この例では両方のグラフが同じx軸を共有することは、linkingしなくとも容易にも両方のグラフの形状を比較することを可能にしています。
各変数には、それぞれののチャート上にある必要はありません。変数は、お互いの暗黙的なリレーションを持つことができます。それらを一緒ににすることで、明示的な関係を示すことが出来るかもしれません。ここで正しいチャートを選択することによって明らかになる興味深い変数や変数の属性の関係性があります。
- 1つの変数はつねに他の物より大きいことがありえます、なぜならその2つ目は1つ目のサブセットのデータだからである。ここではそのいくつかの例を示します:
- ウェブサイト上の訪問先週の数は常にユニークユーザー数より大きくなる
- 来場者数は常に初めての訪問者数より大きくなる
- ある期間にわたって注文の累積数は、 常に 、同じ期間にわたる毎日の数よりも大きくなる
- ユーザーがブラウザを開いている時間は彼らが積極的にサイトとの対話に費やす時間よりも大きくなる
ここで興味深いのは、これらの関係が経験則からいえることではなく、定義として正しいということです。また、同じ単位で表されるメトリックだと、ほとんどの場合、同程度の大きさを持つので、それらは同じグラフ上に表示することができます。当てはまる場合、一緒に表示することで、いかに同じように変動したか、もしくはしてないかを示すことができます。
- 1つの変数はさほど重要でない2つの変数の和である可能性があります:
下の例では、さらに一歩進み、1つの変数は他の2つの変数の和 - 1つの変数という例を示しています。
ここで、前日との差として正味の数量としてのLike数を見ることが出来ます。人々がよりLikeするような2つの要因があります。Paid likes（ユーザーは広告みて、興味をもちLikeする）もしくはオーガニックlikes(ユーザーはページを訪問してLikeする）。最終的にユーザーはLikeをやめることもあります。
ここで、前日との差として正味の数量としてのLike数を見ることが出来ます。人々がよりLikeするような2つの要因があります。Paid likes（ユーザーは広告みて、興味をもちLikeする）もしくはオーガニックlikes(ユーザーはページを訪問してLikeする）。最終的にユーザーはLikeをやめることもあります。
正味のLike数 = オーガニックLike数 + paid like数 - unlike数
我々が、オーガニックLike数 + paid like数を分けた理由はFacebook Adが良いコンテンツの効果を増幅することができることを示したかったからです。視覚的には、それを残りの最も上のレイヤーに配置しました。（あなたのダッシュボードは、中立的である必要はありません。）もしそればあなたのプロダクト、会社、チーム等が提供しようとするものを示すのであれば、それをデモする機会があるのであれば、気にせずやってください。正の変数とは対照的に、負の数としてunlikesを示すことによって、我々は視覚的な読みやすく、整頓された状態を保つことができます（予測できないことになる）ユーザは、すべてのこれらの変数の視覚的な組み合わせを行うことができます。ちなみにこのチャートはページの典型的なダイナミックなページの動きを見ることができます。新しいコンテンツは新規のユーザーのピークにつながりますが、同時に何人かのユーザーのunlikeを引き起こします。
- ある変数は常に増加している可能性があります:
反対に、変数が変化していないからといって、それが意味のない情報というわけではありません。変更がないということはシステムの健全性の兆候である可能性があります。だから、変化がないことは、メッセージのメッセージがないということではないのです。
