Your SlideShare is downloading. ×
0
デザイニング・インターフェース勉強会第5回 7章 - 複合的なデータを表示する:      ツリー、チャート、その他のインフォメーショングラフィックス             河村 奨 (@cognitom)    https://www.fa...
デザイニング・インターフェース 第2版  パターンによる実践的インタラクションデザイン        http://amzn.to/LfZuHZ
今日の発表について                      @cognitomカフェのマスター || オープンソースのデザイナー || プログラマ      勉強会詳細は Facebook グループで ↓       https://www....
この章でやること❶  インフォメーショングラフィックスの基礎組織化モデル: どのように組織化されている?前注意的変数 : どれがどれと関係している?ナビゲーションとブラウズ : データの詳細を見られる?ソートと並び替え : 別の観点で並べ替えで...
この章でやること❷                                 パターンの解説① 外観と詳細 (Overview Plus Detail)       ⑦ ソート可能なテーブル (Sortable Table)② データティ...
インフォメーショングラフィックスの基礎
‘   言葉で伝えるのではなく                     ’            見せる もの         p.281
組織化モデル このデータはどのように組織化されているか?線形       表形式        階層型       相互接続                            ネットワーク型 地理的 (または空間的)   テキスト型    ...
前注意的変数                   どれがどれと関係しているのか?                                    特徴統合理論は、人間の視覚的注意についての心理学的モデ                   ...
次に表示される青い丸をみつけよう  前注意的変数を体感してみよう
前注意的変数を体感してみよう
前注意的変数を体感してみよう
次に表示される青い丸をみつけよう  前注意的変数を体感してみよう
前注意的変数を体感してみよう
前注意的変数を体感してみよう
次は                      難易                         度高                           め次に表示される数の内、 1 以上をみつけよう   前注意的変数を体感してみよう
0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.3160.42...
0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.3160.42...
次に表示される数の内、 1 以上をみつけよう   前注意的変数を体感してみよう
0.103   0.176   0.387   0.300   0.379   0.276   0.179   0.321   0.192   0.2500.333   0.384   0.564   0.587   0.857   0.820...
0.103   0.176   0.387   0.300   0.379   0.276   0.179   0.321   0.192   0.2500.333   0.384   0.564   0.587   0.857   0.820...
これは難易度の問題ではない 前注意的変数を体感してみよう
8つの前注意的変数                   Photo / Tiếng Việt: Ảnh cộng hưởng từ hạt nhân bộ não của người.                     Released ...
色の諧調前注意的変数を体感してみよう
色の明度前注意的変数を体感してみよう
色の彩度前注意的変数を体感してみよう
質感前注意的変数を体感してみよう
位置と整列前注意的変数を体感してみよう
向き前注意的変数を体感してみよう
大きさ前注意的変数を体感してみよう
形状前注意的変数を体感してみよう
前注意的       視覚的特徴なし            (特徴探索)       (結合探索)                     0.103   0.176   0.387   0.300   0.379               ...
http://www.tokyometro.jp/en/subwaymap/pdf/routemap_en.pdf 色の諧調                   色の明度                   色の彩度         質感   ...
ナビゲーションとブラウズ          どうすればこのデータを詳しく調べられるか?外観と詳細           スクロールとパン部分的なズーム           ズーム           関心地点の開閉ブラッシング          ...
ソートと並び替え このデータを別の観点で見られるように並べ替えできるか?        アルファベット順ソート可能        数値順        日付や時刻順        物理的な位置の順序        カテゴリまたはタグによる順序 ...
検索とフィルタリング         自分に必要なデータだけを見るにはどうする?動的なクエリ          インタラクティブ性が高い          反復的に操作できる          コンテクストを示せる          複合的である
実際のデータ          具体的なデータ値は何か?ラベル:    視線移動が最小。使いすぎると煩雑に凡例 :   なるべくグラフィックの近くに座標軸、ルーラ、スケール、タイムライン :       大まかな把握データティップ :    普...
パターンの解説
①    外観と詳細②    データティップ                       ① 外観と詳細③    スポットライト                Overview Plus Detail④    動的なクエリ⑤    ブラッシング...
①    外観と詳細②    データティップ               ② データティップ③    スポットライト       Datatips④    動的なクエリ⑤    ブラッシング⑥    部分的なズーム⑦     ソート可能⑧   ...
①    外観と詳細②    データティップ               ③ データのスポットライト③    スポットライト                Data Spotlight④    動的なクエリ⑤    ブラッシング⑥    部分的...
①    外観と詳細②    データティップ                    ④ 動的なクエリ③    スポットライト             Dynamic Queries④    動的なクエリ⑤    ブラッシング⑥    部分的なズ...
①    外観と詳細②    データティップ                ⑤ データのブラッシング③    スポットライト               312 Chapter 7: Showing Complex Data: Trees, C...
①    外観と詳細②    データティップ               ⑥ 部分的なズーム表示③    スポットライト      Local Zooming④    動的なクエリ⑤    ブラッシング⑥    部分的なズーム⑦     ソート...
①    外観と詳細②    データティップ               ⑦ ソート可能なテーブル③    スポットライト       Sortable Table④    動的なクエリ⑤    ブラッシング⑥    部分的なズーム⑦     ...
①    外観と詳細②    データティップ                 ⑧ 放射状テーブル③    スポットライト            Radial Table④                       車種の関連     動的なク...
①    外観と詳細②    データティップ               ⑨ 複数Y軸のグラフ③    スポットライト                                   Multi-Y Graph               ...
①    外観と詳細②    データティップ                     ⑩ 小さな複合データ群③    スポットライト                                                        ...
①    外観と詳細②    データティップ                 ツリーマップ               11③    スポットライト     Treemap④    動的なクエリ⑤    ブラッシング⑥    部分的なズーム  ...
おつかれさまでした。
「デザイニング・インターフェース」勉強会 - 第7章
「デザイニング・インターフェース」勉強会 - 第7章
Upcoming SlideShare
Loading in...5
×

「デザイニング・インターフェース」勉強会 - 第7章

2,009

Published on

第7章 - 複合的なデータを表示する:
ツリー、チャート、
その他のインフォメーショングラフィックス

Transcript of "「デザイニング・インターフェース」勉強会 - 第7章"

  1. 1. デザイニング・インターフェース勉強会第5回 7章 - 複合的なデータを表示する: ツリー、チャート、その他のインフォメーショングラフィックス 河村 奨 (@cognitom) https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. 今日の発表について @cognitomカフェのマスター || オープンソースのデザイナー || プログラマ 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/
  4. 4. この章でやること❶ インフォメーショングラフィックスの基礎組織化モデル: どのように組織化されている?前注意的変数 : どれがどれと関係している?ナビゲーションとブラウズ : データの詳細を見られる?ソートと並び替え : 別の観点で並べ替えできる?検索とフィルタリング : 自分に必要なデータだけに実際のデータ : 具体的なデータ値は何?
  5. 5. この章でやること❷ パターンの解説① 外観と詳細 (Overview Plus Detail) ⑦ ソート可能なテーブル (Sortable Table)② データティップ (Datatips) ⑧ 放射状テーブル (Radial Table)③ データのスポットライト (Data Spotlight) ⑨ 複数Y軸のグラフ (Multi-Y Graph)④ 動的なクエリ(Dynamic Queries) ⑩ 小さな複合データ群 (Small Multiples)⑤ データのブラッシング (Data Brushing) 11 ツリーマップ (Treemap)⑥ 部分的なズーム表示 (Local Zooming)
  6. 6. インフォメーショングラフィックスの基礎
  7. 7. ‘ 言葉で伝えるのではなく ’ 見せる もの p.281
  8. 8. 組織化モデル このデータはどのように組織化されているか?線形 表形式 階層型 相互接続 ネットワーク型 地理的 (または空間的) テキスト型 その他
  9. 9. 前注意的変数 どれがどれと関係しているのか? 特徴統合理論は、人間の視覚的注意についての心理学的モデ ルで、トリーズマンとゲラードにより1980年代初頭に発表さ Master’s Point れ、大きな影響力を持った。トリーズマンによれば、視覚情 報処理の初期段階でいくつかの単純な視覚的特徴が処理さ ひとの頭の中のGPUを れ れ、複数の特徴マップ(feature maps)として表象される。そ あ の後、顕著性マップ(saliency map)として統合を受け、興味 最大限活用しよう。 と も の対象となる領域へ注意を向けるためにアクセスされる。 は ! トリーズマンは2種類の視覚探索課題を区別した;特徴探索 何 験 (feature search)と結合探索(conjunction search)である。特 実 徴探索は、初期的(primitive)な特徴で定義されるターゲット 感 を、高速かつ前注意的に探索する過程である。結合探索は、 体 初期的な特徴の結合によって定義されるターゲットの探索 で、逐次的に行われる。結合探索はより低速であり、意識的Master s Point は、マスターの無責任なコメントです。書籍内に書かれた内容と必ずしも一致しません。 な注意を必要とする。トリーズマンはいくつもの実験を行 Wikipediaより
  10. 10. 次に表示される青い丸をみつけよう 前注意的変数を体感してみよう
  11. 11. 前注意的変数を体感してみよう
  12. 12. 前注意的変数を体感してみよう
  13. 13. 次に表示される青い丸をみつけよう 前注意的変数を体感してみよう
  14. 14. 前注意的変数を体感してみよう
  15. 15. 前注意的変数を体感してみよう
  16. 16. 次は 難易 度高 め次に表示される数の内、 1 以上をみつけよう 前注意的変数を体感してみよう
  17. 17. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.3160.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.4260.266 0.750 1.056 0.936 0.911 0.820 0.723 1.201 0.935 0.8190.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.8490.187 0.586 0.529 0.340 0.829 0.835 0.873 0.945 1.103 0.7100.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 0.424 前注意的変数を体感してみよう
  18. 18. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.3160.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.4260.266 0.750 1.056 0.936 0.911 0.820 0.723 1.201 0.935 0.8190.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.8490.187 0.586 0.529 0.340 0.829 0.835 0.873 0.945 1.103 0.7100.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 0.424 前注意的変数を体感してみよう
  19. 19. 次に表示される数の内、 1 以上をみつけよう 前注意的変数を体感してみよう
  20. 20. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 0.820 0.698 1.201 0.232 0.3160.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.4260.266 0.750 0.424 0.936 0.911 1.064 0.723 0.621 0.935 0.8190.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.8491.103 0.586 0.529 0.340 0.829 0.835 0.873 0.945 0.187 0.7100.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 1.056 前注意的変数を体感してみよう
  21. 21. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.2500.333 0.384 0.564 0.587 0.857 0.820 0.698 1.201 0.232 0.3160.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.4260.266 0.750 0.424 0.936 0.911 1.064 0.723 0.621 0.935 0.8190.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.8491.103 0.586 0.529 0.340 0.829 0.835 0.873 0.945 0.187 0.7100.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 1.056 前注意的変数を体感してみよう
  22. 22. これは難易度の問題ではない 前注意的変数を体感してみよう
  23. 23. 8つの前注意的変数 Photo / Tiếng Việt: Ảnh cộng hưởng từ hạt nhân bộ não của người. Released under the GFDL by en:User:TheBrain on 20 May 2003 前注意的変数を体感してみよう
  24. 24. 色の諧調前注意的変数を体感してみよう
  25. 25. 色の明度前注意的変数を体感してみよう
  26. 26. 色の彩度前注意的変数を体感してみよう
  27. 27. 質感前注意的変数を体感してみよう
  28. 28. 位置と整列前注意的変数を体感してみよう
  29. 29. 向き前注意的変数を体感してみよう
  30. 30. 大きさ前注意的変数を体感してみよう
  31. 31. 形状前注意的変数を体感してみよう
  32. 32. 前注意的 視覚的特徴なし (特徴探索) (結合探索) 0.103 0.176 0.387 0.300 0.379 0.333 0.384 0.564 0.587 0.857 例 0.421 0.309 0.654 0.729 0.228 0.266 0.750 1.056 0.936 0.911情報伝達 注意を向ける前に 注意を向けた後に検索時間 項目数によらず一定 項目数に比例認識の方法 「根源的な認知」 考えることを強いる 前注意的変数を体感してみよう
  33. 33. http://www.tokyometro.jp/en/subwaymap/pdf/routemap_en.pdf 色の諧調 色の明度 色の彩度 質感 位置と整列 向き 大きさ 形状
  34. 34. ナビゲーションとブラウズ どうすればこのデータを詳しく調べられるか?外観と詳細 スクロールとパン部分的なズーム ズーム 関心地点の開閉ブラッシング 関心地点へのドリルダウン
  35. 35. ソートと並び替え このデータを別の観点で見られるように並べ替えできるか? アルファベット順ソート可能 数値順 日付や時刻順 物理的な位置の順序 カテゴリまたはタグによる順序 人気度:利用頻度が高いか低いか ユーザ定義による整列順序 完全にランダムな順序 (何が出るか決して分からない)
  36. 36. 検索とフィルタリング 自分に必要なデータだけを見るにはどうする?動的なクエリ インタラクティブ性が高い 反復的に操作できる コンテクストを示せる 複合的である
  37. 37. 実際のデータ 具体的なデータ値は何か?ラベル: 視線移動が最小。使いすぎると煩雑に凡例 : なるべくグラフィックの近くに座標軸、ルーラ、スケール、タイムライン : 大まかな把握データティップ : 普段隠しておくことで煩雑さを減データのスポットライト : スポット以外との関係性を残しつつデータのブラッシング : グラフィック自体が選択のUIに
  38. 38. パターンの解説
  39. 39. ① 外観と詳細② データティップ ① 外観と詳細③ スポットライト Overview Plus Detail④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合 Adobe Illustrator Sublime Text 211 ツリーマップ
  40. 40. ① 外観と詳細② データティップ ② データティップ③ スポットライト Datatips④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 Google Maps ツリーマップ
  41. 41. ① 外観と詳細② データティップ ③ データのスポットライト③ スポットライト Data Spotlight④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 Google Public Data Adobe Illustrator ツリーマップ
  42. 42. ① 外観と詳細② データティップ ④ 動的なクエリ③ スポットライト Dynamic Queries④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 Facebookページ管理画面 Google Analytics ツリーマップ
  43. 43. ① 外観と詳細② データティップ ⑤ データのブラッシング③ スポットライト 312 Chapter 7: Showing Complex Data: Trees, Charts, and Other Information Graphics Data Brushing Data Brushing The Patterns 315④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム The Patterns 315⑦ Figure 7-29. BBN Cornerstone Figure 7-26.SPOT Adventures live map ソート可能 What⑧ Let the user select data items in one view; show the same data selected simultaneously in 放射状テーブル another view.⑨ Use when 複数Y軸グラフ You can show two or more information graphics at a time. You might have two line plots and a scatter plot, or a scatter plot and a table, or a diagram and a tree, or a map and a timeline, whatever—as long as each graphic is showing the same data set.⑩ 小さな複合 Why Data Brushing offers a very rich form of interactive data exploration. First, SPOTuser can se- map Figure 7-30. Weeplaces (http://weeplaces.com) Figure 7-29. the Adventures live11 lect data points using an information graphic itself as a “selector.” Sometimes it’s easier to ツリーマップ findIn other librariesinterest visually than by less direct means, such as Dynamic Queries—outliers points of on a plot can be seen and manipulated immediately, for instance, while figuring out how http://quince.infragistics.com/Patterns/Data%20Brushing.aspx
  44. 44. ① 外観と詳細② データティップ ⑥ 部分的なズーム表示③ スポットライト Local Zooming④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 ツリーマップ
  45. 45. ① 外観と詳細② データティップ ⑦ ソート可能なテーブル③ スポットライト Sortable Table④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 ツリーマップ
  46. 46. ① 外観と詳細② データティップ ⑧ 放射状テーブル③ スポットライト Radial Table④ 車種の関連 動的なクエリ⑤ ブラッシング⑥ Master’s Point 部分的なズーム⑦ ソート可能⑧ 分野の専門家のための 放射状テーブル 図式。一般人にはやは⑨ り分かりにくい。 複数Y軸グラフ⑩ 小さな複合11 遺伝子解析 Master s Point は、マスターの無責任なコメントです。 書籍内に書かれた内容と必ずしも一致しません。 ツリーマップ
  47. 47. ① 外観と詳細② データティップ ⑨ 複数Y軸のグラフ③ スポットライト Multi-Y Graph 328 Chapter 7: Showing Complex Data: Trees, Charts, and Other Information Graphics④ 動的なクエリ Multi-Y Graph⑤ ブラッシング⑥ 部分的なズーム⑦ ソート可能⑧ 放射状テーブル⑨ 複数Y軸グラフ Figure 7-42. New York Times graphic⑩ 小さな複合 What11 Stack multiple graph lines in one panel; let them all share the same x-axis. ツリーマップ Use when
  48. 48. ① 外観と詳細② データティップ ⑩ 小さな複合データ群③ スポットライト Small Multiples④ Figure 7-46. Weather chart from The Weather Channel 動的なクエリ In other libraries⑤ http://quince.infragistics.com/Patterns/Multi-Y%20Graph.aspx ブラッシング Small Multiples⑥ 部分的なズーム⑦ ソート可能⑧ Figure 7-47. Climate heat map, from a University of Oregon publication 放射状テーブル⑨ 複数Y軸グラフ⑩ 小さな複合11 ツリーマップ
  49. 49. ① 外観と詳細② データティップ   ツリーマップ 11③ スポットライト Treemap④ 動的なクエリ⑤ ブラッシング⑥ 部分的なズーム Master’s Point⑦ ソート可能 新聞は一種のツリー⑧ 放射状テーブル マップ。WEBでうまく⑨ 複数Y軸グラフ 使えているところは皆 無。(結局写真には負ける)⑩ 小さな複合 Master s Point は、マスターの無責任なコメントです11 書籍内に書かれた内容と必ずしも一致しません。 ツリーマップ
  50. 50. おつかれさまでした。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×