ビジュアライゼーションの役割とUI開発のイノベーション(1)

1,862 views

Published on

BizCOLLEGE Premiumセミナー(2012年7月3日実施)の講師プレゼンテーション資料です。セミナーの概要:http://bizpremium.nikkeibp.co.jp/media-info/interface-design/20120609/000016

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,862
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

ビジュアライゼーションの役割とUI開発のイノベーション(1)

  1. 1. 今時のビジュアライゼーション 増井俊之 慶應義塾大学 環境情報学部 masui@pitecan.com http://pitecan.com/ 2012年7月3日
  2. 2. 自己紹介シャープ、ソニー、産総研などに勤務 ケータイの予測変換(POBox)などを開発2008秋まで米国Appleに勤務 フリック入力などを開発ユーザインタフェースの研究開発各種Webサービス運用中論文、雑誌記事、Web記事多数未踏ユースプロジェクトマネージャ
  3. 3. 画像は重要MosaicでWebがブレイクした画像や背景があったから画像が無ければWebは使われない
  4. 4. Beautiful Visualization
  5. 5. ビジュアリゼーションのいろいろインフォグラフィクスサイエンティフィックビジュアリゼーション情報視覚化 (Information Visualization)
  6. 6. インフォグラフィクス情報をポスターのように美しく表示する計算機技術と直接関係無い
  7. 7. ニューヨーク地下鉄のビジュアライゼーション
  8. 8. ナポレオンのモスクワ侵攻
  9. 9. インフォグラフィックの例伊勢参宮名所図会縦書きの有効利用
  10. 10. サイエンティフィックビジュアリゼーションシミュレーション結果やセンシングデータを計算機で3次元表示大昔から綿々と使われている
  11. 11. サイエンティフィックビジュアリゼーションの 例
  12. 12. サイエンティフィックビジュアリゼーションの 例
  13. 13. サイエンティフィックビジュアリゼーションの 例
  14. 14. サイエンティフィックビジュアリゼーションの 例亜鉛原子と水素原子の結合
  15. 15. AVSサイエンティフィックビジュアリゼーションの代表的ソフトウェア
  16. 16. 情報視覚化「Information Visualization」(大きな)データをわかりやすく表示する技術実世界のものと対応関係が無い
  17. 17. 情報視覚化の特徴形が無い情報を扱う ファイルシステム、ネットワーク構造、...視覚化手法が任意対話的に情報発見/検索/実感なめらかな操作
  18. 18. eyeo Festival
  19. 19. 視覚化の流行の理由PCの高速化データが増えたブラウザの描画対応 Canvas標準化オーソドックスな手法の普及 Treemap 力学モデル
  20. 20. 視覚化の流行の理由ツールが増えた GraphViz Processing Canvas+JavaScript GoogleMaps SocialAction Cytoscape
  21. 21. 視覚化の基本
  22. 22. 何のために情報視覚化を行なうか情報検索データマイニングプログラミングデバッグアート何となく?
  23. 23. 視覚化の対象ネットワーク構造 インターネットのリンク情報 ソーシャルネット ソーシャルフィルタリング計算機情報 ファイルシステム 各種ログ ネットトラフィック
  24. 24. 視覚化の対象バイオ情報 遺伝子 タンパク質構造マインドマップ技術動向年表アート
  25. 25. 視覚化対象巨大なもの Web全体小さいもの Sparkline
  26. 26. 情報視覚化の手法フィルタリング技法画面へのマッピング手法インタラクション手法
  27. 27. フィルタリング技法条件とのマッチング拡大/縮小重要度計算
  28. 28. 画面へのマッピング手法表現形式 形、色、テクスチャ、..レイアウト歪表示アニメーション
  29. 29. インタラクション手法移動/拡大/縮小動的フィルタリング直接操作
  30. 30. 情報視覚化の歴史XeroxPARC、メリーランド大学などで盛んに研究(80年代)様々な手法が提案されるInfoVisコンファレンスなどもその後研究は下火に
  31. 31. Ben Shneiderman
  32. 32. Stuart Card
  33. 33. 情報視覚化の現在画期的な新手法を見かけない新規参入者による再発明 デザイナ系 古臭いとか言って馬鹿にしている健在な商売もある 銀行,バイオなど特定分野 汎用ツール商売はすべて失敗
  34. 34. 技術トレンドパソコンの高速グラフィクスブラウザ技術 JavaScript, HTML5ネット上の大規模データ視覚化ライブラリ 描画ライブラリ レイアウトライブラリ統計処理システム
  35. 35. 気分トレンド基本的技法はあまり進展が無い TreeMap、ばねモデル、... 論文になるようなアイデアは少ない昔の研究者は引退した 飽きた? AaronMarcusの記事の感想ニッチ商売は残っている
  36. 36. 一般トレンドアーティスト/Webデザイナ/マニアが参入 中村勇吾 EduardoSciammarella 長谷川踏太 MarcosWeskamp 「プログラマの視覚化はひどい」論文にはなりにくい 原理は自明 or 再発明
  37. 37. 一般トレンド視覚化システムをはじめて見るユーザが増えたカッコ良い視覚化システムが増えた使える一般的システムやツールが増えた 視覚化ライブラリ 視覚化ツール
  38. 38. 今後のトレンド一般人が参入してはじめて実用化がはじまる e.g.VisiCalc,Web,研究が廃れた後でブレイクするものも多い テキスト検索、AR、etc.
  39. 39. 実例紹介TreeMapHyperbolicTreeLensBarWINGGyazz
  40. 40. Treemap階層構造を2次元平面にマッピング大きなに応じて縦分割/横分割を繰り返す
  41. 41. SequoiaView
  42. 42. Disk Inventory X
  43. 43. Newsmap
  44. 44. HyperbolicTree
  45. 45. ポアンカレ円板
  46. 46. 無限の表現
  47. 47. TreeVis
  48. 48. デモ: LensBar動的曖昧検索+非線型ズーミングWeb版
  49. 49. デモ: WING1D/2D/3Dズーミングによる情報検索
  50. 50. デモ: Gyazzお手軽Wiki関連画像を並べて表示
  51. 51. 最近の流行JavaScriptの視覚化ツールProcessingGoogleMapsの利用平行座標SparklineGapMinderSocialAction
  52. 52. JavaScriptによる描画Canvasの利用 ブラウザ画面に直接描くjQueryのライブラリ多数
  53. 53. d3 (Data-Driven Documents)
  54. 54. ProcessingBen Fryの開発したお手軽言語Javaのサブセット情報視覚化に特に有用
  55. 55. Processing
  56. 56. 「Visualizing Data」Processingの本だが情報視覚化の話が沢山
  57. 57. GoogleMaps活用簡単なズーミングインタフェースが手軽に実現
  58. 58. Books Marking
  59. 59. Zoomii書棚をズーミング
  60. 60. Sparklineのようなグラフを埋め込む
  61. 61. Parallel Coordinate (平行座標)X座標で属性を表現
  62. 62. Parallel Sets
  63. 63. GapminderHans RoslingのTEDトークアニメーション付き散布図
  64. 64. SocialAction統計アルゴリズムと視覚化の併用
  65. 65. ビジュアライゼーションの落とし穴
  66. 66. 発見があるか?実は新しい情報を得られることは少ない想定内の情報を確認できるだけ
  67. 67. ソーシャルネットワーク視覚化だから何?
  68. 68. 民主党/共和党上院議員の投票傾向
  69. 69. わかった気になるメンタルモデルと近い表示を選ぶ木構造もフォルダ表示も同じなのだが
  70. 70. e.g. SpySee間違った人間関係を理解したつもりになるかも
  71. 71. 錯覚
  72. 72. 乱数による点描画パタンがいろいろ見られる
  73. 73. 誤差分散法によるグレースケール
  74. 74. 相関相関と因果本当の相関が見えないことがある
  75. 75. ベンフォード則みたいなものはわからないフラクタルとエセフラクタルとか
  76. 76. レイアウトの難しさ綺麗に/わかりやすく/レイアウトは難しい綺麗だとかわかりやすいとかいう評価を計算できないから評価関数があればなんとかなるのだがばねモデルだと皆同じになってしまう
  77. 77. 例: 三角形の中の適当な位置に別の点を配置なんらかの評価関数の最適化によりその点の位置が定まるようにしたい
  78. 78. AP+BP+CPを最小化
  79. 79. AP^2+BP^2+CP^2を最小化
  80. 80. 「チャートジャンク」
  81. 81. 「チャートジャンク」
  82. 82. チャートジャンク役にたつという説もあるが一般的には有害
  83. 83. アニメーションの功罪情報の伝達においてアニメーションは他の方式と比べて速度も正確さも劣る発表と探索は異なるこのようなグラフの方が発見は簡単だったりする
  84. 84. 色覚東京アメッシュ
  85. 85. 傾向工夫が少ないものが流行するカッコ良いものがウケるが理解を深めるとは限らない
  86. 86. 参考資料
  87. 87. 情報視覚化の本棚
  88. 88. Readings in Information Visualization
  89. 89. Envisioning Information
  90. 90. Beautiful Evidence
  91. 91. Search User Interface全文が公開されている10章が情報視覚化について
  92. 92. 「Visualizing Data」Processingの本だが情報視覚化の話が沢山
  93. 93. Beautiful Visualization幅広い話題をカバー
  94. 94. ビジュアル・コンプレキシティ !情報パターン のマッピング美しい視覚化が沢山載ってる
  95. 95. Visual.ly
  96. 96. Good.is/infographics美しいインフォグラフィクス

×