ダッシュボードの設計-考慮事項とベストプラクティス

この記事の音声バージョンを聞く

ダッシュボードは、関連性のある実用的なデータを表示し、統計と主要業績評価指標（KPI）を追跡するデータ視覚化手法を使用して、データベースのインテリジェンスを提示するためのユニークで強力な方法です。 ダッシュボードは、このデータをすばやくスキャンしやすい形式で表示し、最も関連性の高い情報を一目で理解できるようにする必要があります。

この用語は、従来の自動車のダッシュボードから生まれ、デジタルの世界で同じ機能を果たすように進化しました。 彼の本の中で、スティーブン・フューはそれを最もよく述べています：

ダッシュボードは、1つ以上の目的を達成するために必要な最も重要な情報を視覚的に表示したものです。 情報を一目で監視できるように、1つの画面に統合および配置されています。

この記事では、戦略的、分析的、運用的、および情報的な例と、タイプに関係なく、成功するすべてのダッシュボード設計の中心にある基本原則について概説します。

データの視覚化に適切なアプローチをとることは、ダッシュボードを成功させるための基盤を築く上で重要な機能です。 データの視覚化とは、グラフィックや画像を介してデータを表示することです。その主な目的は、意思決定者がパターンを識別したり、テキストベースのアプリケーションでは検出されない可能性のある難しい概念を理解したりできるようにすることです。

彼らの著書、 Data Visualization 、Noah Iliinsky、JulieSteeleは次のように述べています。

データの視覚化を設計する際の設計者の目的は、読者に受け入れられ、容易に理解できる成果物を作成することです。 すべての設計の選択と特定の実装は、この目的を果たす必要があります。

優れたダッシュボードの主な特徴

効果的なダッシュボードには、実用的で有用な情報が一目でわかります。 複雑なデータの視覚的表現を簡素化し、利害関係者が重要な洞察を理解、分析、および提示するのに役立ちます。

優れたダッシュボードは、明確で直感的で、カスタマイズ可能です。

• 彼らは情報を迅速に伝達します。
• 情報を明確かつ効率的に表示します。
• それらは、時間の経過に伴うデータの傾向と変化を示します。
• それらは簡単にカスタマイズできます。
• 最も重要なウィジェットとデータコンポーネントは、限られたスペースに効果的に表示されます。

主要なユーザー要件に合わせてビジュアルデータと情報を最初にカスタマイズすると、使いやすさが向上し、さまざまなユーザーペルソナが不要になります。

優れたダッシュボードは、ワンクリックですべてを提供します。

• すべての重要な情報にすぐにアクセスできます。
• データが優先されます。
• 情報は、1つの画面に視覚的な階層で明確に表示されます。
• この設計は、まばらで明確な初期データを含む一貫性のある概要を提供し、さらにドリルダウンする機会を追加します。
• 要素（チャート、テーブル、フォーム）は最小化されたビューに表示され、モーダルウィンドウで詳細を表示したり、詳細のあるページに移動したりできます。
• このデザインは、フィルターを使用して使いやすさを向上させ、ユーザーがデータの表示方法をカスタマイズし、ラベル、カテゴリ、およびKPIを使用してコンテンツをフィルター処理できるようにします。

複雑さの軽減により明確性が提供されます

データに圧倒される世界では、明確な情報を提供することは、達成するのが最も難しいことの1つです。 ダッシュボードに最も関連性の高いデータのみを表示することが不可欠です。表示する情報が多いほど、ユーザーが必要なものを見つけるのが難しくなります。

選択するデータが多すぎる場合、設計者は最も関連性の高いサブセットのみを表示する必要があります。 誤解を招くような不明確な指標に優先順位を付けて慎重に削除する必要があります。

効果的なダッシュボード設計の決定は、以下によって導かれる必要があります。

• プロジェクトの目標
• データの性質
• ユーザーのニーズ

ビジュアライゼーション（または他の種類のコミュニケーション）を読むとき、読者は問題に専念するための限られた量の頭脳を持っています。 この頭脳の一部は、視覚化のデコードに専念します。 残っている頭脳は、メッセージを理解するために使用できます（読者がまだ欲求不満をあきらめていない場合）。 ノア・イリンスキーとジュリー・スティール（データの視覚化）

ダッシュボードの主な目的は、複雑な情報にアクセスしやすく、簡単に消化できるようにすることです。 したがって、ユーザーの認知的負荷と検索に費やす時間を最小限に抑えるために、データを表示するインターフェースはクリーンでわかりやすいものにする必要があります。

情報アーキテクチャは、サポートまたはセカンダリメトリックへのアクセスを許可しながら、最初に重要なデータを提示する必要があります。 プログレッシブドリルダウンシステムは、一般的な概要から始まり、さらに詳細に進むように設計する必要があります。これにより、データの優先順位付けが容易になり、明確になります。

ダッシュボードの目標を決定し、適切なデータを表示する

ダッシュボードを設計する場合、成功するダッシュボードデザイナーは、解決すべき問題と、人々がデータから取り除く必要のある重要で実用的な洞察に焦点を当てた、明確に定義された一連の目標から始めます。

優れた設計目標は、効率的で正確な実行を促進します。 目標設定にSMARTフレームワークを採用することで、特定の、測定可能で、実行可能で、現実的で、時間ベースの目標に焦点を当てます。

ダッシュボードの設計目標を決定する際に尋ねるいくつかの重要な質問：

• 特定の目標を達成するために、ユーザーはいくつのステップを踏む必要がありますか？
• インターフェースは、ユーザーが自分で目標を達成するのに十分直感的ですか？
• ユーザーが目標を達成するために必要な情報は何ですか？

特定のダッシュボードデザインの目標を決定するには、「このデザインがユーザーにとってどのような特定の問題を解決するのか」と尋ねて定義します。 答えは、どのメトリック、プロパティ、値、ビジュアル、およびデータが重要であるかについての洞察を提供します。

目標中心の設計は、実際の問題の解決策に焦点を当てており、すべての優れたダッシュボード設計の基盤です。 ビジネスの目的を明確に理解することから始め、ユーザーの目標を検討してから、伝達する必要のある重要な情報を伝えます。

ダッシュボードデザインのコンテキスト

ダッシュボード設計の最大の課題の1つは、複数のペルソナにサービスを提供することです。 各ユーザーの役割を定義したら、ニーズがどこで重複し、どこで分岐するかを理解することが重要になります。

効果的なコミュニケーションは、成功するすべてのダッシュボード設計の基本原則です。 ユーザーが自分自身を見つける可能性のある潜在的なシナリオを予測することは、ユーザーの状況をよりよく理解するのに役立ちます。

設計時には常にユーザーのコンテキストを念頭に置いてください。ユーザーの技術的知識、システム全体に精通していること、目標などを特定してください。

ユーザーの行動とコンテキストを判断するときは、必ず次の質問をしてください。

• デザインは、訪問者が読むことに慣れている方向を考慮していますか？
• ダッシュボードとの対話には技術的な知識が必要ですか？
• ユーザーは数回クリックするだけでほとんどのアクションを実行できますか？
• ドリルダウンメニューを作成することにより、デザインはユーザーコンテキストと一致していますか。 示唆に富む図像とカラーパレットを使用していますか？

ダッシュボードのデザインで使用されるカラーパレットも、コンテキストと見なす必要があります。 多くの企業間SaaS製品ダッシュボードは、数時間連続して使用されるため、暗いテーマのUIで設計されています。

暗いテーマのUIは、目の疲れを軽減し、インターフェース内の視覚的な明瞭さをサポートするのに役立ちます。 ただし、このアプローチを採用するには、デザインの方向性を注意深く評価する必要があります。これは、以前のデザインブログの記事「ダークUIの推奨事項と禁止事項」で概説されている長所、短所、および潜在的な落とし穴です。

ユーザー調査によるダッシュボードデザインの改善

ユーザー調査は、関連性があり、明確で、簡潔なデータがユーザーに提示される環境を作成するのに役立ちます。 これにより、使用方法やアクセス方法ではなく、探しているコンテンツやデータについて考えることができます。

一部のダッシュボードは機能する必要があります。または、同じ基本的なダッシュボードを見ているさまざまな役割のユーザーが簡単にカスタマイズできるようにする必要があります。 ユーザー調査は、ユーザーの目標、メンタルモデル、環境コンテキスト、および問題点を特定するのに役立つため、重要です。 これらは、最終的なダッシュボードの設計に大きく影響する要因です。

ユーザーエクスペリエンスデザイナー、研究者、作家のマイククニャフスキーは、「デザインが視聴者に与える影響を理解するプロセス」であると述べています。

設計者は、さまざまなユーザータイプを定義し、それらの目標がどこで同じで、どこが異なるかを理解する必要があります。 あるユーザータイプと別のユーザータイプで最も実用的な情報はどれですか？ ユーザータイプごとに異なるレイアウトが必要かどうか、またはより一般的なユースケースの解決策があるかどうかを検討する必要があります。

このことを念頭に置いて、基本的なワイヤーフレームから始めて、ユーザー調査段階で実際のユーザーでテストできるプロトタイプに進むことをお勧めします。 真に価値のある洞察は、わずか5人のユーザーによる短いユーザー調査フェーズから得られる可能性があり、将来的には膨大な時間を節約できます。

ダッシュボード設計における段階的開示

段階的開示は、混乱を減らすことによってユーザーの注意を維持するために使用される手法です。 段階的開示のシステムを作成すると、ユーザー中心の環境を作成するのに役立ちます。これにより、ユーザーの注意を優先し、間違いを回避し、時間を節約できます。 また、ユーザーは自分にとって重要な主要な機能に集中でき、不要な機能や興味のない機能など、すべての機能を強制的に実行する必要はありません。

段階的開示はダッシュボード設計のベストプラクティスであり、エラー率も大幅に削減されます。 システムが機能の優先順位付けに基づいている場合、効率が向上し、ユーザーがダッシュボードの理解を深めるのに役立ちます。

段階的開示は、高度な機能またはほとんど使用されない機能をセカンダリ画面に延期し、アプリケーションの学習を容易にし、エラーが発生しにくくします。 –ヤコブ・ニールセン

アニメーションは、複数の機能を実行しながら、さまざまなユーザーのニーズを満たすための優れた方法です。 これは、データとビジュアルのロード中に使用するのに最適なオプションであり、高度な段階的開示ソリューションです。

アニメーションは、動きの錯覚を作り出すプロセスです。 それは進歩の感覚と絶え間ないフィードバックを生み出すダイナミックであり、それによってユーザーの不確実性を減らし、知覚されるパフォーマンスを向上させます。

ダッシュボードで段階的開示を使用する利点：

• ユーザーの不確実性と不安を軽減します（進歩の兆候を表示することにより、ユーザーはすべてが意図したとおりに機能していることを保証されます）
• ユーザーを待たせるのではなく、見るもの（データの部分的な表示）をユーザーに提供する
• 今後のステップに対する明確な期待をユーザーに提供し、情報が階層的に提示される方法の理解を深めます

プログレッシブ開示とデータのロードに関する潜在的な問題には、次のものがあります。

• 不適切な方法での指標と開示の使用。 短い読み込み時間と無駄な手順は、気を散らすものを作成し、ユーザビリティの原則に反します。
• 進捗状況を明確に示すことなくデータの取得に遅れが生じると、ユーザーの不確実性とバウンス率の上昇につながる可能性があります。
• 静的な進行状況インジケーターを使用することはほとんど意味のないソリューションであり、進行状況に関する十分な情報を提供しません。これは、ユーザーの不確実性とより高いバウンス率につながる可能性もあります。

概要

ダッシュボードは、データやその他の情報を伝達するための強力な方法です。特に、ダッシュボードの設計のベストプラクティスと適切なデータの視覚化に従った、ユーザー中心の目標中心の設計を使用します。 すべてのダッシュボードは異なり、独自の目標、要件、および制限がありますが、これらの基本原則に従うと、詳細に関係なく優れたデザインを作成するのに役立ちます。

• 何よりもまず、ユーザータイプに共感し、その目標を理解します。
• 示唆に富むビジュアル、ラベル、段階的開示手法、アニメーションを利用して、ユーザーに明確なストーリーを伝えます。
• ユーザー調査手法を適用して、複雑なことを簡単にします。
• ドリルダウンシステムで、適切なタイミングでデータと情報を明らかにします。
• データの視覚化を使用して、意味のある方法で情報を表現します。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法