タブの並列切替
タブには、並列な関係を持つ情報を1つずつ格納する。
理由:1画面に収まり切らない、または同時に見せるべきではない複数の情報のまとまりを、(画面遷移やスクロールを発生させずに)すばやく表示するため。
効能
- 情報の横並びの組織構造を把握しやすくなる。
- 画面面積の節約によって、画面遷移に必要なクリック数が削減される。
- クライアント側にタブ内の情報を保持していれば、サーバーへのアクセスを発生させずに、迅速に情報を切替表示できる。
用法
- 同種の構成または性質の情報を、横一列のタブに格納する。
- タブの数は、2〜7にする。
- 各タブのラベルは、情報の並列関係が分かる明確なものとする。
- 情報が並列の関係にない場合(順序関係がある場合など)は、タブではなく画面遷移を用いる。
- タブを切り替える際、表示中のタブ内への操作を保持するか否かによって、ボタンの配置を決定する。
- 操作を保持する場合:
アクションの実行ボタンはタブの外側に配置する。 - 操作を無効にする場合:
アクションの実行ボタンはタブの内側に配置する。
また、タブの切り替え時に、無効となる操作が存在する場合、アラートを表示する。
- 操作を保持する場合:
2〜7つのタブ
タブとボタンの配置
注意書き
- 一度に一種類の情報しか扱えないため、ある意味でモードが発生する。同時に参照することに意味がある情報は、タブに格納しないようにする。