ブロック

1画面(ベース画面)を構成する複数のペインの内部を、それぞれ「ブロック」と呼ばれる矩形領域に分けて考える。
理由:ユーザーにとって、意味のある情報の単位を明確にし、相互のまとまりを比較参照できるようにするため。

図例
ペイン内のブロック

効能

  • 1画面に集約されたデータを概観できるため、情報の入手効率がよい。
  • 画面面積が節約され、複数の画面を行き来せずとも、1つの業務や目的を完遂できる。
  • 条件と結果の対応や、情報の入れ物と中身の対応を学習しやすい。
  • 操作の順序と視線移動の方向性が合致するため、自然な操作感を得られる。

用法

  • ペインとは、特定のタスクやオブジェクトを表す不可分な矩形領域。通常、複数のUI要素で構成する。
  • 単独のウィンドウとして切り出すことができる「検索(Retriever)」「閲覧(Viewer)」「編集(Editor)」などを、ウィンドウではなく、画面内を構成する1つの領域として表現する。
  • 「検索」とその結果の「閲覧」のように、条件をキーとし、結果を同一画面内にペインとして表示する用法が多い。
  • 選択した1項目(1カテゴリー)の詳細を、同一画面内に表示する場合にも使う。
  • ペイン間の操作の順序が、上から下、左から右となるようにする。
  • 4つ以上のペインを使用したい場合は、1ペインの内部を、2ペインまたは3ペインで構成する。
  • ペイン内で行うべきタスクや、扱う対象物が一見不明瞭な場合は、ペインの上部にそれらを見出しラベルとして明示する。
  • 各ペインは、ドラッグによるサイズの伸縮ができるようにする。

図例
ブロックの分割

注意書き

  • 1画面内の要素が多くなるため、ペイン間の関係が十分に明確でなければかえって注目すべき箇所に迷う。このため、画面内の複数のペインのうち、1つを「メインペイン」とし、画面の初期表示状態では、メインペイン以外を閉じておく。
  • ユーザーの作業の進捗に従って、ペインを開くことで、ユーザーが複数のペイン間の関係を理解できるようにする。