確認ダイアログの代わりに元に戻す: 中断の少ない UI の設計

日常的な確認が機能しなくなる理由

確認ダイアログに関する Nielsen Norman Group のガイダンスは明確です。確認ダイアログは重大な結果を伴うアクションの前に使用し、日常的なアクションには使用しないでください。同じダイアログを何度も見ると、習慣で確認してしまい、ダイアログは本来捕捉するはずだったエラーを防ぐことができなくなります。同じ記事では、警告に頼るのではなく、可能な限り元に戻すことを提案することを推奨しています。

確認または元に戻す: シンプルなルール

1 つ質問してください。これを元に戻すことはできますか? 「はい」の場合は、行動を起こし、元に戻すことを申し出てください。 「いいえ」の場合は、まず確認し、その確認を具体的にします。

• アーカイブ、移動、既読としてマーク、リストから削除: 今すぐ行動し、元に戻すことを提案します。
• メッセージを送信する: 多くの製品では、送信を一時的に遅らせるため、元に戻すことができます。 Gmail を使用すると、元に戻すウィンドウを 5、10、20、または 30 秒から選択できます。
• 完全に削除、支払い、公開: 最初に確認し、項目とその影響に名前を付けます (「142 個のファイルを削除」)。
• さらに良いのは、ゴミ箱または回復期間を使用して削除を元に戻せるようにしてから、「元に戻す」を使用することです。

アンドゥメッセージのデザイン

Material Design は、このコンポーネントをスナックバーと呼びます。これは、応答を必要とするダイアログとは異なり、単一のアクションを含めることができる、中断が最小限に抑えられた短いメッセージです。何が起こったのかを短い言葉で書き、「元に戻す」を 1 つのアクションとして配置し、人々が反応するのに十分な時間画面上に表示し続けます。 2 秒で消えるメッセージ内の重要な取り消しアクションを非表示にしないでください。

アクセシビリティの詳細

トーストが自然に消えると、スクリーン リーダーのユーザーや時間が必要な人はトーストを見逃す可能性があります。礼儀正しいライブ領域を通じてメッセージをアナウンスし、キーボード ユーザーが [元に戻す] ボタンに到達できるようにし、メッセージにホバーまたはフォーカスされている間タイマーを一時停止し、履歴リストやゴミ箱など、アクションを元に戻す別の方法を提供します。

元に戻すためのモーション

画面の端からの短く静かな入り口と明確な出口により、人々は中断されることなくメッセージに気づくことができます。 「元に戻す」を押すと、アイテムが元の位置にアニメーション化され、反転が表示されます。シンプルなフェードではモーションを減らした設定を尊重します。