テーブル内の一括操作

よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。

構成

「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。
テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。

  1. 一括選択するチェックボックス(必須)
  2. 個別選択するチェックボックス(必須)
  3. テーブル内の一括操作エリア

スクリーンショット: テーブル内一括操作の構成

1. 一括選択するチェックボックス

テーブル内の要素をすべて選択できるチェックボックスです。

デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。 表示しているページ外のオブジェクト(他のページのオブジェクト)は選択状態にしません。

スクリーンショット: 一括選択するチェックボックスが選択されている状態

「一括選択するチェックボックス」が未選択状態のときに、テーブル内のオブジェクトが1つ以上選択された場合(選択状態と未選択状態が混ざっている場合)は、「一括選択するチェックボックス」を混在選択状態(mixed=true)にします。

スクリーンショット: 混在選択状態の一括選択するチェックボックス

「一括選択するチェックボックス」の選択状態を解除すると、「わくわくチェック」の選択解除と同様にテーブルのページ送り上も含めたすべての選択状態を解除します。

混在選択状態(mixed=true)で「一括選択するチェックボックス」をクリックした場合も同様に、すべての選択状態を解除します。

スクリーンショット: 未選択状態のオブジェクトを一括選択するチェックボックス

2. 個別選択するチェックボックス

テーブル内のオブジェクトを個別選択できるチェックボックスです。

ページ送りによって他のページに遷移された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除します。

スクリーンショット: 個別選択するチェックボックス(選択状態と未選択状態が混在している)

3. テーブル内の一括操作エリア

テーブル内で選択されたオブジェクトに対して一括操作を配置するエリアです。 SmartHR UIではこのエリアをBulkActionRowと呼んでいます。

原則として、「一括選択するチェックボックス」または「個別選択するチェックボックス」が1つ以上選択されている場合に表示します。

オブジェクト選択状態の表示

テーブル内でオブジェクトの選択状態を示すテキストです。

スクリーンショット: テーブル内の一括操作エリアのオブジェクト選択状態の表示

選択状態のライティングパターン

オブジェクトの選択状態にあわせたライティングパターンは以下のとおりです。

  • 句点を省略しないでください。
  • 件数の単位は、オブジェクトの意味にあわせて「件」「名」「人」などを使用してください。
オブジェクトの選択状態テキストに表示する文言
未選択{オブジェクト名}が選択されていません。
複数選択されている{件数}件の{オブジェクト名}が選択されています。
表示されているものすべてが選択されているこのページの{オブジェクト名}{件数}件すべてが選択されています。
テーブルのページ送り上のすべてが選択されている一覧の{オブジェクト名}{件数}件すべてが選択されています。

わくわくチェック

複数のページに分けてオブジェクトを表示する際に、ページの枠を超えてオブジェクトを選択できるUIを「わくわくチェック」と呼んでいます。

具体的な動作については、わくわくチェックの動作を参照してください。

一括操作ボタン

データの削除・一括変更など、選択したオブジェクトを一括で操作するためのボタンです。
BulkActionRow内の要素として配置します。

  • Buttonや、類似する操作をまとめたDropdownButtonを配置できます。
  • ユーザーが迷わないよう、配置するボタンは多くても4つ程度とします。多数の操作ができる場合には、アクションの優先度を検討し、優先度が低いアクションは減らしたり、ドロップダウンボタンとしてまとめて配置するなどを検討しましょう。

スクリーンショット: テーブル内の一括操作エリアの一括操作ボタン

一括操作ボタンの例

ここに配置される典型的な一括操作ボタンの例は以下のとおりです。
以下に限らず、データの追加・一括変更など、扱う機能やユースケースによって配置できます。

操作名ボタンのラベル例役割・動作
オブジェクトへの一括操作一括削除,一括ダウンロードオブジェクトへの一括操作をするためのボタンです。「一括{操作名}」と表記します。
クリックすると、多くの場合、操作実行内容の確認ダイアログを表示します。
オブジェクトに関する通知通知を一括送信,依頼を一括送信オブジェクトに関する通知や依頼を対象者に送信するためのボタンです。「{送信対象名}を一括送信」と表記します。
クリックすると、多くの場合、送信内容の確認ダイアログを表示します。
タスクとしての一括操作一括承認,一括確定,一括取り消し,PDFファイルを一括アップロードオブジェクトに対するタスクを実行するためのボタンです。「一括{操作名}」と表記します。一括操作の選択対象と操作対象が異なる場合、「{操作対象オブジェクト名}を一括{操作名}」とし、選択対象に対する操作対象を明示します。
クリックすると、多くの場合、操作実行内容の確認ダイアログを表示します。
その他の操作その他の操作多数の操作ができる場合、一括操作をまとめて配置するために使用するドロップダウンボタンです。

レイアウト

基本的に余白の取り方に従って配置します。
テーブル内の一括操作エリアの要素間の余白は以下のとおりです。

スクリーンショット: テーブル内の一括操作エリアのレイアウト

わくわくチェックの動作

わくわくチェック の動作パターンは次のとおりです。

  • すべてのオブジェクトを選択
  • すべてのオブジェクトを選択解除

すべてのオブジェクトを選択

オブジェクトが1つ以上選択されたときに 一覧のすべてのオブジェクトを選択 というテキストリンクを表示し、ユーザーがテーブルのページ送り上のすべてのオブジェクトを選択できるようにします。

スクリーンショット: テーブル内の一括操作エリアのわくわくチェック

すべてのオブジェクトを選択解除

わくわくチェック のオブジェクト選択中は、ユーザー自身で元の状態に戻せるように 一覧のすべてのオブジェクトを選択 のテキストリンクを 選択解除 に置き換え、(ページ送りも含めた)すべてのオブジェクトの選択状態を解除できるようにします。

スクリーンショット: わくわくチェックが適用下はテキストリンクが「選択解除」に変化

また、わくわくチェック のオブジェクト選択中に、ページ送りによって他のページに遷移された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除する動作に統一します。