デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

54_既観と詳細(overview plus detail)

グラフィックの概観を、ズームされた「詳細ビュー」の脇に配置する。ユーザが概観の中でビューポートをドラッグしたら、詳細ビューでそれに対応する領域のグラフィックを表示する。例)地図の脇にミニ地図があり、それで操作できる

利用場面

全体像の中でユーザが自分の現在地を常に把握できるようにしたいが、ズームインすれば細かい詳細情報も見られるようにしたい場合。

55_データティップ(datatips)

グラフィック上で関心地点にマウスポインタが重なったら、その地点のデータ値をツールティップその他のフローティングウィンドウの中に表示する。例)Webページの用語解説

利用場面

ほぼ形式を問わず、データ集合の概観を示す場合。そのグラフィック上の特定の地点の奥に、さらに多くの隠しデータがある場合。

56_動的なクエリ(dynamic queries)

データ集合を瞬時に、かつインタラクティブにフィルタリングする手段を提供する。スライダやチェックボックスのように使いやすい標準的なコントロールを用いて、データ集合内のどの部分を表示するかを決めることができる。ユーザがそれらのコントロールを調整したらすぐに、データ表示領域に結果が現れる。例)スライダによって表示結果を変えられるWebページ

利用場面

大規模な多変量データ集合をユーザに示す場合。

57_データのブラッシング(data brushing)

一方のビューでユーザにデータ項目を選択させる。それと同時に、もう一方のビューで同じデータを選択済の状態で表示する。例)グラフの一部分を囲ったら、それとは異なる視点のグラフがもう一方の画面に拡大表示される

利用場面

複数のインフォメーショングラフィックスを一度に表示する場合。

58_部分的なズーム表示(local zooming)

データ項目の縮尺を小さくして、密度の高い単一ページ内にすべてのデータを表示する。マウスの動きに従ってページを歪曲し、それらのデータ項目を拡大して読み取りやすくする。例)Webページのテーブルの一部分が拡大する

利用場面

大きなデータ集合を、何らかの組織化の形式(グラフ、マップ、ネットワーク、テーブル)を用いて表示する場合。ユーザがマウスポインタかタッチスクリーンで関心のある場所をポイントできる場合。

59_行のストライプ配色(row striping)

2種類の似たような塗りつぶし色を用いて、テーブル内の行の背景色を1行おきに変える。例)iTunes

利用場面

テーブルを用いるが、そのテーブル内の各行が視覚的に見分けにくい場合。特に、列の数が多い場合(または行の中でデータの折り返しが生じる場合)。

60_ソート可能なテーブル(sortable table)

データをテーブル内に表示し、各列の値に従ってユーザがテーブルをソートできるようにする。例)Explorer や Finder のリスト表示

利用場面

インターフェース上に多変量型の情報を表示する場合。ただ1つの項目を求めて探索や並べ替え、カスタマイズ、検索などを行いたい場合。

61_項目へのジャンプ(jump to item)

ユーザが項目名を入力したら、その項目に直接ジャンプしてそれらを選択する。例)リスト表示で「d、a」と入力すると「data」フォルダが選択される

利用場面

スクロール可能なリスト、テーブル、ドロップダウン、コンボボックス、ツリー表を用いて、インターフェース上に多数の項目の集まりを表現する場合。

62_新規項目の入力行(new-item row)

テーブル内の最後の行を用いて、その場で新規項目を作成できるようにする。例)テーブルの一番最後の欄に、新規入力欄がある

利用場面

インターフェースの中に、テーブル、リスト、ツリー表示など、垂直型に表現された項目の集合が含まれている場合。ユーザがそこに新規項目を追加する必要が生じることがある場合。

63_カスケーディングリスト(cascading lists)

各階層で選択可能な項目リストを表示することによって、階層構造を表現する。いずれかの項目を選択するち、次の階層のリストでその項目の子に相当する項目を表示する。例)Finderのカラム表示

利用場面

扱うデータがツリー状である場合。すべての項目を見るには多くのスクロール操作が必要となり、その階層構造で上位にある項目の概観を把握するのが難しくなりそうな場合。

64_ツリー表示テーブル(tree table)

階層的なデータを、テーブルのように複数の列を用いて表示するが、先頭の列でインデント処理したアウトライン構造を用いて、そのツリー構造を示す。例)アウトライン表示

利用場面

項目が主に階層構造として組織されているため、それらを表示するツリーもほぼ常に見せておきたい場合。

65_複数Y軸のグラフ(multi-y graph)

複数のグラフを、1つのパネルの中で上下に積み重ねる。それらがすべて1つのX軸を共有するようにする。例)同じX軸を共有した棒グラフと折れ線グラフ

利用場面

1つのX軸を共有しないと、別々のものを示す状態になってしまう場合。そこに示されている複数のデータ集合の「縦の関係(相関性、類似性、思いがけない差異)」を見出しやすいようにしたい場合。

66_小さな複合データ郡(small multiples)

2つか3つのデータ次元を用いた、多数の小さなデータ画像を作成する。さらに1つか2つの補助的なデータ次元に従って、それらをページ上でタイトル表示する。例)連続したサーモグラフィのグラフ

利用場面

ユーザが1つずつグラフを見ていかねばならず、それらの違いを知るには何度も表示を切り替えなくてはならないような場合。主に、大型のスクリーンや印刷された紙の上で目にする。

67_ツリーマップ(treemap)

多次元的または階層的、あるいはその両方であるデータを、さまざまな大きさの四角形として表現する。それらの四角形を入れ子にして階層関係を示したり、色やラベルを用いて追加的な変数を示すこともできる。例)入れ子になったタグクラウド

利用場面

各項目が、大きさやカテゴリのようにそれを基準にして項目をグループ化できるような複数の属性を持っている場合。ユーザが数百数千の多数のデータポイントの概観を見たいと思っており、かなり大きな表示にも対応できるくらいの大型画面を使っている場合。

最後までお読みいただきありがとうございます!よろしければフォローお願いします!

もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

他にも、Amazonのほしい物リストからお選びいただくこともできます。

こちらの関連記事もあわせてどうぞ!

      【インターフェイスデザイン】02_コンテンツを整理する

      「デザイニング・インターフェース----パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。 13_2パネルのセレクタ(two-pa…

      【インターフェイスデザイン】05_事を行う

      「デザイニング・インターフェース----パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。 44_ボタンのグループ(button …

      【インターフェイスデザイン】04_ページを構成する

      「デザイニング・インターフェース----パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモモしておきたいと思います。 32_視覚的なフレームワーク(vis…

      【インターフェイスデザイン】09_よい見た目にする

      「デザイニング・インターフェース----パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。 88_深みのある背景(deep bac…

      【インターフェイスデザイン】03_動き回る

      「デザイニング・インターフェース----パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。 21_明快な入り口(clear ent…