apeescape2.com
  • メイン
  • デザイナーライフ
  • ライフスタイル
  • 計画と予測
  • 分散チーム
Uxデザイン

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

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

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

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



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

モバイルダッシュボードのデザイン

によるモバイルダッシュボードのデザイン メイソン・ヤーネル Mixpanel用

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

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

SQL Server2008でのパフォーマンスチューニング

彼らの本の中で 、 データの視覚化 、ノア・イリンスキーとジュリー・スティールは次のように述べています。

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

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

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

ダッシュボードデザインの要素

契約書の ApeeScapeDesignerによるダッシュボード Wojciech Dobry

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

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

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

カスタマイズ可能なダッシュボード要素の表現

カスタマイズ可能なダッシュボード要素– 契約書 ApeeScapeDesignerによる Wojciech Dobry

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

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

デスクトップ用のダッシュボードデザイン

ApeeScapeDesignerによってモーダルのダッシュボードから取得された詳細データ ミクロスフィリップス

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

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

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

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

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

ダッシュボードのデザイン要素

ApeeScapeDesignerによるダッシュボードデザイン ステリアン・スボチン

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

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

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

iOS用のモバイルダッシュボードデザイン

によるモバイルダッシュボードのデザイン Jan Losert

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

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

優れた設計目標は、効率的で正確な実行を促進します。を採用する S.M.A.R.Tフレームワーク 目標設定のために焦点を当てる 明確な 、 測定可能 、 実用的 、 現実的 、および 時間ベース 目的。

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

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

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

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

ダッシュボードデザインでのドーナツチャートの使用

ApeeScapeDesignerによるダッシュボードデザイン ミクロスフィリップス

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

ページオブジェクトモデルとは

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

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

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

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

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

ApeeScapeDesignerによるダッシュボードデザイン ミクロスフィリップス

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

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

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

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

分析ダッシュボードのUIデザイン

ダッシュボードUIのデザイン、分析、およびインフォグラフィックは暗いUIでもうまく機能しますが、十分なコントラストを確保するために「注意して処理」する必要があります( アレックスギレフ )。

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

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

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

ダッシュボードデザインの概要

ApeeScapeDesignerによるダッシュボードデザイン ステリアン・スボチン

ユーザーエクスペリエンスデザイナー、研究者、著者のマイククニャフスキーは、 「デザインが観客に与える影響を理解するプロセス。」

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

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

ダッシュボードデザインの忠実度の低いワイヤーフレーム

ダッシュボードワイヤーフレーム アーロンサナン

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

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

段階的開示はダッシュボード設計のベストプラクティスであり、エラー率も大幅に削減します。それは効率を改善し、ユーザーが彼らの改善を助けるでしょう 理解 システムが機能の優先順位付けに基づいている場合のダッシュボードの数。

ダッシュボードUIの設計とデータの視覚化

ダッシュボードのデザイン Jan Losert

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

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

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

ダッシュボードUIアニメーション

ダッシュボード ウェルギリウスパナ

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

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

段階的開示とデータの読み込みに関する潜在的な問題には、次のものがあります。

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

ダッシュボードのUIとUXのデザイン

ダッシュボードのデザイン メイソン・ヤーネル

概要

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

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

•••

ApeeScapeデザインブログの詳細:

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

計算写真におけるPython画像処理の概要

技術

計算写真におけるPython画像処理の概要
デザイントーク:InVisionのAarronWalterとのより良いデザイナーと開発者のコ​​ラボレーション

デザイントーク:InVisionのAarronWalterとのより良いデザイナーと開発者のコ​​ラボレーション

Uxデザイン

人気の投稿
冷戦技術:それはまだここにあり、まだ使用されています
冷戦技術:それはまだここにあり、まだ使用されています
WordPressで排他的なカスタム分類法を作成する方法
WordPressで排他的なカスタム分類法を作成する方法
モバイル向けの情報アーキテクチャの原則(インフォグラフィック付き)
モバイル向けの情報アーキテクチャの原則(インフォグラフィック付き)
ラテンアメリカM&Aのベストプラクティス
ラテンアメリカM&Aのベストプラクティス
ハイブリッドパワー:フラッターの利点と利点
ハイブリッドパワー:フラッターの利点と利点
 
差し迫った商用ロボット革命
差し迫った商用ロボット革命
購入への道を開く– eコマースUXのベストプラクティス
購入への道を開く– eコマースUXのベストプラクティス
Ecto、同時Elixirアプリ向けの妥協のないデータベースラッパーをご覧ください
Ecto、同時Elixirアプリ向けの妥協のないデータベースラッパーをご覧ください
デザイン心理学と素晴らしいUXの神経科学
デザイン心理学と素晴らしいUXの神経科学
リモートワーカーに関するトップ5の神話を破る
リモートワーカーに関するトップ5の神話を破る
人気の投稿
  • llc税分類sまたはc
  • c ++衝突検出
  • あなたが支払ったと思うようにウェブサイトをだます方法
  • バイヤーの交渉力
  • あなた自身のグーグルグラスを作る
  • Cコーディングを学ぶ方法
カテゴリー
プロジェクト管理 ライフスタイル リモートの台頭 仕事の未来 デザイナーライフ Uiデザイン ツールとチュートリアル 技術 分散チーム トレンド

© 2021 | 全著作権所有

apeescape2.com