テーブル内の一括操作
よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。
構成
「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。
テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。
- 一括選択するチェックボックス(必須)
- 個別選択するチェックボックス(必須)
- テーブル内の一括操作エリア
1. 一括選択するチェックボックス
テーブル内の要素をすべて選択できるチェックボックスです。
デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。 表示しているページ外のオブジェクト(他のページのオブジェクト)は選択状態にしません。
「一括選択するチェックボックス」が未選択状態のときに、テーブル内のオブジェクトが1つ以上選択された場合(選択状態と未選択状態が混ざっている場合)は、「一括選択するチェックボックス」を混在選択状態(mixed=true
)にします。
「一括選択するチェックボックス」の選択状態を解除すると、「わくわくチェック」の選択解除と同様にテーブルのページ送り上も含めたすべての選択状態を解除します。
混在選択状態(mixed=true
)で「一括選択するチェックボックス」をクリックした場合も同様に、すべての選択状態を解除します。
2. 個別選択するチェックボックス
テーブル内のオブジェクトを個別選択できるチェックボックスです。
ページ送りによって他のページに移動された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除します。
3. テーブル内の一括操作エリア
テーブル内で選択されたオブジェクトに対して一括操作を配置するエリアです。
SmartHR UIではこのエリアをBulkActionRow
と呼んでいます。
一括操作エリアの表示
一括操作エリアは、基本的に「一括選択するチェックボックス」または「個別選択するチェックボックス」が1つ以上選択された際に表示します。
ただし、以下の場合には(未選択状態の)一括操作エリアを常に表示することを検討しましょう。 一括操作ボタンの表示は必須ではありません。
- 一括操作の存在をユーザーにあらかじめ認知させたい場合
- 「オブジェクトを選択して(一括)操作すること」が主たる操作である場合
選択状態の表示
一括操作エリアには、テーブル内でオブジェクトの選択状態を示すテキストを表示します。
選択状態のライティングパターン
オブジェクトの選択状態にあわせたライティングパターンは以下のとおりです。
- 句点を省略しないでください。
- 件数の単位は、オブジェクトの意味にあわせて「件」「名」などを使用してください。
- 関連リンク:従業員に関連する数え方の表記
オブジェクトの選択状態 | テキストに表示する文言 |
---|---|
未選択(常に表示する場合) | {オブジェクト名}が選択されていません。 |
複数選択されている | {件数}件の{オブジェクト名}が選択されています。 |
表示されているものすべてが選択されている | このページの{オブジェクト名}{件数}件すべてが選択されています。 |
テーブルのページ送り上のすべてが選択されている | 一覧の{オブジェクト名}{件数}件すべてが選択されています。 |
わくわくチェック(すべてのオブジェクトの選択)
複数のページに分けてオブジェクトを表示している場合に、ページの枠を超えてすべてのオブジェクトを選択できるUIを「わくわくチェック」と呼んでいます。
具体的な動作については、わくわくチェックの動作を参照してください。
一括操作ボタン
一括操作エリア内の要素として、データの削除・一括変更など、選択したオブジェクトを一括で操作するためのボタンを配置できます。
- Buttonや、類似する操作をまとめたDropdownMenuButtonを配置できます。
- ユーザーが迷わないよう、配置するボタンは多くても4つ程度とします。多数の操作ができる場合には、アクションの優先度を検討し、優先度が低いアクションは減らしたり、DropdownMenuButtonとしてまとめて配置するなどを検討しましょう。