もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。
アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに勝利することはできませんし、奉仕に対して栄光や称賛を受けることはありません。
ではこのアシストとWebの「ダッシュボード」との間には、どのような関係があるのでしょうか？ 私はダッシュボードもアシストのように、デジタルの世界における影の立役者だと思うのです。ダッシュボードもアシストも、ひたすら奉仕し続ける存在です。疲れ知らずに働きますが、決して称賛を受けることはありません。デジタルの時代のなかで私たちが接するデータの量が増すにつれて、ダッシュボードはより重要な存在になってきています。優れたダッシュボードは、私たちがデータの海に溺れるのを防いでくれます。まるでデータでできた不思議の国に繋がる窓のように、私たちがデータを操作し、解釈して、データが伝えようとする物語を紐解くのを手助けしてくれるのです。
ダッシュボードはあまり重要だと見なされてきませんでしたが、ダッシュボードを上手にデザインするのは意外と難しいものです。そこでダッシュボードをデザインするときに覚えておくべき、10個の重要なガイドラインをお伝えします。
１. データではなくユーザーから始める
そもそも、ダッシュボードとはなんでしょうか？ ダッシュボードは、単にデータを視覚的に表現したものや、綺麗に表示したものではありません。『Information Dashboard Design』の著者であるStephen Few氏は、ダッシュボードを以下のように定義しています。
１つかそれ以上の目標を達成するために必要な、もっとも重要な情報を視覚的に表現したもの
優れたダッシュボードは、個別のデータについて表したものではありません。データではなく、情報を表すものであり、その情報を使ってユーザーが疑問を解決するために存在します。ユーザーの疑問とは、たとえば「状態がどうなっているか？」「今なにを心配するべきか？」「今日上司はなにを頼んでくるだろうか？」といったものです。
これらの疑問や重要な情報がなにかを知らなければ、決して優れたダッシュボードをデザインすることはできません。ユーザーがダッシュボードを使ってどうにか疑問を解決できることを期待して、ただ画面にデータを表示することもできます。しかし、もしデータ視点からデザインを始めてしまえば、正しいデザインからかけ離れてしまうでしょう。
ユーザー視点でデザインを始めれば、もっとも重要な情報がなにかを定めることができます。ユーザーの目的や解決したい疑問を明確にすることができるのです。ダッシュボードが使われるだろう状況を理解し、最終的には、ユーザーにとって本当に使いやすいダッシュボードを作り上げることができるでしょう。
では、ユーザーの視点でデザインを始めるとはどういうことなのでしょうか？ それは、データに手をつける前にユーザーに聞いてみるということです。ユーザーがどのような情報を必要とし、どのような問題を解決したいと思っており、どのような最終的な目的を持っているのか聞いてみましょう。どのような人がダッシュボードを使うのか、どうしたら彼らが使いたくなるか、なにを必要としているのかを理解しましょう。ユーザージャーニーのどこにダッシュボードを位置づけるのが適切か、どのようにダッシュボードにアクセスするのか、そもそもダッシュボードが必要だと感じているのかを突き止めましょう。
以上の要素は、通常ユーザーインタビューやアンケートによって明らかにすることができます。さまざまな立場のユーザーにインタビューすることで良質な定性データを集め、それを１つかそれ以上のアンケートで集めた膨大な定量データによって補完するのが理想的です。
２. ユーザーをデータの海に溺れさせない
適切にデザインされていないダッシュボードを見ると、私は『ウォーリーをさがせ！』のようだと思います。『ウォーリーをさがせ！』とは、おかしな格好をしたウォーリーというキャラクターを、絵の中から探し出す絵本です。普通なら簡単に見つかるように思えますが、その絵本には非常にたくさんのものが描かれています。多くの視覚的ノイズがあり、正しいウォーリーを見つけるのはとても大変です。見つけるのに５分は掛かるでしょうし、見つけたと思ったらすぐに見失ってしまいます。
絵本ではこのような心理的苦痛を楽しめますが、ダッシュボードデザインにはこの苦痛を適用したくないでしょう。データを詰め込みすぎたノイズだらけのダッシュボードでは、見つけにくいインサイトを探し出すことができず、ユーザーは頭が痛くなってしまいます。
ウォーリー探しはゲームとしては楽しいですが、ダッシュボードでは迷惑でしかありません。
ダッシュボードでユーザーに提供すべき情報について考えるときは、「この情報は本当にユーザーにとって有用なのか？」という疑問につねに答えるようにしましょう。もし有用ならば表示し、そうでないなら取り除いてください。また、未処理のデータを見せてユーザーに負荷をかけてもいけません。つまりケーキを食べたいユーザーに、ケーキを作るための材料を提供してはいけないのです。
３. 概要を述べてから、データを深堀りできるようにする
優れたダッシュボードは新聞のようなものです。10代の男の子が家のドアに届けてくれるということではなく、手に取って最初のページを見るだけで、一番重要なできごとについて十分に把握できるということです。もっと深く知りたいのなら、もちろん残りのページを読み進めていけば書いてあります。しかし、最初のページだけでも概要を掴めるようにするべきです。
新聞の最初のページのように、データの概要をフロントページで提供しましょう。ユーザーが始めにもっとも重要な情報を理解できるようにし、さらに詳しく知りたければデータを掘り下げられるようにしてください。もっとも重要な情報を最初に提供するために、どのようにデータを要約し、優れた視覚的デザインを作るのかを考えましょう。
Dribbbleの分析ツールは、概要と詳細データの階層構造が優れています。
４. ユーザーが見やすいデータ表現をする
データを可視化することはとても重要です。図表やグラフなどを用いてデータを可視化し、ユーザーがデータを解釈し分析しやすいようにしましょう。しかし、データの表現をやり過ぎてはいけません。表現の度が過ぎると、ユーザーはうんざりしてしまいます。
データが示していることを伝えるのに、もっとも効率的な方法を考えましょう。棒グラフは通常円グラフよりも見やすいです。ただ、グラフの要素を分割しすぎないようにしましょう。
これらの例のようにユーザーの妨げになるデータの可視化は避けましょう。
５. ユーザーが簡単に操作できる
ダッシュボードは、別のたくさんのダッシュボードと一緒に表示されることがよくあります。まず概要のダッシュボードがあって、その下により詳しい情報が載っていることが多いです。したがって、自分が今ダッシュボードのどこにいるのかがわかりやすいだけでなく、異なるダッシュボード間の移動を簡単に操作できる必要があります。
画面の左側にパネル、上側にタブを表示するといった、よく使われるナビゲーションのデザインパターンを使ってみましょう。ダッシュボードがわかりやすいかどうか実際のユーザーでテストすることを忘れないでください。また、ユーザーがなんのためにどのダッシュボードに移動すべきなのか判断しやすいように、明快なラベルと指標を提供しましょう。カードソートを使い、ラベルが適切かどうかユーザーでテストすることも考慮してみてください。もしダッシュボードに階層があるのならば、パンくずリストを使用し、ユーザーが今どこにいるのか認識しやすいようにしましょう。
Google Analyticsでは、ユーザーは画面左のパネルを使って簡単に操作することができます。
６. ダッシュボードが整頓されている
優れたダッシュボードは、綺麗に整頓されています。優れたダッシュボードには、必要のないテキストや画像はありません。余白や配列、グループ分けなどを活用して、関連する情報を視覚的につなげ、散らかりやノイズがないようにしましょう。
不必要な背景画像で見づらくならないようにしましょう
７. データが見やすいように色を使う
データを分析し解釈する際に、色は素晴らしい効果を発揮します。たとえば赤色、橙色、緑色のインジケータで状態を表し、色の濃淡によって数値の高低を示すことができるでしょう。ただ、色使いは一貫するように心掛けてください。２つのダッシュボードで緑色の意味が異なっているべきではありません。また、色を過剰に使うのも避けましょう。幼児があらゆる色を用いてデザインしたようなダッシュボードは見たくないはずです。
Google Analyticsでは、ユーザーがどこの国からWebサイトを訪れているのか示すために、色を用いています
８. 必要に応じてヘルプと説明を追加する
ダッシュボードは自明であることが理想です。ダッシュボードの意味を詳しく説明しなければならないとしたら、デザインが適切でない証拠です。ただ、使用頻度が低いダッシュボードや、ユーザーが初めて使う際には、いくつか追加のヘルプや説明を加える必要があるでしょう。
また、有用な情報ならば、テキストで補足することも考慮してください。たとえば、図表の意味やデータの数値を説明することができるでしょう。ダッシュボードがテキストで埋め尽くされないように、ヘルプマークやリンクをクリック、またはホバーしたときに表示されるようにするべきです。
９. よく使われるパターンを用いる
ユーザーが見慣れている図表や言葉、アイコン、デザインを使いましょう。まったく新しい図表は美しく見えるかもしれませんが、ユーザーを苛立たせてしまう可能性が高いです。私は特別な理由がない限り、ユーザーが見慣れている可能性が高い基準やパターンを使うように心掛けています。
10. ユーザーテストを行い、反復する
優れたダッシュボードデザインの10のガイドラインは、（「データではなくユーザーから始める」という文字通り）ユーザーで始まり、ユーザーで締めくくられます。なぜなら、彼らと定期的に接触してインプットやフィードバックを得なければ、優れたダッシュボードをデザインすることはできないからです。
ユーザーから始めるだけでなく、定期的にユーザーと接触して、デザインが有効か確かめる必要があります。ワイヤーフレーム作成やスケッチといった初期段階から正確なモックアップに至るまでユーザーと関わり続けるべきです。ユーザーがダッシュボードを理解しているか、大切な情報が抜けてないか、必要のない情報が表示されていないかといった質問に答えていく必要があるでしょう。
もっとも重要なのは、ユーザーがダッシュボードを用いて目的を達成できているかどうかです。これを確かめる方法がユーザビリティテストです。たとえばある情報をダッシュボードの中から探してもらったり、ある状態を観察してもらったりして、ユーザーがダッシュボードを実際に使用するときに必要な操作を実行してもらいましょう。ユーザーが実行したことや言ったこと、あらゆるユーザビリティの問題を記録してください。テストし、反復することを繰り返すことこそが、ただ使いやすいだけでなく、本当に価値のあるダッシュボードを作るための唯一の方法なのです。
画像引用元
GeckoBoard – Marketing dashboard example
Where’s Wally: Fairground by Martin Handford
Dribble analytics dashboard example
Google Analytics dashboard examples
