トップデータ視覚化の例とダッシュボードのデザイン

データの視覚化とダッシュボードのデザインは芸術と科学の両方であり、最初に表示されるほど簡単に作成することはできません。 トップUXデザイナーとビジュアルデザイナーは、ユーザーを混乱させることなく、複雑な情報をどのように説明しますか？

3つの方法：優れたダッシュボードデザインの背後にあるUXの原則のより良い理解、優れたグラフィックの適用、および実践。

UXダッシュボードの設計は、特定の原則とベストプラクティスに従います。 一方、グラフィックの卓越性には、より徹底的な調査が必要です。

グラフィカルな卓越性は次のように定義されます。

• 興味深いデータの適切に設計された効率的なプレゼンテーション。
• 複雑なアイデアは、効率、明快さ、正確さで伝えられました。
• 小さなスペース内で最小限の時間で、最小限のインクを使用して、視聴者に最大数のアイデアを提供します。
• データについて真実を語る。

グラフィックの卓越性をよりよく理解するための優れたリソースは、EdwardTufteの作品です。 彼は「データのレオナルド・ダ・ヴィンチ」と見なされており、数多くの出版物、本、講演を行っています。 情報が美しいことを創設したDavidMcCandlessは、データの視覚化と優れたグラフィックスで最高のWebサイトを代表するもう1つの優れたリソースです。

模範的なUXデザインと優れたグラフィックの原則は、ダッシュボードのデザインとデータの視覚化の両方に適用されます。 データの視覚化とダッシュボードの設計例のいくつかを次に示します。

トップデータの視覚化

ナポレオンの1812年3月

ナポレオンの1812年の行進のミナールの視覚化は、「これまでに作成された最高の統計図」の1つと見なされています。

この単一の視覚化は、場所ごとのナポレオンの軍隊の数、軍隊が経験した気温、および軍隊がモスクワに出入りする経路を示しています。

ジョン・スノウのコレラマップ

ロンドンの13の公共の井戸の場所とその場所に垂直な積み重ねられたバーを使用した578のコレラの死を示すジョンスノーの1854年のグラフィック：理解しやすく、データの真実を明らかにし、適切な描画に必要なすべての情報をユーザーに提供しますコレラの死に関する結論。

ロックミュージックの歴史

下の図は、データの視覚化全体のごく一部を表しており、1955年から1978年までの700人を超えるアーティストの30を超えるスタイルの音楽の一部を示しています。

それは単にアーティストやスタイルを表すだけでなく、影響、レコード販売の量、スタイルのカテゴリ、およびこれらがどこで終了または継続したかを示しています。 この種の優れたグラフィックスを実現することは、簡単なことではありません。

ヨーロッパの人口が増加および減少している場所

複雑ではなく、適切に設計された、真実の方法で膨大な量のデータを処理する方法を示すトップデータの視覚化。 インタラクティブバージョンには、出生率など、さらに多くのデータ探索を可能にするフィルターも含まれています。

象徴的な有名人の日課

このデータの視覚化は興味深いだけでなく、優れたグラフィックの典型的な例です。 1つのグラフィックで、象徴的な有名人の日常の習慣、儀式、追求、優先順位の詳細な描写を見ることができます。

シンプルな色分けされたチャートを使用して、この視覚化は理解しやすく、シンプルで効果的で、何よりも情報を提供します。

世界言語グラフィック

この古典的なデータの視覚化は、地球上に存在する言語の数、それらが話されている場所、および世界のさまざまなポケットでそれらを話す人を示しています。

高度なグラフィックの卓越性がなければ、これほど多くのデータを、有益で理解しやすいエレガントな方法で表示することは困難です。

トップダッシュボードデザイン

ダッシュボードが優れていると見なされるには、一連の特定のUX基準を満たす必要があります。

• 明確で一貫性のある命名規則
• 優先されるデータの流れとレイアウト
• 読みやすさのためにマージンは適切です
• データは非表示でも過負荷でもありません
• わかりやすく読みやすい

マーケティングKPIダッシュボード

以下の例は、複雑なビジネス情報を理解しやすくするための優れた例です。 抑制された配色は心地よく、別々のカードの使用は目に優しいです。

このダッシュボードが優れたデザインである理由の1つは、データインクの比率です。 データと空間は互いに補完し合っています。 画面をより多くのグラフで埋める代わりに、小さなタブのある別のカードが使用されます。 これは、重要な情報を利用可能に保つ（つまり、非表示にしない）一方で、ユーザーが自分の言葉で簡単かつ有益な方法で情報を表示できるようにするための独創的な方法です。

ストライプダッシュボード

Stripeダッシュボードは、ダッシュボード設計のベストプラクティスの優れた例です。 それはシンプルで、最も適切なユーザーの質問に答え、各カード内にほぼ完璧なマージンがあります。

遠隔医療ダッシュボード

遠隔医療分析は、大量の生データを配信することで知られています。 そのデータを意味のある有益なダッシュボードに整理するのは難しい場合があります。 この例では、ダッシュボードデザインのUXのベストプラクティスを使用しています。 マージンが2倍になり、情報が質問と回答とともに表示され、データが非表示になりません。

ストックダッシュボード

スペースを奪い合うデータポイントの数が多いため、単一のダッシュボードで株式を概念化するのは難しい場合があります。 このダッシュボードのデザイン例では、関連するすべての情報を前面と中央に配置して、すっきりとした最小限の外観を実現しています。

Webオーディエンスダッシュボード

GoogleAnalyticsはダッシュボードで素晴らしい仕事をしています。 ただし、特定の目標を達成するには、多くのカスタマイズが必要になる場合があります。 このダッシュボードは、認知的負荷を増やすことなく、シンプルで理解しやすく、読みやすく、役立つビューを提供することで、分析を新しいレベルに引き上げました。

ドキュメント管理ダッシュボード

ドキュメントの管理は困難ですが、ドキュメントを整理してナビゲートしやすくすることはさらに困難になる可能性があります。 優れたソリューションは、物事をシンプルで理解しやすく、驚くほどまばらに保つこのダッシュボードです。

最小限のアプローチでも、この優れたダッシュボードデザインの例は、ドキュメントシステムを理解し、ナビゲートするために必要なすべてのものをユーザーに提供します。

植物播種天気アプリ–モバイルダッシュボード

このモバイルダッシュボードは、有益であるだけでなく、理解しやすいものです。 ブレッドクラムはナビゲーションに役立ち、一般的な言語の説明が付いたアイコンは優れたUXデザインの作成に役立ちます。

クレジットカードダッシュボード–モバイルダッシュボード

銀行と同じように、クレジットカードのダッシュボードは、特にモバイルデバイスでのUXの悪さで有名です。 このモバイルダッシュボードのデザインは、新しい方向に向かっています。 情報はよく整理されているだけでなく、圧倒されることなく理解可能で機能が豊富です。

優れたデータの視覚化とダッシュボードの設計には、優れたグラフィックとダッシュボードの設計原則の理解と適用が必要です。 一致して適用されると、ユーザーは有益なデータの視覚化と高品質のユーザーエクスペリエンスを提供するダッシュボードの恩恵を受けることができます。

•••

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

• ダッシュボードの設計–考慮事項とベストプラクティス
• データの視覚化–ベストプラクティスと基盤
• これらのデータの視覚化からインスピレーションを得てください
• これらのダッシュボードデザインのインスピレーションでアナリティクスをアップグレードする