ダッシュボード のプロトタイプを作成する方法
ダッシュボード デザインは、企業向け製品を連想させることが多いですが、ダッシュボードは、SNSアプリやゲーム、そしてモバイルデバイスなど、どこにでもあり、ユーザーにわかりやすいように簡潔に視覚化された、重要な情報が表示されています。
では、ダッシュボードのデザインとプロトタイピング、そして顧客に素晴らしいダッシュボード体験を確実に提供するためのベストプラクティスを見ていきましょう。
UXPinは、ユーザビリティ参画者やステークホルダーから有意義で実用的なフィードバックを得られるような正確なダッシュボードプロトタイプを作成できる、高度なコードベースのデザインツールです。無料トライアルにサインアップして、UXPinを使ったダッシュボードのプロトタイプ作成をぜひすぐに始めてみてください！
ダッシュボードとは
ダッシュボードとは、分析、ステータス、統計、レポートなどの重要な情報の視覚化、管理タスクの完了、設定の微調整をユーザーができるようにするユーザーインターフェースのことです。
携帯電話やデスクトップで設定するユーザーインターフェースはダッシュボードです。WordPressやShopifyなどのCMS（コンテンツ管理システム）を使ったことがあったら、その管理画面のUIはダッシュボードであり、ネット銀行のユーザー・インターフェースもダッシュボードです。
ダッシュボードの種類
ダッシュボードデザインの選択は、ユーザーに提供したい機能や情報によって異なり、ダッシュボードのUIデザインには、4つのタイプがあります：
- 分析型：可視化されたデータを表示
- 運営型：リアルタイムまたは短期間のデータを表示
- 戦略型：長期目標をKPIとステータスで可視化
- 戦術型：ハイレベルなパフォーマンスのモニタリングを表示
タイプ１．分析型ダッシュボードデザイン
製品のデザイナーは、膨大な量のデータを簡素化して表示するのに、分析用ダッシュボードを使い、そのダッシュボードには、データのハイレベルな概要が単一の数値またはグラフ表現で表示されます。
分析型ダッシュボードは通常、過去のデータを参照し、ユーザーが予測や意思決定を行うための傾向を特定できるようにします。例えば、マーケティング担当者は、分析型ダッシュボードを使用して、主要な人口統計、ユーザーの場所、およびトラフィックソースを分析し、マーケティング戦略を作成します。
タイプ２．運営型ダッシュボードデザイン
運営型ダッシュボードでは、リアルタイムまたは短い時間枠のデータが表示され、ユーザーがシステムや運営をモニタリングできるようにします。運営型ダッシュボードのデータは、多くの場合、データソースの変更に伴い、定期的にリアルタイムで変更されます。
運営型ダッシュボードでは、通常、多くのユーザーの視線が最初に集中する上部付近に、運営に必要な情報を表示します。例えば、ロジスティクスマネージャーは、運営型ダッシュボードを使って、倉庫の活動をリアルタイムでモニタリングします。
タイプ３．戦略型ダッシュボードデザイン
戦略的ダッシュボードでは、長期的な目標に向けたKPIに対するパフォーマンスの追跡ができ、このダッシュボードで複雑なデータがまとめられ、ユーザーは強みと弱点の特定ができます。
戦略型ダッシュボードには通常、【目標】、【現在の状況】、【目標達成に必要な予測】が表示され、過去の期間や年度が含まれることもあります。例えば、セールスマネージャーは、戦略型ダッシュボードを使って、売上目標に対するパフォーマンスを表示し、前年、四半期、月、週、日を比較して進捗状況を確認します。
タイプ４．戦術的ダッシュボードデザイン
戦術型ダッシュボードは、戦略型と運営型ダッシュボードのハイブリッドで、ユーザーは「プロジェクトの完了」などの目的に向かって、パフォーマンスのモニタリングができます。
戦術ダッシュボードは、戦略や意思決定の指針として、全体的なパフォーマンスとセグメント化されたパフォーマンスを可視化するためのものです。例えば、プロジェクトのダッシュボードでは、全体的な進捗状況と、チームがまだ完了させなければならないタスクが表示されます。また、戦術ダッシュボードでは、プロジェクトマネージャーがフォローアップできるように、納期遅延や期限間近の問題など、潜在的な問題を指摘することもできます。
ダッシュボードのUIタイプについては、Datapineのこちらの記事で詳細と例をご覧ください。
ダッシュボード デザインの要素
UIデザイナーは、さまざまな種類のデータの表示のために、主要な要素をいくつか使用し、この写実的表現によって、ユーザーは情報の視覚化や比較が簡単にできるのです。
データテーブル
Excelシートのようなものであるデータテーブルは、チャート、ゲージ、パイ、グラフなど、他のUI要素の作成に使用できることから、ダッシュボードのデザインにおいて重要です。テーブルは通常、多くのスペースを占有するため、デザイナーは、ユーザーが可視化の背後にあるデータを分析できる二次的なページに、こういったテーブルを配置します。
棒グラフ
棒グラフは、月次売上高のように時系列のデータ比較に適しており、さまざまな高さを視覚化することで、ユーザーはさまざまなデータポイントをパッと比較することができます。
円グラフ
円グラフは、全体を構成する複数の点におけるデータの分布を視覚化するものであり、ユーザーが自分の支出を視覚化し、どこに最も多く支出したかを確認できるため、支出追跡アプリでよく見られます。
折れ線グラフ
折れ線グラフは、特定の期間におけるパフォーマンスやトレンドの追跡に最も有効であり、線によって、トレンドがどの方向に動いているのかや、１年における月単位などの色々な重要な間隔での変化を簡単に確認することができます。
ゲージ
デザイナーは、進捗状況やステータスの表示にゲージを使用することができます。進捗ゲージに数値を表示することで、ユーザーは2つのビジュアルを見ることができ、より分かりやすくなります。
また、特定のシステムをモニタリングする際にも、ゲージを用いたステータスの表示ができます。例えば、倉庫管理システムで、包装担当者の1日の目標達成に向けた現在のパフォーマンスを、【不十分】【平均以下】【許容範囲】【最適】で表示することができ、インジケータが許容範囲を下回ると、マネージャーはパフォーマンスの問題を調査し、対処することができます。
メトリクスや数字
デザイナーは、例えば現在の収益を表す数値など、主要な値の表示や、視覚化のサポートのためにメトリクスを使用できます。
メトリクスは、ユーザーが情報をより簡単に理解することや、認知的負荷の軽減といった目的において、単独の使用が最も効果的です。
ダッシュボード デザインのプロセス
The Data SchoolのeBookにある「Dashboard Prototyping and Feedback」では、ダッシュボードデザインとプロトタイピング戦略の概要を４つのステップで説明していますが、筆者たちはこれを、以下のような包括的な6ステップのエンドツーエンドのダッシュボードデザインプロセスを含めるべく、若干手を加えました：
- レビュー
- スケッチ
- フィードバック
- プロトタイプ
- テスト
- ハンドオフ
ステップ１．レビュー
最初のステップは、ダッシュボードの目標と要件を確定するために調査を見直すところであり、デザイナーは、デザインの構成と優先順位を決めるのに、ユーザーのニーズと利用可能なデータを一致させなければいけません。
ここでスケッチを開始するために必要なUIと要素のリストを作成しましょう。この要素を重要度順に並べると、ダッシュボードのUIに優先順位をつけやすくなります。
ステップ２．スケッチ
ダッシュボードのデザインは、複雑で時間のかかる作業であることから、デザイナーは、忠実度の高いモックアップやプロトタイピングに取りかかる前に、アイデアのスケッチや改良が欠かせません。
デザイナーはスケッチを使って、データをどのように表現するのが最適かを判断します。1つのUIに複数のグラフィックがある場合は、1ページにまとめる前に、それぞれを切り離してスケッチしましょう。
また、 Data SchoolのeBookでは、スケッチする際に以下の2つを考えることを推奨しています：
- ユーザーはどのような判断が必要か
- その判断のために、ユーザーは何を知る必要があるか
ダッシュボードは、他の多くのUIレイアウトよりも色々とたくさんあるので、データは最小限にとどめましょう。重要なデータがたくさんある場合は、情報を分類して2ページ以上に分けることを検討しましょう。
ステップ３．フィードバック
デザイナーがデジタルモックアップやプロトタイプを作成する前に、チームメンバーやステークホルダーからのフィードバックは欠かせません。このフィードバックで、時間のかかるデジタル処理に入る前に、デザインを改善し、問題を解決できるのです。
次のステップに進む前に、何度かイテレーションがあることを頭に入れておきましょう。
ステップ４．プロトタイプ
ペーパープロトタイプやメモを使い、ワイヤーフレームやデジタルモックアップ、プロトタイプを作成しましょう。ゼロから始める必要がないように、コンポーネントライブラリやUIキットの使用をお勧めします。
UXPinには、Material Design UI、Bootstrap、Foundationなど、ダッシュボードのプロトタイプに最適なライブラリである内蔵デザインライブラリがあります。
また、Mergeを使ってデザインシステムやコンポーネントライブラリをUXPinに同期させることもできます。デザイナーは、画像ベースのデザインツールでは不可能な、完全に機能するグラフやチャートを構築できるため、Mergeテクノロジーを採用したUXPinは、ダッシュボードのプロトタイピングに最適です。
ステップ５．テスト
プロトタイピングとテストは、繰り返し行われるプロセスであり、UXデザイナーは、確実にユーザビリティの問題が最終製品に影響しないよう、プロトタイプを総合的にテストする必要があります。
ユーザーのニーズを満たしながらビジネス価値を最大化するデザインを確実に行うのに、エンドユーザーや主要なステークホルダーからのフィードバックは重要です。
ステップ６．ハンドオフ
ダッシュボードのデザインハンドオフは複雑で厄介なものです。このデザインハンドオフチェックリストに従って、プロセスを合理化し、デザイナーとエンジニア間の連携を向上させることをお勧めします。
ダッシュボードデザインのベストプラクティス
コンテンツの優先順位
調査段階で、どのデータが最も重要かをユーザーに尋ね、デザインプロセスの指針とすることが重要です。データを【ミッションクリティカル】と【セカンダリ】に分けることで、コンテンツの優先順位や配置を把握するようにしましょう。
シンプルイズベスト
ダッシュボードのレイアウトを可能な限りスッキリまとめることを常に意識しましょう。ダッシュボードのUIは色々とたくさんあるので、認知負荷とユーザビリティに深刻な影響を与えかねません。
モバイル優先のデザイン
ダッシュボードをデスクトップで美しく見せるのは簡単ですが、本当の課題は、モバイルフレンドリーなダッシュボードの作成です。モバイル優先のダッシュボードデザインの戦略を取ることで、以下の2つの問題を解決することができます：
- モバイルユーザーからのダッシュボードへのアクセスができるようにする
- UI要素の軽減
一貫性を保つ
どのようなUIでも一貫性は重要ですが、複雑なダッシュボードのデザインでは、一貫性は不可欠です！デザインシステムを使えば、タイポグラフィー、色、スペーシング、レイアウト、その他のUI要素をデザイン全体で一貫性を保つことができます。
余白は倍取る
デザイナーであるタラス・バクセビッチ氏は、「10 Rules for Better Dashboard Design」の中で、コンテンツを区切るのに、余白を倍取ることや空白を使うことを推奨しています。コンテンツが余白に触れたり、近すぎたりすると、読みづらいですからね。
スクロールしない！
また、彼はダッシュボードをスクロール可能にすることが最大のデザインミスの1つであると述べています。できるだけ要約し、新しい画面に移動させるか、タブを作成してユーザーがコンテンツを切り替えられるようにしましょう。
柔軟性を持つ
組織や個々のプロジェクト内でも、ユーザーのニーズや優先順位はさまざまであることから、一律のダッシュボードのレイアウトを作ることは無理です。
ユーザーが自分のニーズに合わせてダッシュボードをアレンジできる機能を提供することで、「これひとつで全部できます」という課題を解決しながら、ポジティブなユーザーエクスペリエンスを実現します。
UXPin Mergeを使ったダッシュボードのデザインとプロトタイプの作成
UXPin Mergeは、ダッシュボードのプロトタイピングとテストを正確に行うことができる唯一のデザインツールです。静的なデザインを使用する代わりに、デザイナーは最終製品のような外観と機能を持つコードコンポーネントを使用して、ダッシュボードのプロトタイプを構築することができます。
MUI ライブラリ統合から React コンポーネントを使用して、一行のコードも書くことなく Merge ダッシュボードを構築してみましょう！MUI コンポーネントをドラッグ＆ドロップするだけで、完全に機能するダッシュボードやその他のユーザー インターフェイスの構築ができます。
無料トライアルにサインアップして、UXPinの高度なコードベースデザイン機能をぜひお試しください！
