みなさんはフォームを入力する際に、項目の入力形式などの制約・注意点などを補足してくれる文言を目にしたことがあるのではないでしょうか。
ori_05
本日はその補足文についての改善ポイントをご紹介しようと思います。

注意書きでフォームを使いやすくするコツ 目次

  1. 各項目のそばに記載しよう
  2. 親切な注意書きを
  3. 書き過ぎない
  4. デザインも工夫しよう
  5. カーソルをあてたときに表示しよう

1. 各項目のそばに記載しよう

項目に対する補足文は、該当の項目のそばに配置しましょう。
あたりまえでは、と感じる方もいるかもしれませんが、意外とフォームの上部に補足をまとめて表示してしまっているケースが見られます。

島津製作所様(http://www.shimadzu.co.jp/)の会員制サイト登録フォーム
島津製作所様(http://www.shimadzu.co.jp/)の会員制サイト登録フォーム

当然ながら補足をフォームの上部に記載してしまうと、入力を進めていくうちに見えなくなってしまいます。そうしたことから結局注意点を守れずにエラーとなってしまうことも多いでしょう。
項目の各場所に補足を記載することで、入力の途中にユーザーが確認できるようにし、離脱の元凶であるエラーを未然に防ぎたいですね。

2. 親切な注意書きを

補足の内容についても考えてみましょう。
よくある補足内容としては、冒頭でも取り上げた入力形式に関する内容のほか、パスワードの再入力の旨やメールアドレスの受信設定に関するもの、郵便番号の自動入力など操作に関するものが定番かと思います。
そんな定番の補足のほかにも、書いてあることでユーザーにとってプラスに働く内容がある場合は、ぜひ補足に採り入れましょう。
サービスのホスピタリティアップにもつながります。

とくにミス無く入れてほしいところを補足

ジョブセンス(http://j-sen.jp)のアルバイト応募画面。
ジョブセンス(http://j-sen.jp)のアルバイト応募画面。

この場合、連絡先に関してスペルミスなどがあると、応募先の企業とやりとりできなくなってしまうリスクがあります。ユーザーにとってはマイナスですね。
特に注意をして入力しなくてはならない部分を強調することで、ユーザーも気をつけて入力できます。

何に使う情報か

カゴメ株式会社様(www.kagome.co.jp/)オンラインショップの登録フォーム。
カゴメ株式会社様(www.kagome.co.jp/)オンラインショップの登録フォーム。

一見、オンラインショップの会員登録に生年月日という情報は必要なさそうです。
必要のない情報まで取得されることや、余計な項目が増えることをユーザーは嫌がりますが、このように情報が何に使われるかが補足されていれば、「なるほど」と感じるのではないでしょうか。
納得感をもって入力できたほうが、ユーザーにとって余計なストレスを生むことがありません。

3. 書き過ぎない

いっぽうで、良かれと思って挿入した補足文が入力の妨げにならないかは注意が必要です。
当然のことながら、補足をたくさん書きこめばフォームは文字だらけに。人によっては、煩雑な印象を与えてしまうかもしれません。

ダイエーネットスーパー(https://netsuper.daiei.co.jp/)の登録フォーム
ダイエーネットスーパー(https://netsuper.daiei.co.jp/)の登録フォーム

いざ入力し始めると親切だと感じるのですが、ぱっと見の第一印象では「文字が多いな…」と感じてしまうかもしれません。
要するに、さじ加減に注意。とはいえ、明確に「○文字以下!」のように目安を設けるのは難しい問題です。
文字の増えすぎを防ぐには時には第三者に確認してもらい、印象が悪くなっていないか確かめると良いでしょう。

4. デザインも工夫しよう

上記の補足の多さ問題は、ある程度はデザイン上の工夫で回避可能だったりします。

ハウス食品様(housefoods.jp/)通販登録フォーム
ハウス食品様(housefoods.jp/)通販登録フォーム

例えば、補足の文字のみサイズをひとまわり小さめにしたり、色を薄くすれば、多少の文字量も気になりません。
とはいえ、完全に目立たなくなって誰も見てくれないようでは困りますので、補足の中で特に重要な部分にだけメリハリをもたせて目立たせると良いでしょう。

5. カーソルをあてたときに表示しよう

リアルタイムアラート
リアルタイムアラート

補足の一部は、該当の項目にカーソルをあてたときに表示するという方法もあります。
エフトラEFOの機能でいうと、「入力形式事前指示」と読んでいる機能です。
いざその項目を入力する時にならないと注意点がわからない、というハンディはあるものの、
その場で登場するふきだし、結構インパクトがあるためユーザーの注意を惹くことができ、その結果エラー率の低下にもつながることが期待できます。
あまり長い補足には向きませんが、入力形式の指定などにはぜひ取り入れたい機能です。
 

最後に

いかがだったでしょうか。本日はフォームの補足文についての以下のEFOのポイントをお伝えしました。

  1. 各項目のそばに記載しよう
  2. 親切な注意書きを
  3. 書き過ぎない
  4. デザインも工夫しよう
  5. カーソルをあてたときに表示しよう

ぜひ簡潔ながらも親切な補足を心がけ、フォームをよりいっそう使いやすくしてくださいね。