情報の可視化パターン

数年前、私はUXとそれに関連するすべてに非常に興味を持つようになりました。 徐々に、特に今では、情報の視覚化がいかに重要であるかが理解されました。 Tufty 、Cleveland、およびBertinを読んだ後、この方向に考えないことはまったく不可能です。 物事(特に、 当社の製品 )をより視覚的で理解しやすいものにする方法についてのアイデアを常に考え出します。



以下では、情報の視覚化が重要である理由を示し、その基本原則について話し、いくつかのクールな例を示しました。 退屈な定義がいくつかあり、記事にジョークがないことを事前に謝罪します。 これは意図的に行われます。 Dadley Seriousによる記事。



そして、いつものように、私は記事の量をおaびします。 しかし、最後まで読みたいと思っています。











1.視覚化が重要な理由



  1. それにより、他の方法で気づきにくいものを見ることができます 。 はい、情報はデータに存在しますが、視覚化しないと、傾向、行動パターン、依存関係に気づきません。
  2. 彼女は多くの質問に早く答えを出します。 最も単純なケースでは、数字の列よりもチャートを見て傾向を確認する方がはるかに簡単です。
  3. 優れた視覚化により、「データを調査」し、それらを操作して、興味深いことを明らかにすることができます。これは、たとえばジャーナリズムで特に重要です。
  4. 今日、データ量は信じられないほどの速度で増加しています。 視覚化は、増加する複雑さと多様なデータに対処するのに役立ちます。
  5. 誰もが興味をそそるカラー写真を見るのが大好きですが、ほとんど誰も数字のある退屈なテーブルが好きではありません。 情報の主観的な認識、情報への信頼は、視覚的に提示されるとより高くなります。


視覚化を使用して質問に答える典型的な例は、ロンドンのコレラ流行です(例はタフティの本から取られています)。 ある医師のジョン・スノーは、水によるコレラの輸送に関する仮説を証明するために視覚化を使用しましたが、誰もがそれが空中を運ばれると考えていました。



40日以内に、ロンドンの1つの地区で600人以上が死亡しました。 スノー博士は死亡データを収集し、マッピングしました。 黒い長方形は一死です。 一般に、それらは取水ポンプの近くでグループ化されていることがわかります。







もちろん、多くの場合は遠隔地で発生しました。 ジョン・スノーは個々のケースを調査し、彼の仮説の確認を求めました。 たとえば、近くの醸造所で死んだ人は一人もいません。 醸造所の所有者は、労働者にはビールを飲む権利があり、庭には自分の井戸があると言った。 一般に、ポンプが停止すると、流行はすぐに終わりました。



この場合、視覚化は流行の原因の確立に役立ちました。 この例だけで、スノー博士への敬意をかきたて、タフティを愛するのに十分です。



2.情報の視覚化の基本原則



多くの基本原則はありません。 画像(画像)の概念と視覚化のマントラという2つについて説明します。 データとインクの比率や読みやすさのルールなど、低レベルの原則を意図的に省略しています。これらは、パターンではなく実行に影響します。



Jacques Bertinは、情報の視覚化の分野で最も影響力のある著者の1人と考えることができます。 40年前に書かれた彼の基本的な仕事、 グラフィックの記号学



BertinはImageの概念と読書情報のレベルを導入しました。



退屈な定義#1



画像-視覚の最小瞬間で知覚できる意味のある視覚形式



画像は、最小限の時間で認識される表現力豊かな視覚形式です。



つまり、画像を見てすぐにそれが何であるかを言えば、それは画像が画像であることを意味します。 これは、情報の視覚化と何の関係がありますか?



まず、読書レベルを扱います。 それらの3つがあります: 初級、中級、一般







上記は、日ごとの株価を示す退屈なチャートです。



優れた視覚化は、3つのレベルすべての質問に非常に迅速に答えることができます。 悪いことはできません。 つまり、優れた視覚化は画像に近いはずです。 答えを見つけることにできるだけ時間を費やすべきではありません。



ベンシュナイダーマンは、情報の視覚化の開発にも大きく貢献しました。 特に、彼は視覚化のマントラを所有しています。



少し退屈な定義#2



「最初に概要を確認し、ズームとフィルターをかけてから、オンデマンドで詳細を表示します。」



最初に、一般的なレベル、近似およびフィルタリング、次に詳細(必要に応じて)



将来的には、マントラが完成しました。これは、より現代的なバージョンのようです。







そして今、視覚化を行うための基準があり、この視覚化が良いかどうかもチェックします。 男はできるに違いない



ご覧のとおり、最新の視覚化は非常にインタラクティブです。 そして、これはかなり新しく、調査が不十分な地域です。



だから:



情報の視覚化=プレゼンテーション+インタラクション



3.可視化パターン



合計で、4パターンのみ

  1. カード 。 地理、カートグラムなど。 彼らは皆、地理の授業で学校からお互いを知っています。 カードのおかげで、多くの人がアフリカではダイヤモンドが採掘されていることを思い出し、ボダイボには金鉱床があります
  2. タイムライン (ロシアの純粋主義者は自由に良い翻訳を提供します-2文字の「p」は意図的に使用されます)。 時間に関連するすべてのもの、たとえば作業スケジュール(誰でも好きなガントチャート)や月の周期を視覚化するために使用されます。
  3. 多くの変数 。 多くの変数を持つデータを視覚化するために使用されるパターンのかなり広範なクラス。 性別、体重、身長、年間のコカコーラ消費量で人を言う。
  4. ネットワーク 依存関係、関係、および階層を視覚化するため。








いくつかの例を見てみましょう。



カード


私の仕事カードでは役に立たないので、私にとって個人的に最も面白くないパターンです。 誰もが米国(およびこの国 )で何が起こっているかを知ることに関心があるため、幅広い聴衆にとって最も理解可能で興味深いパターンです。



New York Timesのウィザードによって作成されたインタラクティブマップの良い例。 一般に、この出版物は視覚化への愛好によって区別され、そこから学ぶことができる非常に多くの優れた例があります。



Immigration Explorerは、優れた視覚化の5つの原則すべてをうまく活用しています。これが、米国への移民のさまざまな側面を調査するときに使用することが非常に興味深い理由の1つです。







国と年でデータをフィルタリングできます。 人口の割合と居住者数に関する情報の表示を変更します。 マップ領域を増やし、円のサイズを変更します。







インタラクティブなマップで遊ぶことは、静的な画像を見るよりもはるかに楽しいです。 移民の構造がさまざまな時期にどのように変化したかを見て、これを歴史の知識と結び付け、自分にとって何か新しい、面白いものを見つけたと感じます。 ところで、ソ連からの移民はロサンゼルスとニューヨークを選びました。



私は明確な良心をもってそれを視覚化のほぼ完璧な例と呼びます。



タイムライン


非常に多くのタイムラインがあります。 いくつか例を挙げましょう。 サンフランシスコからの通勤電車のスケジュール 。 X軸には、列車の出発時刻があります。 Y軸上-ルートに沿った都市。







このスケジュールでは、都市間の距離が表示されていることがすぐにわかります。 また、列車が停車する場所と停車しない場所に注意します。 まあ、すべてに加えて、線の勾配は列車の速度を示しています。 高速列車と普通列車(黒)があります。 出発時刻が遅い列車は、遅い列車を追い越します。



残念ながら、スケジュールの対話性は非常に限られています。 列車を速度、方向、曜日でのみフィルタリングできます。 また、ポイントにカーソルを合わせると、正確な到着時刻を確認できます。 しかし、個々の時間間隔または地域を増やし、列車の種類を強調し、スケジュールの表示をより馴染みのあるタイムラインに変更したいと思います。



ここで私は抵抗することはできず、私たちが行っているTargetProcessプロジェクト管理システムからの2番目の例を示します(これは恥知らずな広告です。スキップできます)。 以下に、1つの機能の開発の進捗状況を示します。 すなわち、どのような条件で、何日、誰がそれに取り組み、新しいタスクやバグが現れたとき、それらが閉じられたときです。







かんばんに取り組んでおり、機能はいくつかの州を通過します。 全体として、リリース前の状態の1週間を除き、すべてがスムーズであったことがわかります。



フィルタはなく、変更することもできません。また、機能の開発に数週間以上かかる場合、全体像を見るのは困難です。 そのため、変更が必要です。 ただし、タイムライン自体は1つの画面に多くの情報を表示します。



多くの変数


多くの変数があるとき、あなたは考えなければなりません。 6つの変数を適切に視覚化することは可能ですか? どうして? 下の写真では、性別、年齢、血圧、コレステロール、喫煙に応じて、10年間の心血管疾患の発症リスクを視覚化しています。







スタイルには注意を払わないでください。 この写真は長い間調べることができ、女性の平均リスクは2倍低いことに注意してください。 若者は平和に眠ることができます。 喫煙は、40歳以降、か​​なりまともな方法で影響を及ぼし始めたことがわかりました。 難しい問題に対する非常に成功した解決策。



そしてニューヨークタイムズに戻ります。 市場のリーダーと部外者を区別する方法は? 市場で誰が正しい軌道に戻り始めているのか、逆に誰が地歩を失い始めているのか? 以下は、そのような質問に対する答えの素晴らしい例です。 視覚化は一見非常に複雑ですが、どのように機能するかを理解すると、 気に入るはずです







このグラフは、1年間(Y軸)と選択した間隔(日、週、月、四半期-X軸)の2つの時間変数で、企業が市場とどのように感じるかを示しています。 したがって、企業の4つのグループは区別されます。



業界データをフィルタリングし、個々の会社の詳細を表示し、スケールを変更できます。 そして、はい、右側の大きな緑色の円はアップルです。



ネットワーク


まだネットワークがあります。 ツリーの視覚化の典型的で単純な例は、この記事のマインドマップです。







他の興味深い例へのリンクを含むより詳細なバージョンも利用可能です。



モニター画面が小さいため、木などの構造の視覚化は通常非常に複雑です。 半壁のポスターでは見栄えがいいです。



おわりに



私の目標は、情報を視覚化することの重要性をあなたに伝え、人々が意思決定を行い、データを操作するのにどのように役立つかを実際の例で示すことでした。



私が成功した場合、私は非常に幸せです。 そして、記事の最後までスクロールしてくれてありがとう(すみません、真剣に破りました)。



ミハイル・ドゥバコフ

@mdubakov



All Articles