BIツール向けモバイルダッシュボードを作ろう！設計のポイントとデザイン事例集

モバイル機器は、ユーザーの日常生活とビジネスシーンそれぞれに深く浸透し影響を与えます。特にビジネス向けのモバイルアプリはこれから大きく発展する分野として注目されています。

KPI（重要業績評価指標）の達成状況を集計・表示するBI（ビジネスインテリジェンス）技術は、現在多くのビジネスシーンで使われています。いつどこにいても、ビジネスの状態を数値で確認したいというニーズが高まっており、わかりやすいダッシュボードの需要が高まっています。

現状、BIユーザーの中でモバイル機器を使っている人は30%にも満たないといわれています。そもそも複雑な情報の集まりをモバイル機器という限られたスペースで表現するのは簡単なことではありません。ましてこれをスマートに表示できるデザインは、限られた人にしかできないワザとも言えます。

そんなBI向けのモバイルダッシュボードをデザインする際に気をつけるべきポイントと、いくつかの例を紹介したいと思います。

これからの伸びしろがとても大きい分野なので、興味がある方はぜひ最後まで読んでみてくださいね。

BIのユーザー層が求めるモバイルダッシュボードとは？

Zoeyshen / dribbble

念頭におきたいのは、BIユーザーが他のアプリのユーザーと変わらないということ。つまり、BIモバイルダッシュボードも、他のアプリと同じように動きがスピーディーで直感的に使えるUIが好ましいと感じているということです。

卸売業者ならどう考える？

いかに効率的にダッシュボードを活用できるか考えましょう。例えば、卸売業の倉庫管理者が利用する場合。

扱う情報としてあげられるのは、複数の商品情報、配送スケジュール、在庫品とその量、償却、総売上なです。

その中でも例えば、総売上の情報が必要になる頻度はそれほど高くないと考えられます。それに対して、配送スケジュールの情報は毎日確認する必要があることでしょう。

Nur Praditya Wibisono / dribbble

このように、倉庫管理者が優先的に必要とする情報はある程度絞ることができます。情報の優先度は多少あれど、これらすべての情報が大きい画面で一度に表示されるのが本来のベストです。

しかしここでは、手軽に使えるモバイル機器の利便性がポイントなので、必要な情報を小さい画面上でうまく表示する方法を考えましょう。

BIモバイルダッシュボードのUI設計ポイント18選

Jesper Dahlqvist / dribbble

多くのBIシステムやアプリにおいて、使われているデザインや必要な解析能力はだいたい同じです。唯一の違いは、それぞれの企業の種類や業務体系、またどのような数値を優先的に必要としているかです。

1. 必要な情報の選択をする

Ben Mingo / dribbble

必要な情報を画面上にすべて収めることができると仮定したとき、次に考えるべきことは、ユーザーが何の情報を必要としているかです。見る必要のない情報を除いてしまいましょう。

方法としては、ユーザーの立場になって考えてみるのがおすすめです。以下のようなシチュエーションを想像してみるとわかりやすいかもしれません。

「移動中に○○を確認しておこう」

「クライエントと会う前に、○○が指標が上がった/下がったのか見ておくべきだ」

「会議中に、あと少しで達成できそうだった今月の目標を確認してみたい」

Gleb Kuznetsov / dribbble

どの情報を優先的にフォーカスするべきかは、設計の早い段階で気づけるほど良いです。

悪い情報の例をあげるとすれば、いくつかの商品の、12月の売り上げのみを画面に表示して、チャートやトレンド、外的要因や月間比較などを表示しないことでしょう。これは、すべてのデータを一度に見ることができて初めて意味をなすもので、モバイル機器向けではありません。

そもそも、デスクトップと同じ量の情報をモバイル機器に表示するのは非現実的なので、本当に必要な情報だけに絞ることが大切です。

2. インタラクション最適化ツールを導入する

必要以上のインタラクション機能には不満がたまる一方です。

『Tableau』というアプリは、画面サイズやポップアップなどを自動で最適化してくれるアプリブラッシュアップツールです。他のアプリと同じように、スクロール、ズームやピンチも行えますが、使用するデバイスによって動作は異なります。

3. レスポンシブにする

Jakub Antalik / dribbble

開発するアプリはすべてのデバイス上で問題なく動くようにしなければなりません。思い通りに動作させるためには、CSSを使って少しずつ微調整すると良いでしょう。そうすることで、より多くのデバイスでしっかりと動作するアプリが出来上がることでしょう。

デバイスのモデルやブランドの数が増えるほど、適応しなければならない数が増えるので作業は必然的に大変になります。初めからレスポンシブを意識して設計することが、一番のコスト削減方法です。

4. ユーザーの顔を想像する

Norde / dribbble

あなたのユーザーとなり得るのは、休暇中にちょっとだけ現状を確認したい人たちや、飛行機のチェックインに並んでいる時に情報を見たいとかいう、ちょっとした時間に何かを確認したい人たちです。

アプリ開発の段階で、アプリのユーザーやターゲット層がどういった人なのかをより正確に把握しておくことで、それに向けてカスタマイズできます。ニーズにフィットする機能を見つけられると良いですね。

Nimasha Perera / dribbble

見落としやすいBIユーザー像は次の通りです。

• 患者の状態を常に見張り対処しなければならない看護師
• オフィスからオフィスへかけめぐり、会社全体をコントロールしたい取締役
• ガス会社で一日の採掘量から次の週の採掘量を予想する管理者

5. ユーザーが使い慣れたデザインにする

Stelian Subotin / dribbble

最新のテクノロジーに慣れてきたユーザーは、新しいものが出るたびに厳しい基準でそれを評価しています。

新しいデザインを試みたら、ユーザーレビューがひどかったなんてことは日常茶飯事です。そんな中でも、ひとつだけ確実なことがあります。それは、少なくとも英語圏では、文章は左から右、そして上から下に向けて読まれるということです。

ユーザーがどう視線を動かすか、つまり、画面の中でどこを最初に見るのかを知ることは、アプリやデスクトップをデザインする時に重要な情報です。

6. 大きい指でも使いやすいデザイン

Gleb Kuznetsov / dribbble

モバイル機器で、リンクを開こうとしたら他のページを開いてしまったなんてことはよくあるのではないでしょうか。

ストレスが溜まりますし、特に仕事で使うものなら余計に嫌ですよね。これを解決するために、クリックする要素は大きくて簡単に操作できるようにしなければなりません。

Michal Parulski / dribbble

そのためには、リンクやフィルターをバランスよく設置する必要があります。

小さいモバイル機器の画面ではありますが、アイコンは48×48ピクセルほどの大きさを確保するようにしましょう。そうすることで、ユーザーに使いやすいアプリだという印象を与えることができます。

7. コントラストをうまく使う

Zoeyshen / dribbble

小さいモバイル画面では、美的で魅力的なデザインにすることが重要です。おすすめなのは、背景の色と手前にあるものでコントラストを作ることです。

一般的に背景色は暗めですから、少し明るめの色を使うのが無難でしょう。また、デザインだけでなくスタイルも重要です。ユーザーにとって見やすくて使いやすい画面を目指しましょう。

8. 一貫性を持つ

Sourav Maity / dribbble

アプリが一通り完成したら、データを実際に表示して見ましょう。

すると、あるところではデータが重なっていたり、もともとイメージしたのとは全然違うデザインになっていることがよくあります。

これを避けるために、デザインに一貫性を持たせることがとても大切です。基本中の基本は、同じ色を使うことです。

9. パラメタリゼーションを組み込む

Emmanuel Torres / dribbble

パラメタリゼーションとは、データを数値化することなのですが、優れたアプリはこの数値化がとてもうまくできています。

データを数値化して表示する。これができるかできないかでアプリの価値は変わってきます。

とは言っても、モバイル機器には限られたスペースしかないので、いくつかの重要なデータに絞りましょう。また、数値をまとめて、検索リストで表示する機能は必ず取り込むようにしましょう。

10. 大事なものから表示する

Here180 / dribbble

優れたBIダッシュボードは、一番重要なKPIに重点を置いて表示します。10パネルボードのようなスタイルでは、優先順位がわかりづらく、複雑なため使いづらくなってしまいます。シンプルで必要な情報をすぐにチェックできる。これを心に留めておきましょう。

11. チャートの表示方法

Agung Krisna Wijaya / dribbble

もしもチャートが必要であるなら、それを表示することに何ら問題はありません。

ただ、いくつか気をつけたいことがあります。まずはチャートの位置です。ヒエラルキーを意識して、関連するレポートの近くにおいたり、わかりやすい順番で配置するようにしましょう。

理想は、チャートなどはポップアップなどで表示されるのが好ましいです。というのも、ユーザーが違うページに飛ばされるのを防ぐことができるからです。

12. フィルターの数と種類を制限する

Oleg Frolov / dribbble

それぞれの画面に設置するフィルターの数は1つから3つくらいにしておきましょう。埋め込みすぎることで使いやすさが損なわれ、そもそものフィルターを使う意味が薄れてしまいます。

スライダーや1クリックフィルターはモバイル機器でも使いやすいです。そしてそれぞれの形も、ボタンやバーチャート、ツリーマップ、フィールドマップやハイライトテーブルなどにすると良いでしょう。

13. ツールチップの代わりにラベルを使う

Eduard / dribbble

マウスでカーソルを重ねると、チャートなどの説明が表示されるツールチップですが、モバイル機器の場合はこれをシンプルなラベルに置き換えることができます。他のページに飛ばされることなく、そのチャートが何であるかを簡単に理解することができるのでおすすめです。

14. 画面に一度に表示しすぎない

Krzysztof Krupa / dribbble

ひとつのグラフに、統計データの全てを詰め込もうとはしませんよね。要素をひとつの画面に詰め込みすぎると、見づらいのはもちろんのこと、アプリの信頼性にも関わってくる可能性があります。

簡潔でシンプルな短いナビゲーションを使って、ユーザーの時間を無駄にしないようにしましょう。

15. 本当に必要なデータとは何かを見つける

Vladimir Gruev / dribbble

モバイル機器では、すべてのデータを表示するのは不可能だという話をしてきましたが、これは開発者が解決するしかありません。そうするためには、ユーザーに必要なデータを見つける必要があります。

そもそも、ユーザはある特定の情報を素早く確認するためにモバイル機器を使っています。限られた画面上のスペースで、BIユーザーが一番必要とする情報をうまく表示できるようにしましょう。

16. データの同期をする

Visual Mukhiya / dribbble

ユーザーの注意を長くアプリに引きつけておく一番の方法は、画面上のデータを常に最新のものに更新し続けることです。

例えば、ブログのコメント欄の更新や、FacebookやLinkedInでのいいねやシェアがされることを確認したり、またはサーチエンジンでの評価がどう変わるかを確認したりできます。

これらの情報が、あなたのモバイル機器でいつでもどこでも、しかも素早く確認できたらどうでしょうか。いかにビジネスに利益があるかが想像できるかと思います。

17. 緊急に対応すべき情報を優先的に表示する

Sourav Maity / dribbble

実際にBIユーザーが求める情報を表示しましょう。例えば、取締役ならば売上履歴よりも、現在のパフォーマンスの方が見る優先順位は高いでしょう。緊急を要するパラメーターが何かを見出し、それをしっかり表示するのが使えるアプリの必要条件です。

18. データのシンプルなスナップショット

Gleb Kuznetsov / dribbble

そもそも、モバイル機器で十分な情報を表示することは可能なのでしょうか？

視点を変えて、こう考えてみましょう。すべてのデータが表示されているデスクトップの画面よりも、本当に必要な情報のみが写っているスナップショットの方が実際に役に立つ場合が多いです。

モバイルアプリダッシュボードのデザイン事例

ここからは、さまざまなアプリでのダッシュボードデザイン例を紹介したいと思います。iOSアプリもAndroidアプリもあるので、ぜひ参考にしてくださいね。

Fingertip therapy

Smart Home mobile dashboard design

Mobile Toggles

Simple white UI

Goop New York

InPartyApp

Flowerly mobile dashboard

Manager Screen

runens

Holo Cards

itrack

AUPEO

British Gas

Cowon X9

Lilypad

Catch

Switch

Say Hello

Saltwater Tank

BCN mobile dashboard design

Test Drive mobile dashboard

TargetBuy

Iphone assistant mobile dashboard

Neighborly

CirrusMD

Cafe Love

Parking defenders

Investera

Day One

App Note

Red buttons

Explore

DISCO APP

Endorphin

まとめ

スマートフォンやタブレットの普及率は凄まじく、Webデザイナーや開発者たちはモバイル向けのWebサイトやアプリを作らざるを得ない状況になっています。

しかし、Webサイトやアプリを作る方法はデスクトップ向けのものとは違うので、そこを学ばなければなりません。

通常なら無視するようなことでも、モバイル機器向けにデザインするときはよく考える必要があります。例えば、ボタンをデザインするときは守るべきガイドラインや制限があるのですが、小さすぎるボタンは使いづらくなってしまうのでモバイル機器には使えません。

そもそも、モバイルアプリやWebサイトは使いやすさをよくしようとして開発されました。

ボタンの他には、ユーザーインターフェイスの位置がモバイル機器では大切となります。画面の右下や左下に設置すると、親指で簡単にアクセスできるので便利です。しかし右利きや左利きによって使いやすさが変わることのないように、左右関係なく画面の下に設置するのが無難でおすすめです。

また、親指ではなく人差し指で操作するユーザーもいます。特に『Galaxy Note』のような大きなタブレットを親指だけで使うことはあまりありません。

ポイントは、大多数の人に合うようにデザインすることです。もちろん、開発を進めていく中で例外が出てくることもあります。特にダッシュボードデザインではその傾向が強いです。

ダッシュボードデザインでは、ボタンは画面中のどこにでもあります。画面の下に設置するとは限りません。

モバイルダッシュボードデザインは現在もっとも注目されているトレンドで、ビジネスにおいてKPIをチェックする新しい方法として確立されつつあります。また、アプリを改良する手段としてBIツールも開発者からの注目を集めています。

適切な時間に適切な情報を見やすく表示してくれるアプリは、ビジネス業界でより使われるようになってきています。最新のテクノロジーのおかげで、より効率的で素早い決断が可能になってきています。

これを機会に、ぜひモバイルダッシュボードデザインを学んでみてください！

（翻訳：Juri Ando）