本文へスキップ

確認ダイアログ・取り消し・二段階

危険な操作を、確認ダイアログ・取り消し可能・二段階のどれで守る?

判断表

判断軸確認ダイアログ
実行前に一度止めて聞く
スナックバー+取り消し
先に実行し、数秒間だけ戻せる
スワイプ削除
動作を重ねて確定(入力確認の代用)
取り返しのつかなさ元に戻せない操作向け(見本は「取り消せません」)戻せる操作向け。戻せないなら使わない戻せない操作でも、勢いでは起きにくい
利用者の手間毎回1クリック増える。慣れると読まずに押す増えない。戻したいときだけ1クリック引く距離が長い分、ひと手間増える
誤操作の起きやすさ既定フォーカスをキャンセルにすれば Enter 連打で消えない誤って消しても3秒は戻せる小さく引いただけでは消えない(閾値130px)
頻度との相性頻繁な操作に付けると形骸化する頻繁な操作(一覧の削除・アーカイブ)に最適一覧の行ごとの操作に向く
支援技術role=alertdialog・aria-modal・フォーカス復帰まで見本にある取り消しボタンに届く時間を確保する必要がある見本は削除ボタンも並置しているので、スワイプ専用ではない

迷ったらこれ

迷ったら「先に実行して取り消せる」を選ぶ。確認は読まれず、取り消しは使われる。ただし取り消しを実装できない操作(送信・決済・アカウント削除)だけ確認ダイアログにし、その中では既定フォーカスをキャンセル側に置く。

名前を打たせて確認する二段階の見本は図鑑に無いので、動作を重ねないと確定しないスワイプ削除で代用した。確認ダイアログは1画面に何度も出さない(慣れが誤操作を生む)。

候補の見本

  • クリック

    確認ダイアログ

    Confirmation Dialog

    「本当に削除しますか?」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。

  • ホバー

    スナックバー+取り消し解説あり

    Snackbar with Undo

    リスト項目を削除すると「削除しました [取り消す]」が下部に出て3秒で自動消滅。取り消しで元に戻る。

  • ドラッグ

    スワイプ削除

    Swipe to Delete

    リスト項目を左にスワイプすると赤い削除ボタンが現れ、さらに引っ張ると削除アニメ。PC(ドラッグ)もスマホ(スワイプ)も対応。元の位置にスナップバックも。