あやね
一括操作で最初に示すべきなのはボタンの数ではなく、何件が対象になるかです。選択件数、選択範囲、実行後の影響、失敗した項目をそれぞれ明示します。特に難しいのは、表示中の行を選んでからページや絞り込み条件を変えたときです。「選択した5件」と「条件に一致する全件」を同じ意味にしてはいけません。
ここでは、仕入先一覧から古い記録をアーカイブする業務画面を例にします。担当者は絞り込み結果86件のうち14件を選びたいと考えています。表、選択状態、確認画面、処理結果をPixsoで設計するUI画面として並べると、各段階の数字と操作を確認できます。この仕入先管理画面は設計課題であり、Pixso本体の管理機能を示すものではありません。
チェックボックスより先に選択範囲を決める
ページ分割された表の「すべて選択」は不完全な表現です。現在表示している25行なのか、条件に一致する86件なのか、一覧全体なのかを決め、操作の横に書きます。この例では、見出しのチェックボックスは現在のページだけを選択します。86件すべてに拡張する操作は別の明示的なリンクにします。ページ単位のクリックを、追加の確認なく全件操作へ変えてはいけません。
「このページの仕入先25件を選択中」から「この条件に一致する仕入先86件をすべて選択」へ進んだら、状態文も「一致する86件を選択中」に変えます。チェックボックスの見た目だけで範囲を推測させないためです。見出しの中間状態は、定義したグループ内の一部が選択されていることを示します。処理が途中まで終わったという意味ではありません。W3Cのチェックボックスのパターンは、この中間状態とキーボード操作を説明しています。
サーバー側で「条件に一致する全件」を保持する場合、選択はIDの固定リストではなく検索条件かもしれません。操作中に新しい記録が条件に入ったとき、選択時点の集合を使うのか、実行時の結果を使うのかを決めてください。画面にもその扱いを示さないと、一度も表示されなかった記録まで処理されるおそれがあります。
ページや条件が変わっても選択を追跡できるようにする
担当者が1ページ目で6件、2ページ目で8件を選んだら、ツールバーは2ページ目の8件ではなく合計14件を示します。1ページ目に戻ったときも6件のチェックが残ります。ページをまたぐ選択を製品が扱えないなら、移動時に解除されることを事前に伝えます。
絞り込みの変更はさらに注意が必要です。「非アクティブ」から「すべて」へ切り替えた後も14件のIDを保つ方法と、通知して選択を解除する方法があります。どちらもあり得ますが、見えない選択だけを黙って残すのは危険です。「14件を選択中。この条件では6件が非表示」と表示し、非表示の記録を確認または解除できるようにします。
チェックは行番号ではなく、仕入先のIDに結び付けます。並べ替えで7行目の記録が変わっても、選択対象は同じ仕入先です。操作文も単なる「14件をアーカイブ」より「仕入先14件をアーカイブ」の方が明確です。
実行可能な操作と例外を並べて示す
一件以上選択したら一括操作バーを表示します。ただし、表示時に表全体が大きく動き、ポインターが別の行に重なる配置は避けます。「アーカイブ」と「削除」が両方あるなら分けて表示します。前者は一覧での表示を変え、後者はデータを失う可能性があります。「取り除く」だけでは違いが伝わりません。
14件中2件に進行中の注文があり、アーカイブできないとします。操作全体を無効にするか、可能な12件だけ処理するかは製品側の方針ですが、実行前に「12件はアーカイブ可能、2件は進行中の注文があるため対象外」と示します。取り消せない操作では対象と結果を確認画面で繰り返します。元に戻せる操作なら、毎回確認画面を挟むより明確な取り消しが役立つ場合もあります。判断の違いは削除確認のUX設計で詳しく扱っています。
確認画面には具体的な影響を書く
この例の確認文は「仕入先12件をアーカイブします。アクティブ一覧から外れます。進行中の注文がある2件は変更しません」のように書けます。間違いの影響が大きい場合は対象名の一覧も開けるようにします。「本当によろしいですか」だけでは、何を承認するのか判断できません。
ツールバーの「選択14件」と確認画面の「処理12件」が異なる理由を、その場と結果画面の両方で説明します。対象が複数ページに分かれても、確認画面は現在のページだけに依存しません。大量の対象名をすべて並べられない場合は、正確な件数、絞り込み条件、代表例、全件を確認する手段を用意します。処理が非同期なら、完了や失敗をどこで知らせるかも示します。
一部失敗した結果と再試行を分ける
12件を処理し、11件が成功、1件が一時的なエラーで失敗したとします。選択済みのうち2件は最初から対象外です。結果は「11件をアーカイブ、1件は未処理、2件は変更なし」と分けて示します。失敗した記録へのリンクまたは選択状態を残し、再試行はその1件だけに限定します。全件を再実行すると、成功済みの項目に同じ操作を繰り返す危険があります。
結果が確定する前に選択を消さず、処理中は同じ送信を重ねて行わないようにします。完了後は支援技術にも伝わる状態通知を用意します。W3Cの状態メッセージの解説は、成功、進行、エラーを操作の流れを妨げずに知らせる考え方を示しています。一瞬で消えるトーストだけに失敗の詳細を載せないでください。
担当者の操作を一続きの画面で試す
Pixsoでは、1ページ目で6件を選んだ表、2ページ目で8件を追加した表、12件が実行可能で2件が対象外の確認画面、11件成功と1件失敗の結果画面を作ります。名前と件数を全画面で一致させます。これは提案する業務画面を議論するためのデザインファイルであり、サーバー側の資格判定は別途実装が必要です。
担当者に「注文が残る仕入先を除き、非アクティブの仕入先をアーカイブしてください」とだけ伝えて試します。ページを移動した後の選択範囲、対象外の2件、失敗した1件の行き先を自力で説明できるかを見ます。最初のページだけ使える設計では、実務の一括操作には足りません。
よい一括操作は、記録、選択、結果のつながりを最後まで保ちます。実行前には対象集合を明示し、実行後にはその集合の各項目がどうなったかを説明します。
