確認
Confirmation

ユーザーに操作を引き続いて行うかの判断を尋ね、間違いを防ぐ方法

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

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

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

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

ライターの2段階操作による「確認」の図

ライターの2段階操作による「確認」の図

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

「コンピューターのゴミ箱を空にしようとする操作」で表示されるモーダルダイアログ。

「コンピューターのゴミ箱を空にしようとする操作」で表示されるモーダルダイアログ
引用元:Apple

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

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

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

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

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

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

Amazonのショッピングにおける定期的な行動の図

Amazonのショッピングにおける定期的な行動の図

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

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

Amazonの電話番号を削除しようとするとでる確認モーダルダイアログ

Amazonの電話番号を削除しようとするとでる確認モーダルダイアログ
引用元:Amazon

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

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

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

いくつか例を説明する。

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

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

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

Nintendo Switch のゲームのセーブデータを削除するときに出る確認モーダルダイアログ。

Nintendo Switch のゲームのセーブデータを削除するときに出る確認モーダルダイアログ
引用元:Nintendo

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

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

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

Freeeの口座連携する際に入力するAmazonの画像認証画面

Freeeの口座連携する際に入力するAmazonの画像認証画面
引用元:クラウド会計ソフトFreee

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

Gmail Address Checkerのメール誤送信を防ぐための確認モーダルダイアログ

Gmail Address Checkerのメール誤送信を防ぐための確認モーダルダイアログ
引用元:誤送信防止Chrome拡張機能Gmail Address Checker

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

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

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

Google Gmail 送信後の画。送信されると画面左下に取り消しボタンが表示される。

Google Gmail 送信後の画。
送信されると画面左下に取り消しボタンが表示される
引用元:Google

関連用語

フリクション

参考文献