タブの並列切替

タブには、並列な関係を持つ情報を1つずつ格納する。
理由:1画面に収まり切らない、または同時に見せるべきではない複数の情報のまとまりを、(画面遷移やスクロールを発生させずに)すばやく表示するため。

図例

効能

  • 情報の横並びの組織構造を把握しやすくなる。
  • 画面面積の節約によって、画面遷移に必要なクリック数が削減される。
  • クライアント側にタブ内の情報を保持していれば、サーバーへのアクセスを発生させずに、迅速に情報を切替表示できる。

用法

  • 同種の構成または性質の情報を、横一列の”タブ“に格納する。
  • タブの数は、2〜7にする。
  • 各タブのラベルは、情報の並列関係が分かる明確なものとする。
  • 情報が並列の関係にない場合(順序関係がある場合など)は、タブではなく画面遷移を用いる。
  • タブを切り替える際、表示中のタブ内への操作を保持するか否かによって、ボタンの配置を決定する。
    • 操作を保持する場合:
      アクションの実行ボタンはタブの外側に配置する。
    • 操作を無効にする場合:
      アクションの実行ボタンはタブの内側に配置する。
      また、タブの切り替え時に、無効となる操作が存在する場合、アラートを表示する。

図例
2〜7つのタブ

図例
タブとボタンの配置

注意書き

  • 一度に一種類の情報しか扱えないため、ある意味でモードが発生する。同時に参照することに意味がある情報は、タブに格納しないようにする。