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

デザイニング・インターフェース勉強会第5回　7章 - 複合的なデータを表示する：

ツリー、チャート、その他のインフォメーショングラフィックス

河村奨 (@cognitom)https://www.facebook.com/groups/di2e.study/

https://www.facebook.com/groups/di2e.study/


デザイニング・インターフェース第2版

パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ

http://amzn.to/LfZuHZ

http://amzn.to/LfZuHZ

@cognitomカフェのマスター || オープンソースのデザイナー || プログラマ

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について



この章でやること❶

組織化モデル: どのように組織化されている?

前注意的変数 : どれがどれと関係している?

ナビゲーションとブラウズ : データの詳細を見られる?

ソートと並び替え : 別の観点で並べ替えできる?

検索とフィルタリング : 自分に必要なデータだけに

実際のデータ : 具体的なデータ値は何?

インフォメーショングラフィックスの基礎

この章でやること❷

① 外観と詳細 (Overview Plus Detail)

② データティップ (Datatips)

③ データのスポットライト (Data Spotlight)

④ 動的なクエリ(Dynamic Queries)

⑤ データのブラッシング (Data Brushing)

⑥ 部分的なズーム表示 (Local Zooming)

⑦ ソート可能なテーブル (Sortable Table)

⑧ 放射状テーブル (Radial Table)

⑨ 複数Y軸のグラフ (Multi-Y Graph)

⑩ 小さな複合データ群 (Small Multiples)

11 ツリーマップ (Treemap)

パターンの解説

❶インフォメーショングラフィックスの基礎

言葉で伝えるのではなく

“見せる”もの

p.281

‘’

組織化モデルこのデータはどのように組織化されているか?

線形表形式階層型相互接続ネットワーク型

地理的(または空間的) テキスト型その他

特徴統合理論は、人間の視覚的注意についての心理学的モデルで、トリーズマンとゲラードにより1980年代初頭に発表され、大きな影響力を持った。トリーズマンによれば、視覚情報処理の初期段階でいくつかの単純な視覚的特徴が処理され、複数の特徴マップ(feature maps)として表象される。その後、顕著性マップ(saliency map)として統合を受け、興味の対象となる領域へ注意を向けるためにアクセスされる。

トリーズマンは2種類の視覚探索課題を区別した；特徴探索(feature search)と結合探索(conjunction search)である。特徴探索は、初期的(primitive)な特徴で定義されるターゲットを、高速かつ前注意的に探索する過程である。結合探索は、初期的な特徴の結合によって定義されるターゲットの探索で、逐次的に行われる。結合探索はより低速であり、意識的な注意を必要とする。トリーズマンはいくつもの実験を行

前注意的変数どれがどれと関係しているのか?

何はともあれ

体感実験!ひとの頭の中のGPUを最大限活用しよう。

Master’s Point

Master’s Point は、マスターの無責任なコメントです。書籍内に書かれた内容と必ずしも一致しません。

Wikipediaより

http://ja.wikipedia.org/wiki/%E6%B3%A8%E6%84%8F

http://ja.wikipedia.org/wiki/%E6%B3%A8%E6%84%8F

http://ja.wikipedia.org/w/index.php?title=%E3%82%A2%E3%83%B3%E3%83%8D%E3%83%BB%E3%83%88%E3%83%AA%E3%83%BC%E3%82%BA%E3%83%9E%E3%83%B3&action=edit&redlink=1

http://ja.wikipedia.org/w/index.php?title=%E3%82%A2%E3%83%B3%E3%83%8D%E3%83%BB%E3%83%88%E3%83%AA%E3%83%BC%E3%82%BA%E3%83%9E%E3%83%B3&action=edit&redlink=1

次に表示される

青い丸をみつけよう

前注意的変数を体感してみよう

次に表示される

青い丸をみつけよう


次に表示される数の内、

1 以上をみつけよう


次は難易度高め


0.103 0.176 0.387 0.379 0.1790.300 0.276 0.321 0.192 0.250

0.333 0.384 0.564 0.857 0.6980.587 1.064 0.621 0.232 0.316

0.421 0.309 0.654 0.228 0.8320.729 0.529 0.935 0.452 0.426

0.266 0.750 1.056 0.911 0.7230.936 0.820 1.201 0.935 0.819

0.225 0.326 0.643 0.721 0.6820.337 0.837 0.987 0.984 0.849

0.187 0.586 0.529 0.829 0.8730.340 0.835 0.945 1.103 0.710

0.153 0.485 0.560 0.628 0.9560.428 0.335 0.879 0.699 0.424

次に表示される数の内、

1 以上をみつけよう



0.103 0.176 0.387 0.379 0.1790.300 0.276 0.321 0.192 0.250

0.333 0.384 0.564 0.857 0.6980.587

1.064 0.621

0.232 0.316

0.421 0.309 0.654 0.228 0.8320.729 0.529 0.935 0.452 0.426

0.266 0.750

1.056

0.911 0.7230.936

1.201

0.935 0.819

0.225 0.326 0.643 0.721 0.6820.337 0.837 0.987 0.984 0.849

0.1870.586 0.529 0.829 0.8730.340 0.835 0.9451.103 0.710

0.153 0.485 0.560 0.628 0.9560.428 0.335 0.879 0.699

0.424

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 under the GFDL by en:User:TheBrain on 20 May 2003

http://vi.wikipedia.org/wiki/%E1%BA%A2nh_c%E1%BB%99ng_h%C6%B0%E1%BB%9Fng_t%E1%BB%AB_h%E1%BA%A1t_nh%C3%A2n

http://vi.wikipedia.org/wiki/%E1%BA%A2nh_c%E1%BB%99ng_h%C6%B0%E1%BB%9Fng_t%E1%BB%AB_h%E1%BA%A1t_nh%C3%A2n

http://en.wikipedia.org/wiki/User:TheBrain

http://en.wikipedia.org/wiki/User:TheBrain

色の諧調


色の明度


色の彩度


質感


位置と整列


向き


大きさ


形状



前注意的(特徴探索)

視覚的特徴なし(結合探索)

例

情報伝達

検索時間

認識の方法

注意を向ける前に注意を向けた後に

項目数によらず一定項目数に比例

「根源的な認知」考えることを強いる

0.103 0.176 0.387 0.3790.300

0.333 0.384 0.564 0.8570.587

0.421 0.309 0.654 0.2280.729

0.266 0.750 1.056 0.9110.936

色の諧調色の明度色の彩度質感位置と整列向き大きさ形状

http://www.tokyometro.jp/en/subwaymap/pdf/routemap_en.pdf

ナビゲーションとブラウズどうすればこのデータを詳しく調べられるか?

スクロールとパン

ズーム

関心地点の開閉

関心地点へのドリルダウン

外観と詳細

部分的なズーム

ブラッシング

ソートと並び替えこのデータを別の観点で見られるように並べ替えできるか?

アルファベット順数値順日付や時刻順物理的な位置の順序カテゴリまたはタグによる順序人気度：利用頻度が高いか低いかユーザ定義による整列順序完全にランダムな順序 (何が出るか決して分からない)

ソート可能

検索とフィルタリング自分に必要なデータだけを見るにはどうする?

インタラクティブ性が高い反復的に操作できるコンテクストを示せる複合的である

動的なクエリ

実際のデータ具体的なデータ値は何か?

ラベル: 視線移動が最小。使いすぎると煩雑に

凡例 : なるべくグラフィックの近くに

座標軸、ルーラ、スケール、タイムライン : 大まかな把握

データティップ : 普段隠しておくことで煩雑さを減

データのスポットライト : スポット以外との関係性を残しつつ

データのブラッシング : グラフィック自体が選択のUIに

❷パターンの解説

① 外観と詳細Overview Plus Detail

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11

データティップ

スポットライト

動的なクエリ

ブラッシング


ソート可能

放射状テーブル

複数Y軸グラフ

小さな複合

ツリーマップ

Adobe Illustrator Sublime Text 2

② データティップDatatips

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

Google Maps

③ データのスポットライトData Spotlight

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

Google Public Data Adobe Illustrator

④ 動的なクエリDynamic Queries

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

Facebookページ管理画面 Google Analytics

⑤ データのブラッシングData Brushing

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

312 Chapter 7: Showing Complex Data: Trees, Charts, and Other Information Graphics

Data Brushing

Figure 7-26. BBN Cornerstone

What

Let the user select data items in one view; show the same data selected simultaneously in another view.

Use when

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, the user can se-lect data points using an information graphic itself as a “selector.” Sometimes it’s easier to find points of interest visually than by less direct means, such as Dynamic Queries—outliers on a plot can be seen and manipulated immediately, for instance, while figuring out how to define them numerically might take a few seconds (or longer). “Do I want all points where X > 200 and Y > 5.6? I can’t tell; just let me draw a box around that group of points.”Second, by seeing the selected or “brushed” data points simultaneously in the other graphic(s), the user can observe those points in at least one other graphical context. That can be invaluable. To use the outlier example again, the user might want to know where those outliers are in a different data space, indexed by different variables—and by learn-ing that, she might gain immediate insight into the phenomenon that produced the data.

The Patterns 315

Figure 7-29. SPOT Adventures live map

Figure 7-30. Weeplaces (http://weeplaces.com)

In other libraries

http://quince.infragistics.com/Patterns/Data%20Brushing.aspx

This pattern, called Linked Multiples, is a generalization of Data Brushing:http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,225,17,0,0,246

The Patterns 315

Figure 7-29. SPOT Adventures live map

Figure 7-30. Weeplaces (http://weeplaces.com)

In other libraries

http://quince.infragistics.com/Patterns/Data%20Brushing.aspx

This pattern, called Linked Multiples, is a generalization of Data Brushing:http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,225,17,0,0,246

⑥ 部分的なズーム表示Local Zooming

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

⑦ ソート可能なテーブルSortable Table

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

⑧ 放射状テーブルRadial Table

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

分野の専門家のための図式。一般人にはやはり分かりにくい。

Master’s Point

Master’s Point は、マスターの無責任なコメントです。書籍内に書かれた内容と必ずしも一致しません。遺伝子解析

車種の関連

⑨ 複数Y軸のグラフMulti-Y Graph

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

328 Chapter 7: Showing Complex Data: Trees, Charts, and Other Information Graphics

Multi-Y Graph

Figure 7-42. New York Times graphic

What

Stack multiple graph lines in one panel; let them all share the same x-axis.

Use when

You present two or more graphs, usually simple line plots, bar charts, or area charts (or any combination thereof). The data in those graphs all share the same x-axis, often a time-line, but otherwise they describe different things, perhaps with different units or scale on the y-axis. You want to encourage the viewer to find “vertical” relationships among the data sets being shown—correlations, similarities, unexpected differences, and so on.

Why

Aligning the graphs along the x-axis first tells the viewer that these data sets are relat-ed, and then it lets her make side-by-side comparisons of the data. In Figure 7-42, the proximity of the two graphs makes visible the correlations in the curves’ shapes; you can see that spikes in the bottom graph generally line up with interesting features in the top graph, and the grid lines enable precise observation. For instance, the vertical grid line between 1990 and 1991 lines up peaks in both curves.You could have done this by superimposing one graph upon the other. But by showing each graph individually, with its own y-axis, you enable each graph to be viewed on its own merits without visual interference from the other.

⑩ 小さな複合データ群Small Multiples

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

The Patterns 331

The information graphics in a multi-Y display don’t need to be traditional graphs. The weather chart shown in Figure 7-46 uses a series of pictograms to illustrate expected weather conditions; these are aligned with the same time-based x-axis that the graph uses. (This chart hints at the next pattern, 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

　ツリーマップTreemap

①

②

③

④

⑤

⑥

⑦

⑧

外観と詳細

⑨

⑩

11



動的なクエリ

ブラッシング


ソート可能


複数Y軸グラフ

小さな複合

ツリーマップ

11

新聞は一種のツリーマップ。WEBでうまく使えているところは皆無。(結局写真には負ける)

Master’s Point

Master’s Point は、マスターの無責任なコメントです。書籍内に書かれた内容と必ずしも一致しません。

おつかれさまでした。

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

Documents

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