確認 Confirmation

ユーザーに損失をもたらす可能性がある行動に対して、損失が発生しないよう未然に防ぐ方法である。

従来、プロダクトデザインの分野で、主に誤操作により体を傷つけないように取り入れられていた。情報社会となった今日では、重要な情報を誤って失わないようにするためにUIデザインでも取り入れられている。

身近に取り入れられている
「確認」

「確認」を取り入れたデザインは、生活の中に溶け込んでいる。
プロダクトデザインで例えると、使い捨ての100円ライターは、縦と横の2段階操作で、利用者が誤って火を点けられないように作られている。

UIデザインで「確認」を行うときによく用いられるのがモーダルダイアログである。
Apple製コンピューターでは、ゴミ箱を空にするとき、アプリケーションウィンドウに表示されるボタンを操作する。モーダルダイアログで「ゴミ箱にある項目を完全に削除してよろしいですか？」というテキストとともに「キャンセル」「ゴミ箱を空にする」のボタンが表示される。

定期的な行動に対して
「確認」を使用しない

「確認」は、重要な結果をもたらさない定期的な行動には多用しない。

繰り返し「確認」を問われ、その度に問題が発生がしないと認識したら、人は安心を覚え、次第に注意を払わなくなる。そして、ヒューマンエラーを招く。

人が「確認」に注意を払らわなくなると、「確認」は価値を失ってしまう。

Amazonを例に「確認」のデザインについて見てみよう。

ショッピングにおける定期的な行動は、以下のステップに分けられる。

買い物をする上図の過程では、「この商品を購入しますか？」という確認モーダルダイアログは、1度も表示されない。

しかし、セキュリティ情報を変更する過程で電話番号を削除しようとすると、「確認」のモーダルが表示される。Amazonでは、サービスログインやセキュリティの2段階認証の情報として電話番号が利用されている。それを削除してしまうと、ユーザーがログインや2段階認証が行えなくなり、ユーザーにとって不都合が起こるためである。

ユーザーに「確認」させる
モーダルダイアログの設計

WEBデザインやアプリケーションデザインで使う「確認」の一般的な表現は、モーダルダイアログである。作るときは、次のことを配慮する。

1. 「確認」に使用するテキストは、ユーザーがしようとしている行動が、どういう結果を生むかを端的に明示する。
2. 文章の表現は、受動態で表現せず、能動態で、やさしくわかりやすい言葉を使う。
3. ユーザーが回答する選択肢（ボタンなど）の内容と数は、シンプルにする。
4. 誤操作によるエラーを防ぐために、「行動の許可」に値する選択肢はデフォルト選択にはしない。
5. 重要性（危険性）の高い結果をもたらすときは、「はい」「いいえ」の2択だけでなく文字を入力させたり、チェックボックスをつけさせたり、普段は行わない作業をさせ注意を促す。
6. ユーザーのスキル、様々な好みに合わせて、モーダルダイアログを設定変更できるようにする。

いくつか例を説明する。

誤操作を回避するデザイン

4に紹介した、誤操作によるエラーを防ぐために、「行動の許可」に値する選択肢はデフォルト選択にはしない例を紹介する。

以下は、Nintendo Switch のゲームのセーブデータを消去するときに出る確認モーダルダイアログである。「やめる（キャンセル）」をデフォルトに選択されている状態となっている。データを消去するにはわざわざ選択を変えなければならず、ユーザーにその意思がなければ消去出来ない。これらを設計して、ユーザーに「確認」をさせている。

普段行わない作業をさせ
注意を促す「確認」

Amazonでは、カードや口座情報などのセキュリティが高い情報を扱っている。本当のユーザーが画面を開いているのか、知らないうちに誰かに操作されていないかをログインと同じ行動をとってもらいユーザーに「確認」をしている。その確認方法の1つに、画像認証画面の画像に載っている文字を入力させる。

このように、重要性（危険性）の高い情報を扱うときは、普段行わない作業をさせ注意を促す。

Chromeの拡張機能のGmail Address Checkerでは、メール誤送信を防ぐために、右側にあるチェックボックスに印をつけて確認しないと送信ができないようなっている。

誤ったあとでも
取り消すことができる設計

いくら「確認」モーダルダイアログをサービスに設けても、ヒューマンエラーは起こってしまう。そうしたときを想定し、ヒューマンエラーの行動を取り消す設計を設けると良いだろう。

GoogleのGmailでは、送信後、ユーザーが任意に設定した秒数まで「送信」という行動を取り消すことができる。

関連用語

フリクション

参考文献

• Confirmation Dialogs Can Prevent User Errors – If Not Overused
• Transactional Email and Confirmation Messages
• Confirmations – Windows applications | Microsoft Docs
• Usability Heuristic 5: Error Prevention (Video)
• Design Rule Index 要点で学ぶ、デザインの法則150