データの視覚化–ベストプラクティスと基盤

公開: 2022-03-11

「混乱と混乱はデータの属性ではなく、設計の欠点です。」 –エドワードタフテ

データの視覚化とは何ですか?

Michael Friendlyは、データの視覚化を「情報の単位の属性や変数など、何らかの概略形式で抽象化された情報」と定義しています。 言い換えれば、それは量的な内容を視覚的に伝えるための首尾一貫した方法です。 その属性に応じて、データは、折れ線グラフ、棒グラフ、円グラフ、散布図、またはマップなど、さまざまな方法で表すことができます。

グラフィックデザイナーは、データ視覚化のベストプラクティスを順守し、データセットを視覚的に表示するための最良の方法を決定することが重要です。 データの視覚化は、有用で、視覚的に魅力的で、誤解を招くことのないものでなければなりません。 特に非常に大きなデータセットを扱う場合、有用で視覚的に魅力的な視覚化を作成するには、まとまりのある形式を開発することが不可欠です。

データを視覚的に表示すると、このデータ視覚化のベストプラクティスの例で理解しやすくなります
米国の失業率のウォールストリートジャーナルデータの視覚化。 (WSJによる)

データの視覚化を使用する理由

IBMによると、毎日2.5兆バイトのデータが作成されています。 研究科学者のアンドリューマカフィーとMITのエリックブリニョルフソン教授は、「わずか20年前にインターネット全体に保存されていたよりも多くのデータが毎秒インターネットを通過する」と指摘しています。

世界がますます多くの電子機器と接続するようになるにつれて、データの量は指数関数的に増加し続けます。 IDCは、2025年までに163ゼタバイト(163兆ギガバイト)のデータがあると予測しています。

このデータはすべて、人間の脳が理解するのは困難です。実際、人間の脳が何らかの類推や抽象化を行わずに5より大きい数を理解することは困難です。 データ視覚化設計者は、これらの抽象化を作成する上で重要な役割を果たすことができます。

結局のところ、ビッグデータを理解して有用な方法で消費できなければ、ビッグデータは役に立たないのです。 そのため、データの視覚化は、経済学から科学技術、医療、福祉サービスに至るまで、あらゆる分野で重要な役割を果たしています。 複素数などの情報をグラフ化することで、内容がわかりやすく、使いやすくなります。

ビジュアルチャートは、ダッシュボードの設計に特に役立ちます

いつ使用するか

多数のデータを意味のある方法で理解することは非常に困難であり、最も有用なデータセットの多くには膨大な量の貴重なデータが含まれているため、データの視覚化は意思決定者にとって不可欠なリソースになっています。 このすべてのデータを活用するために、多くの企業は、重要な情報を明確かつ効率的に理解することでデータの視覚化の価値を認識し、意思決定者が難しい概念を理解し、新しいパターンを特定し、データに基づく洞察を得て、より良いものにすることができます。決定。

データ視覚化設計ソリューションにリソースを費やす価値があります。 大規模なデータセットを理解することは、ビジネス、テクノロジー、科学、またはその他の分野であるかどうかにかかわらず、十分な情報に基づいた意思決定を行うために必要です。 明確な視覚化により、複雑なデータを把握しやすくなり、アクションを実行しやすくなります。

コンシューマーアプリのデータ視覚化のベストプラクティス

原則

明確な目的を定義する

データの視覚化は、重要な戦略的質問に答え、真の価値を提供し、真の問題の解決に役立つはずです。 たとえば、パフォーマンスの追跡、顧客の行動の監視、プロセスの有効性の測定に使用できます。 データ視覚化プロジェクトの開始時に時間をかけて目的と優先順位を明確に定義すると、最終結果がより有用になり、不要なビジュアルを作成する時間を無駄にすることがなくなります。

聴衆を知る

ターゲットオーディエンスと明確に通信するように設計されていない場合、データの視覚化は役に立ちません。 視聴者の専門知識と互換性があり、視聴者がデータを簡単かつ迅速に表示および処理できるようにする必要があります。 聴衆がデータによって提示される基本原則にどれほど精通しているか、およびチャートやグラフが定期的に表示される可能性が高いSTEM分野の背景を持っている可能性が高いかどうかを考慮してください。

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

視覚的機能を使用してデータを適切に表示する

チャートには非常に多くの種類があります。 提示されているデータを視覚化するのに最適なタイプを決定することは、それ自体が芸術です。 正しいグラフは、データを理解しやすくするだけでなく、最も正確な観点からデータを表示します。 正しい選択を行うには、伝達する必要のあるデータの種類と、伝達先を検討してください。

データ視覚化で最も人気のある種類のグラフは次のとおりです。

折れ線グラフ:折れ線グラフは、時間の経過に伴う値の比較に使用する必要があり、大きな変化と小さな変化の両方を表示するのに最適です。 また、複数のデータグループへの変更を比較するためにも使用できます。

折れ線グラフは、優れたデータ視覚化手法の例です。
(出典:<a href=”https://www.unep.org/about-un-environment

棒グラフ:棒グラフは、いくつかのカテゴリの定量的データを比較するために使用する必要があります。 これらは、時間の経過に伴う変更の追跡にも使用できますが、これらの変更が重要な場合にのみ使用するのが最適です。

棒グラフは、特定のデータを視覚的に表示するための良い方法です
(出典:Our World in Data)


散布図:散布図は、データセットの2つの変数の値を表示するために使用する必要があります。 これらは、2つのセット間の関係を調査するのに最適です。

散布図データの視覚化のベストプラクティス
(出典:Our World in Data)


円グラフ:円グラフは、全体の一部を表示するために使用する必要があります。 時間の経過に伴う変化などを表示することはできません。

円グラフは、データの視覚化設計に最適です。

整理された一貫性を保つ

ビッグデータセットをビジュアライゼーションにコンパイルする場合、コヒーレンスは特に重要です。 一貫性のあるデザインは効果的に背景にフェードインし、ユーザーが情報を簡単に処理できるようにします。 最高の視覚化は、視聴者が「顔を合わせて」いることなく、または他の方法で自分自身に注意を向けることなく、提示されているデータについて結論を出すのに役立ちます。 それらは単に可能な限り最良の方法でデータを表示します。

データの階層を作成すると、意思決定者にとって適切な方法でさまざまなデータポイントが表示されます。 最高から最低に並べ替えて、最大の値を強調したり、ユーザーにとってより重要なカテゴリを目立つように表示したりできます。

データが表示される順序、使用される色(最も重要なポイントの明るい色、ベースラインデータの灰色など)、およびグラフのさまざまな要素のサイズ(円グラフの特定のスライスを拡大するなど)グラフの通常の境界線)は、ユーザーがデータをより簡単に解釈するのに役立ちます。 これらの手法を使用するときは、バイアスがないはずの場所にバイアスを作成することに注意してください。

インタラクティブなデータ視覚化のベストプラクティス
インタラクティブなデータの視覚化は、人々がデータを解釈するのに役立つ優れた方法でもあります。

データの視覚化を包括的にする

は、情報を表現および区別する方法として広く使用されています。 Salesforceが実施した最近の調査によると、これはユーザーの意思決定における重要な要素でもあります。

彼らは、チャートで使用されているさまざまな色の組み合わせに人々がどのように反応するかを分析しました。

しかし、彼らは、魅力的でありながら、微妙なパレットがチャートの分析と洞察の獲得をより困難にしていることを発見しました。 これは、データを表示するための視覚化を作成するという目的を完全に無効にします。

Toptalデザインブログを購読して、私たちの電子ブックを受け取ります

色が似ていてコントラストが低いチャートが平均的な人にとって読みにくい場合、完全な視力を持たない人にとってはさらに難しくなり、人口のかなりの部分を占めます。 WHOによると、推定2億5300万人が視覚障害を抱えて生活しています。

幸いなことに、PhotoshopやIllustratorの色覚異常の校正など、これらの障害を持つ人々が画像をどのように視覚化するかを確認するために利用できるツールがあります。 十分に大きなフォントサイズを使用したり、タイプと背景のコントラストを適切に設定したりするなど、他のことも役立ちます。

シミュレーションツールでカラーパレットの問題が明らかになった場合、グラフの読みやすさを向上させることができる手法があります。

  • コントラストの高い色を使用してください。
  • さまざまな種類の情報を伝えるために、色の使用をパターンまたはテクスチャで補完します。
  • テキストまたはアイコンを使用して要素にラベルを付けます。

データの視覚化における優れた色の組み合わせの優れた例
データの視覚化でスケー​​ルモデルを使用する場合でも、各ステップ間で十分な色のコントラストを使用することができます。 このグラフィックのインタラクティブバージョンには、ユーザーが各国にカーソルを合わせたときのラベルが含まれています。 (出典:Our World in Data)

フォントの選択は、テキストの読みやすさに影響を与え、意図した意味を強調したり、損なったりする可能性があります。 このため、表示フォントを避け、より基本的なセリフ書体またはサンセリフ書体に固執することをお勧めします。

データの視覚化で、メディアのフォントサイズが読みやすいことを確認してください。 Smashing Magazineは、「最新のWebデザインでは、通常、ボディコピーの最小サイズは16ピクセルにする必要がある」と提案しています。

データを歪めないでください

優れたデータの視覚化は、歪みを避けて、ストーリーを明確に伝える必要があります。 3Dの円グラフのように、データセットを正確に表していない視覚的表現の使用は避けてください。

悪いデータ視覚化設計
このような3D円グラフでは、各スライスの比率を実際に視覚化することは困難です。 (PSDgraphicsによる)

データの視覚化により、データ自体を歪めることなく、視聴者を特定の結論に導くことができます。 これは、一般にデータを伝達するだけでなく、特定の結論をサポートするために通常作成される、一般消費者向けのインフォグラフィックなどを設計する場合に特に役立ちます。 色の選択や特定のデータポイントの呼び出しなどは、誤解を招くようなグラフィックを作成することなく、この目的に使用できます(これにより、設計者の信頼性が疑問視される可能性があります)。

悪いデータの視覚化の例

悪いデータ視覚化設計の例
Y軸をゼロから開始しないと、データが実際に存在するよりも大きなゲインを持っているように見える可能性があります。 これにより、視覚化が誤解を招き、提示されているデータが明確になりません。


誤解を招くデータ視覚化の例
Y軸をゼロから開始せず、結果の表示方法を歪めたグラフの別の例。


悪いデータの視覚化における悪い色とスケールの組み合わせの例
主要ブランドのこの棒グラフは、Y軸がないため、規模が誤解を招く可能性があります。 わずかな差は1%未満ですが、特大の青いバーは不釣り合いに拡大されています。


バッテリー寿命が70%増加したという誤解を招くデータ視覚化の例
Appleが新しいiPadのバッテリーのバッテリー寿命が70%長いことを説明しようとすると、高さが70%だけでなく、全体的なスケールも大きくなり、バッテリーが以前のiPadのバッテリーよりも大幅に大きく見えるようになりました。 (Gizmodo経由)


優れたデータ視覚化の例

適切な色の組み合わせには、このデータの視覚化における十分な色のコントラストが含まれます
このような棒グラフは、データセット間の違いを表示するための素晴らしい方法ですが、色のコントラストを高くすると、視覚障害のあるユーザーがこの画像にアクセスしやすくなります。 (FiftyThirtyTwentyによる)


データを視覚的に提示すると、ダッシュボードが理解しやすくなります
この販売ダッシュボードは、いくつかの異なる視覚化形式を使用して、関連データを一目で理解できるわかりやすい形式で表示します。 データにも適切なラベルが付けられており、物事がさらに明確になっています。 (Bagus Fikriによる)


優れたデータ視覚化のダッシュボードの例
すっきりとしたすっきりとしたデザインと、わかりやすいデータの視覚化とシンプルなグラフを組み合わせることで、優れたUXが実現します。 (Miklos Philipsによる)


Google Audience Insightsは、インタラクティブなデータ視覚化のベストプラクティスの良い例です。
GoogleのAudienceInsightsは、インタラクティブなデータ分析スイートを使用してデータを簡単に理解できるようにしています。

結論

優れたデータの視覚化では、グラフィックを使用してデータセットを明確かつ効果的に伝達する必要があります。 最高の視覚化により、データを一目で簡単に理解できます。 彼らは複雑な情報を取り、それをターゲットオーディエンスが理解しやすく、決定の基礎となる方法で分解します。

エドワードR.タフテが指摘したように、「デザインの本質的なテストは、それがどれほどスタイリッシュであるかではなく、コンテンツの理解をどれだけうまく支援するかです。」 特に、データの視覚化はこの考えに従う必要があります。 目標は、デザイン自体に注意を引くのではなく、デザインを通じてデータを強化することです。

これらのデータ視覚化のベストプラクティスを念頭に置くと、視聴者にとって本当に役立つインフォグラフィックを設計するプロセスが簡素化されます。

•••

参考文献:

  • これらのデータの視覚化からインスピレーションを得てください
  • これらのダッシュボードデザインのインスピレーションでアナリティクスをアップグレードする
  • ダッシュボードの設計-考慮事項とベストプラクティス
  • プレゼンテーションデザインとビジュアルストーリーテリングの芸術
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例