インターフェイスでのデータの視覚化

私の名前はIlonaで、EPAMのシニアエクスペリエンスデザイナーです。私は外国の顧客のために複雑なインターフェースを設計し、プレゼンテーションを行い、デザイナーを指導しています。余暇には、ITMO大学の修士課程でインターフェースデザインを教え、UXデザインに関するテレグラムチャンネルを運営してい ます。





この記事では、インフォグラフィックの歴史と、デザインの観点から、データを視覚化してインターフェイスに効果的に表示する方法について少しお話したいと思います。






原則としてビッグデータと見なすことができる複数のデータは、ユーザーが特定の結論を導き出すことができる情報のセット(数値、パーセンテージ、ステータス、パラメーター、テキストなど)です。





デザイナーに 愛されるダッシュボード は、そのようなデータを視覚化した結果です。





GhulamRasoolによるダッシュボード
GhulamRasoolによるダッシュボード

しかし、カラフルなグラフィックを画面全体に分散させることは、情報をうまく視覚化することを意味しません。





, — .

?





.





 —   , .





18 , ,  Commercial and Political Atlas and Statistical Breviary. , , .





William Playtheyによる最初の棒グラフ、1781年
, 1781

  , ,  The Visual Display of Quantitative Information , .





E.タフティのデータブック
.

, /. () , () .





, , — , , — .





, .

– .





E.タフティの本からのイラスト
.

:





  1. — . , ..





  2. — .





  3. — (, «» — , «» — ). , 4% -. , .





  4. — . , , , , .





. .





  • — .

    : , , .





  • , — - .

    : // -, // -, // .





  • — , ( — ).

    : , .





  • (), / — . . .

    : , , .





  • — .

    : , .





  • — .

    : , .





  • , — . , .

    ! — , «‎» .

    : , 2020 .





  • — .

    : , .





  • — .

    : , .





  • — .

    : COVID-19, .





  • — , .

    : , . .





  • — .

    : , , .





  • — , , .     , .. ( ) , .





  • — , . , .





  • — «-».

    : , , .





  • -, — .

    : , .





    プールトラックの例。 部門を削除すると、ブロック図が表示されます
    . -
  • — . , , .  .





  • — ( , ).





, ,   UX-.





, , , , . ,  . . , ( ).





, :      .





, , , , , .





ニュージャージー州ホーボーケン港の現在の積載状況を分析するためのダッシュボード
, -

— , .





, , , , , .





devvelaによる生産監視アプリ
devvela

, , . , , . , .





— . , . , , , .





, , ( ).





販売統計ダッシュボード

« ». , , , , . . , , , .





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





あまり前向きではありませんが、ジョンズホプキンスのダッシュボードの関連性のある有益な例
, Johns Hopkins

UX - « UX».








All Articles