「デザイニング・インターフェース」勉強会 - 第7章
•
24 likes•3,069 views
第7章 - 複合的なデータを表示する： ツリー、チャート、 その他のインフォメーショングラフィックス
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Similar to 「デザイニング・インターフェース」勉強会 - 第7章
Similar to 「デザイニング・インターフェース」勉強会 - 第7章 (20)
More from Tsutomu Kawamura
More from Tsutomu Kawamura (20)
「デザイニング・インターフェース」勉強会 - 第7章
- 1. デザイニング・インターフェース勉強会 第5回 7章 - 複合的なデータを表示する： ツリー、チャート、 その他のインフォメーショングラフィックス 河村 奨 (@cognitom) https://www.facebook.com/groups/di2e.study/
- 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
- 3. 今日の発表について @cognitom カフェのマスター || オープンソースのデザイナー || プログラマ 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/
- 4. この章でやること❶ インフォメーショングラフィックスの基礎 組織化モデル: どのように組織化されている? 前注意的変数 : どれがどれと関係している? ナビゲーションとブラウズ : データの詳細を見られる? ソートと並び替え : 別の観点で並べ替えできる? 検索とフィルタリング : 自分に必要なデータだけに 実際のデータ : 具体的なデータ値は何?
- 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)
- 8. ‘ 言葉で伝えるのではなく ’ 見せる もの p.281
- 9. 組織化モデル このデータはどのように組織化されているか? 線形 表形式 階層型 相互接続 ネットワーク型 地理的 (または空間的) テキスト型 その他
- 10. 前注意的変数 どれがどれと関係しているのか? 特徴統合理論は、人間の視覚的注意についての心理学的モデ ルで、トリーズマンとゲラードにより1980年代初頭に発表さ Master’s Point れ、大きな影響力を持った。トリーズマンによれば、視覚情 報処理の初期段階でいくつかの単純な視覚的特徴が処理さ ひとの頭の中のGPUを れ れ、複数の特徴マップ(feature maps)として表象される。そ あ の後、顕著性マップ(saliency map)として統合を受け、興味 最大限活用しよう。 と も の対象となる領域へ注意を向けるためにアクセスされる。 は ! トリーズマンは2種類の視覚探索課題を区別した；特徴探索 何 験 (feature search)と結合探索(conjunction search)である。特 実 徴探索は、初期的(primitive)な特徴で定義されるターゲット 感 を、高速かつ前注意的に探索する過程である。結合探索は、 体 初期的な特徴の結合によって定義されるターゲットの探索 で、逐次的に行われる。結合探索はより低速であり、意識的 Master s Point は、マスターの無責任なコメントです。 書籍内に書かれた内容と必ずしも一致しません。 な注意を必要とする。トリーズマンはいくつもの実験を行 Wikipediaより
- 12. 前注意的変数を体感してみよう
- 13. 前注意的変数を体感してみよう
- 15. 前注意的変数を体感してみよう
- 16. 前注意的変数を体感してみよう
- 17. 次は 難易 度高 め 次に表示される数の内、 1 以上をみつけよう 前注意的変数を体感してみよう
- 18. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.250 0.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.316 0.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.426 0.266 0.750 1.056 0.936 0.911 0.820 0.723 1.201 0.935 0.819 0.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.849 0.187 0.586 0.529 0.340 0.829 0.835 0.873 0.945 1.103 0.710 0.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 0.424 前注意的変数を体感してみよう
- 19. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.250 0.333 0.384 0.564 0.587 0.857 1.064 0.698 0.621 0.232 0.316 0.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.426 0.266 0.750 1.056 0.936 0.911 0.820 0.723 1.201 0.935 0.819 0.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.849 0.187 0.586 0.529 0.340 0.829 0.835 0.873 0.945 1.103 0.710 0.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 0.424 前注意的変数を体感してみよう
- 20. 次に表示される数の内、 1 以上をみつけよう 前注意的変数を体感してみよう
- 21. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.250 0.333 0.384 0.564 0.587 0.857 0.820 0.698 1.201 0.232 0.316 0.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.426 0.266 0.750 0.424 0.936 0.911 1.064 0.723 0.621 0.935 0.819 0.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.849 1.103 0.586 0.529 0.340 0.829 0.835 0.873 0.945 0.187 0.710 0.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 1.056 前注意的変数を体感してみよう
- 22. 0.103 0.176 0.387 0.300 0.379 0.276 0.179 0.321 0.192 0.250 0.333 0.384 0.564 0.587 0.857 0.820 0.698 1.201 0.232 0.316 0.421 0.309 0.654 0.729 0.228 0.529 0.832 0.935 0.452 0.426 0.266 0.750 0.424 0.936 0.911 1.064 0.723 0.621 0.935 0.819 0.225 0.326 0.643 0.337 0.721 0.837 0.682 0.987 0.984 0.849 1.103 0.586 0.529 0.340 0.829 0.835 0.873 0.945 0.187 0.710 0.153 0.485 0.560 0.428 0.628 0.335 0.956 0.879 0.699 1.056 前注意的変数を体感してみよう
- 24. 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 前注意的変数を体感してみよう
- 33. 前注意的 視覚的特徴なし (特徴探索) (結合探索) 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 情報伝達 注意を向ける前に 注意を向けた後に 検索時間 項目数によらず一定 項目数に比例 認識の方法 「根源的な認知」 考えることを強いる 前注意的変数を体感してみよう
- 34. http://www.tokyometro.jp/en/subwaymap/pdf/routemap_en.pdf 色の諧調 色の明度 色の彩度 質感 位置と整列 向き 大きさ 形状
- 35. ナビゲーションとブラウズ どうすればこのデータを詳しく調べられるか? 外観と詳細 スクロールとパン 部分的なズーム ズーム 関心地点の開閉 ブラッシング 関心地点へのドリルダウン
- 36. ソートと並び替え このデータを別の観点で見られるように並べ替えできるか? アルファベット順 ソート可能 数値順 日付や時刻順 物理的な位置の順序 カテゴリまたはタグによる順序 人気度：利用頻度が高いか低いか ユーザ定義による整列順序 完全にランダムな順序 (何が出るか決して分からない)
- 37. 検索とフィルタリング 自分に必要なデータだけを見るにはどうする? 動的なクエリ インタラクティブ性が高い 反復的に操作できる コンテクストを示せる 複合的である
- 38. 実際のデータ 具体的なデータ値は何か? ラベル: 視線移動が最小。使いすぎると煩雑に 凡例 : なるべくグラフィックの近くに 座標軸、ルーラ、スケール、タイムライン : 大まかな把握 データティップ : 普段隠しておくことで煩雑さを減 データのスポットライト : スポット以外との関係性を残しつつ データのブラッシング : グラフィック自体が選択のUIに
- 40. パターンの解説
- 41. ① 外観と詳細 ② データティップ ① 外観と詳細 ③ スポットライト Overview Plus Detail ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 Adobe Illustrator Sublime Text 2 11 ツリーマップ
- 42. ① 外観と詳細 ② データティップ ② データティップ ③ スポットライト Datatips ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 11 Google Maps ツリーマップ
- 43. ① 外観と詳細 ② データティップ ③ データのスポットライト ③ スポットライト Data Spotlight ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 11 Google Public Data Adobe Illustrator ツリーマップ
- 44. ① 外観と詳細 ② データティップ ④ 動的なクエリ ③ スポットライト Dynamic Queries ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 11 Facebookページ管理画面 Google Analytics ツリーマップ
- 45. ① 外観と詳細 ② データティップ ⑤ データのブラッシング ③ スポットライト 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 live 11 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
- 46. ① 外観と詳細 ② データティップ ⑥ 部分的なズーム表示 ③ スポットライト Local Zooming ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 11 ツリーマップ
- 47. ① 外観と詳細 ② データティップ ⑦ ソート可能なテーブル ③ スポットライト Sortable Table ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム ⑦ ソート可能 ⑧ 放射状テーブル ⑨ 複数Y軸グラフ ⑩ 小さな複合 11 ツリーマップ
- 48. ① 外観と詳細 ② データティップ ⑧ 放射状テーブル ③ スポットライト Radial Table ④ 車種の関連 動的なクエリ ⑤ ブラッシング ⑥ Master’s Point 部分的なズーム ⑦ ソート可能 ⑧ 分野の専門家のための 放射状テーブル 図式。一般人にはやは ⑨ り分かりにくい。 複数Y軸グラフ ⑩ 小さな複合 11 遺伝子解析 Master s Point は、マスターの無責任なコメントです。 書籍内に書かれた内容と必ずしも一致しません。 ツリーマップ
- 49. ① 外観と詳細 ② データティップ ⑨ 複数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 ⑩ 小さな複合 What 11 Stack multiple graph lines in one panel; let them all share the same x-axis. ツリーマップ Use when
- 50. ① 外観と詳細 ② データティップ ⑩ 小さな複合データ群 ③ スポットライト 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 ツリーマップ
- 51. ① 外観と詳細 ② データティップ ツリーマップ 11 ③ スポットライト Treemap ④ 動的なクエリ ⑤ ブラッシング ⑥ 部分的なズーム Master’s Point ⑦ ソート可能 新聞は一種のツリー ⑧ 放射状テーブル マップ。WEBでうまく ⑨ 複数Y軸グラフ 使えているところは皆 無。(結局写真には負ける) ⑩ 小さな複合 Master s Point は、マスターの無責任なコメントです 11 書籍内に書かれた内容と必ずしも一致しません。 ツリーマップ
- 52. おつかれさまでした。