フォームにデータを正確に入力してもらうためのポイント

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

エラーメッセージを表示する

　どんなに注意書きを表示しても、入力ミスは発生する。しかし、データの送信前に入力ミスを発見し、ユーザーに入力しなおしてもらうことができれば、確実に入力ミスを減らすことができる。

　そこで、入力ミスがあった場合にはエラーメッセージを表示して、修正してもらうように設定する。このとき、エラーメッセージと修正してほしい項目をわかりやすく示すことがポイントだ。

　たとえば、次のサンプルは必須項目が未入力の場合にエラーメッセージを表示するように設定してある。たとえば、「名前」と「メールアドレス」を入力せずに送信ボタンをクリックすると、まずは1つ目の「名前」の項目が未入力であることをエラーメッセージで表示する。同時に「名前」の項目を黄色で示し、入力してほしい場所がすぐにわかるようにしている。

「名前」が未入力であることを示したもの

　次に、ユーザーが「名前」を入力し、「メールアドレス」を入力しない状態で送信ボタンをクリックすると、「メールアドレス」の項目が未入力であることをエラーメッセージで表示する。同時に「メールアドレス」の項目を黄色で目立つように表示する。

「メールアドレス」が未入力であることを示したもの（必須項目を空欄にしたまま「送信」をクリックしてください）

※ブラウザで表示を確認する

　こうして問題のある箇所を順番に修正してもらえば、入力ミスのないデータを送信してもらうことが可能だ。

入力ステップを表示する

　ショッピングサイトのオーダーフォームでは、配送先や支払い方法などの情報を数ページに分けて入力してもらうことが多い。しかし、こうしたフォームでは入力作業の全体像がわかりにくく、ユーザーが途中で入力をやめてしまう傾向がある。

　ユーザーに最後まで入力してもらうためには、入力ステップの情報をわかりやすく示すことが重要だ。特に、次のような情報をユーザーに伝えることがポイントとなる。

• 入力作業が全部で何ステップあるのか
• 各ステップで何をするのか
• 現在は何ステップ目なのか

　たとえば、次のサンプルではフォームの上に入力ステップの情報を表示している。これにより、全部で4ステップあることや、各ステップでの作業内容を伝えることができる。また、現在のページが何ステップ目なのかを伝えるため、現在のステップは青色の枠で囲み、目立つように表示している。

入力ステップを表示したもの

※ブラウザで表示を確認する

　4回にわたってフォームの基本的なデザインについてまとめてきた。デザインのカスタマイズパターンは、フォームの目的や用途に応じてさまざまなかたちが考えられるが、常に「ユーザーにとってわかりやすいか、使いやすいか」ということを意識しながらデザインするように心がけたい。