トースト vs アラート
短い答え
トーストは、作業を止めない短いメッセージです。アラートは、絶対に見逃してはいけないので、そのまま残ったり、作業を中断したりします。
完了したアクションの確認にはトーストを使います。失敗や危険、または今すぐ注意が必要な選択にはアラートを使います。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Toast
↗ トースト通知
トーストは短い状態のメッセージです。ページをブロックせず、たいていは時間が経てば自動的に消えます。
自動保存の後、”変更が保存されました”が静かに隅に表示され、一度だけ通知されます。
- 以下の場合に使用します
- 回答を必要としない低リスクな確認にはこれを使用してください。
- 以下の場合は使用しないでください
- 重要なエラーや人々が読む・従う必要がある指示には絶対に使用しないでください。
- コードで使用する名前
role="status"
macOS Alert
↗ macOS Alert
macOS Alert は、大事な選択、失敗、状態を知らせるシステムのダイアログだよ。必ず気づいて、答えないといけないよ。
未保存のドキュメントを閉じると、保存、キャンセル、または変更を破棄するかどうかが尋ねられます。最も安全なデフォルトは明確です。
- 以下の場合に使用します
- 現在の作業を安全に進める前に重要な条件が回答または選択を必要とする場合にのみ使用してください。
- 以下の場合は使用しないでください
- 日常的な成功メッセージ、回復可能なインライン検証、取り消し可能な操作の確認は避ける。繰り返されるアラートは、読まずに無視する癖を人々に教える。
- コードで使用する名前
AppKit NSAlert / SwiftUI alert
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| トースト通知Toast | 回答を必要としない低リスクな確認にはこれを使用してください。 | 重要なエラーや人々が読む・従う必要がある指示には絶対に使用しないでください。 | role="status" |
| macOS AlertmacOS Alert | 現在の作業を安全に進める前に重要な条件が回答または選択を必要とする場合にのみ使用してください。 | 日常的な成功メッセージ、回復可能なインライン検証、取り消し可能な操作の確認は避ける。繰り返されるアラートは、読まずに無視する癖を人々に教える。 | AppKit NSAlert / SwiftUI alert |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをトースト通知 (Toast)、macOS Alert (macOS Alert)から選んでください。このルールを使用してください: トーストは、作業を止めない短いメッセージです。アラートは、絶対に見逃してはいけないので、そのまま残ったり、作業を中断したりします。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。