フォームの送信ミスはできるだけ防ぎたいですよね。
以前の記事ミスを防ぐためのEFOの役割の大きさ～「入力ミスで4万円失った話」より～などで触れてきた内容でもありますが、本日は改めて、入力ミスを防ぐためにフォーム上でできる工夫についてまとめてみたいと思います。
防げるミスと防げないミスがある
入力形式や必須判定など、フォーム側のエラー判定やバリデート機能でで回避できるミスは今回は対象とせず、
例えば名前の変換間違い、アドレスのスペルミスなどの、機械的にミスを判定できない内容に対する対策として主に考えていきます。
目次
- 王道！注意書きの記述
- 入力画面で
- 確認画面で
- 発展：デメリットをアピールする
- デザインで強調する
- 項目そのものを強調
- 注意書きも強調
- 確認画面でも強調する
- 画面全体のメリハリ
- 確認用のUIを用意する
- モーダルウィンドウ
- ダイアログボックス
- 確認チェックボックス
王道！注意書きの記述
まずは、シンプルにユーザーに注意を促すテキスト等による注意書きの挿入という方法が考えられるかと思います。
入力画面で
王道な方法ですがｍ入力画面内に注意書きを表示します。
入力形式の注意書きを項目横に配置した例。
ユーザーが入力中に確認できるよう、入力欄の上下左右などに配置するのが良いでしょう。
確認画面で
入力画面だけでなく、確認画面での注意喚起も効果的です。
ジョブセンス（http://j-sen.jp/）の、確認画面の注意書きの例。とくに間違えると困る電話番号とメールアドレス部分にあらためて注意喚起している
入力画面では気づかなかったミスに、確認画面で気がつくことはよくありますので、ここで特にミスを防ぎたい項目について注意書きを加えておくと、よりユーザーがミスに気づいてくれる確率が上がるでしょう。
発展：デメリットをアピールする
同じテキストによる注意喚起だとしても、メッセージの伝え方を変えるとさらに効果的です。
単に「ミスしないよう気をつけて下さい」というよりは、ミスすることで生じるユーザー側のデメリットについても言及されていると、危機感がアップし、より注意深く入力してもらえるでしょう。
さきほども紹介したジョブセンスの例。メールアドレスを間違えると祝い金の受け取りができないなどのユーザーのデメリットを表記して注意喚起している。
デザインで強調する
デザイン上の工夫によってもユーザーへ注意喚起をおこなうことができます。
項目そのものを強調
注意が必要な入力項目を目立たせましょう。
文字色、背景色、枠線などの色を変化させたり、サイズを大きくするなどの方法がありますね。
JTB様のフォーム。入力例を青文字しているためひときわ目立つ
上記の例では、入力例（プレースホルダー）の文字色を変えて強調しているようです。
注意書きも強調
テキストの注意書きとデザインの強調を併用すると、より効果的ですね。
上記のJTB様の例でも、注意書のテキストは注意を促す赤色でデザインされていますね。
確認画面でも強調する
もちろん確認画面の場においてもデザインによる強調を忘れないようにしたいですね。
とくに文字の色、太字、サイズを変化させると良いようです。
HIS様確認画面。黄色、赤色の目立つ配色や文字の大きさで該当箇所を強調。
画面全体のメリハリ
該当箇所を色使いで目立たせることは確かに注意喚起において効果的ですが、強調する箇所が多すぎると埋没してしまうので注意しましょう。
具体的には、真っ赤などの目立つ色数はわずかにとどめ、本当に強調したい箇所のみに使用し、画面にメリハリをもたせましょう。
また、ページ内の余計な情報を排除することも、情報が埋没しないためには重要なアプローチです。引き算のデザインも心得ておきましょう。
確認用のUIを用意する
さらにそれでも心許ない場合は、確認用のUIを設けると良いでしょう。
具体的には下記のようなUIが考えられるかと思います。
モーダルウィンドウ
次に進もうとすると、モーダルウィンドウが現れて該当箇所の再確認を実施するような形です。
ローマ字の確認ダイアログボックス
この形をとることで、嫌でもユーザーは確認をしてくれるのではないでしょうか。
ダイアログボックス
同様に、ダイアログボックスの形で注意喚起する形も考えられます。
離脱ブロック
EFOの定番機能のひとつである離脱ブロックもこの一種ですね。
確認チェックボックス
モーダルウィンドウやダイアログボックスでの注意喚起に、もちろん大きな効果はあるのですが、ユーザーがこの手のUIに慣れきっているために、特に内容を確認せずに、反射的に「次へ」「はい」などを押下してしまう可能性は大いに考えられます。これでは、意味が無いですよね。
そこで有効なのが、確認のためにチェックボックス等の入力を必須にすること。
例：ローマ字の確認ダイアログ。チェックを入れないと次に進めない
こうすることで、反射的に進もうとしたユーザーの動きを一瞬、止めることができるでしょう。
最後に
いかがだったでしょうか。
本日はフォームの送信ミスを防ぐために、フォーム側のUIでできる工夫のポイントを紹介しました。
入力ミスはフォームの運営者、ユーザー側のどちらにも損失を与えてしまいます。
どうしても人間はミスをしてしまうものではありますが、その数は最低限度に留められるよう、フォーム上で精一杯対策しておきたいですね。
