Undo／RedoのUX：複雑な編集から安全に戻す

UndoとRedoは、創作作業を安全に戻すための操作です。何が戻るのかを示し、ユーザーの位置と選択を守り、共同編集でも変更の境界を説明します。履歴を先にモデル化してから、複合操作や同時編集を試します。Pixsoの共同デザイン環境で前後の状態を並べると、抽象的なルールを具体的に検討できます。

予測できる変更履歴を作る

ユーザーが知りたいのは、次のUndoで何が消えるかです。低レベルのプロパティ変更ではなく、意図した操作単位でまとめます。アクション名と対象を表示し、履歴の終端ではRedoを無効にします。Undo後に新しい編集をするときは、分岐がどう扱われるかを伝えます。

破壊的な編集から復帰させる

削除や一括置換には、操作の近くに戻す手段を置きます。小さな変更はToastで戻し、広い範囲や戻せない操作だけ確認ダイアログを使います。復元後もビューポートとフォーカスをできるだけ維持し、変化を短くハイライトします。

レビュー会で復帰経路を確認する

チームレビューでは、レビュアーがカードを一括削除し、デザイナーがUndoで復元します。復元後に選択、コメント、スクロール位置がどこまで保たれるかを全員で確認し、復元できない場合は実行前に表示する説明へ戻します。これにより、実装後に「戻ったが別の作業まで消えた」という報告を減らせます。

分岐、ショートカット、共同編集を扱う

ショートカットは表示された操作と一致させ、OSの慣習に合わせます。共同ファイルでは自分のUndoと他人の変更を分けます。単一編集、複合編集、一括編集、オフライン復帰、履歴が空の状態を順にテストします。

履歴状態のテスト表

プロトタイプで復帰経路を確認する

変更、Undo、復元確認、Redoというシナリオをプロトタイプで歩きます。Pixsoでは履歴の状態を画面の隣に置き、期待する復帰結果をコメントに残せます。

Undo/Redoの境界テスト

まず一つのフレームを変更してUndo、Redoを行います。次にページを切り替えてからUndoし、対象が別ページへ移らないことを確認します。最後にUndo後に新しい編集を加え、Redoが無効になる、または分岐を説明する状態を記録します。これらの結果をコメントに残すと、開発担当はどの履歴を一つの操作として実装するか判断できます。

成功の基準は、対象の変更を特定して戻し、別の作業を失わずに続けられることです。