下記の様なモーダルを作成する際のポイントを記載します。
文言
メッセージは明確なものにする
悪い例
- 警告！
- 本当に良いですか？
良い例
- ストレージを削除しますか？
- アカウントを削除しますか？
選択肢はメッセージに対して、短く論理的かつ適切なものとする
悪い例
| 表記 | 意味 | |
|---|---|---|
| メッセージ | 処理をキャンセルしますか？ | 処理を中断しても良いか |
| 同意 | OK | 処理を中断する |
| 拒否 | キャンセル | 処理を続行する |
- ユーザーが処理をキャンセルしたい場合、直観的に同じ表記の「キャンセル」を選択したくなる
| 表記 | 意味 | |
|---|---|---|
| メッセージ | 処理をキャンセルしますか？ | 処理を中断しても良いか |
| 同意 | はい | 処理を中断する |
| 拒否 | いいえ | 処理を続行する |
- 選択後、何が起きるのか明示されていない
良い例
| 表記 | 意味 | |
|---|---|---|
| メッセージ | 処理を中断しますか？ | 処理を中断しても良いか |
| 同意 | 中断 | 処理を中断する |
| 拒否 | キャンセル | 処理を続行する |
- メッセージと同意の表記を揃える
デザイン
破壊的アクションを考慮する
- 「削除」「中断」等の破壊的アクションはユーザーの注意を引き付ける色を使用する