ホームページは何のためにあるのでしょう?
お問い合わせしてもらったり、資料請求してもらったり、注文したもらったりするためにあるのですよね。
そのお問い合わせや資料請求や注文で使うのがフォームです。フォームを使いやすくするとお問い合わせの数が倍増することもあるそうですから、フォームがホームページの目的を達成するための重要なパーツであることが分かります。
数年前まではエントリーフォームオプティマイゼーション(入力フォーム最適化)なんて言って、何十万円もかけてフォームをブラッシュアップするようなこともしていました。
今ではフォーム最適化の知識も一般化していて、あらかじめ最適化されたフォームを低価格(または無料)で使うこともできるようになっています。
ただ、フォーム機能を提供するソフトやサービスはたくさんありますし、特に昔からあるものは「フォームが作れればいい」という考え方で作られていたりしますので、良いものを選ぶことが重要になってくるわけです。
そういうわけで、この記事では「お問い合わせを増やす」という観点から、良いフォームの選び方を紹介しようと思います。
「良いフォームの選び方」なんて目利きみたいで難しそうに感じてしまうかもしれませんが、そんなことはありません。
簡単なチェックをしていくだけで、誰にでも判断できますので安心してください。
それではさっそく、チェック項目を見ていきましょう。
ぱっと見てすぐ分かるか
項目のまとまり具合
フォームを見て「なんかゴチャゴチャしてるな」とか「なんか見づらいな」と思ったら、項目のまとまり具合が良くないのかもしれません。
フォームの入力項目は、名称、入力欄、注意書き、エラーメッセージで構成されますが、それが一つの「かたまり」としてパッと見て判るようでないと、お客様は理解に手間取ってしまいます。
デザインを気にしていないフォームにありがちです。
チェックボックスとラジオボタンの違い
チェックボックスは、はい・いいえで回答できる質問を投げかけて、どちらかを回答してもらうものです(「はい」の場合にチェックを入れる)。
一方ラジオボタンは、複数の回答を提示して、どれか1つを選んでもらうものです。
両者はなんとなく似ていますが、「お客様の入力」という観点ではまったく違います。
何が違うかというと、チェックボックスに入力しないことは「いいえ」と回答したことになるのに対し、ラジオボタンに入力しないことは回答していないことになることです。
このように両者はまったく違うものなのですが、なぜか同じ見た目にしているフォームがあります。
お客様からすると、素通りしていいのか、入力しなければいけないのかが判別できませんので、そのようなフォームは使いにくいのです。
任意項目と必須項目
その項目が入力必須なのか入力自由(任意)なのか、ひと目で判るかどうか。
大抵は、入力項目の名前の後に「必須」などと表示されています。
昔は「*」や「※」で必須であることを示すこともあったのですが、その慣習を知らない人も多いのでそれは微妙ですね。
プレースホルダーがプレースホルダーと分かるか
プレースホルダーというのは、まだ何も入力していない時に入力例として表示される文字です。
プレースホルダー自体は親切で良いのですが、入力した文字とプレースホルダーが判別しづらい場合があります。
入力項目の中には、あらかじめ文字が入っていたり、ブラウザの自動補完で勝手に入力される項目もありますので、その項目が入力済みなのかどうかはパッと見で判断できないといけません。
入力の邪魔をしないか
チェックボックスやラジオボタンが押しづらい
昔のフォームでよくあったのですが、アイコンのところしか押せないチェックボックスやラジオボタンがあったりします。
スマホでは押す難易度が上がります。使いにくいので良くないです。
エラーで隠れて見えない
最近ではフォームを入力している最中にエラーが表示されることも多いのですが、突然エラーが表示されて、そのエラーメッセージで他の項目が見えなくなってしまうことがあります。
アニメーションエフェクトがテンポを乱す
デザインに力を入れているフォームで見かけます。
入力途中にアニメーションエフェクトが入って、それはいいのですが、その動きがもっさりしていて入力のペースを乱してしまう場合があります。
不必要に動く
こちらもデザインに力を入れているフォームで見かけます。クリックしようとしたら大きさが変わったり、何かの拍子に移動したり。
フォームが動くこと自体は決して悪いことではなくて、むしろ良い側面も多いです。
ですが、それが原因で気が散ったり操作しにくいようでは本末転倒です。
部品が小さ過ぎないか
古いフォームにありがちなのですが、部品も文字もあらゆるものが小さいフォームがあります。
読みづらいし操作しづらいしでいいことありません。
特にスマホは指で操作するので、小さな部品を押すのにとても苦労することがあります。
スマホで操作しにくいページは、SEOに悪影響を及ぼす場合もありますので要注意です。
入力補完が充実しているか
典型的なのは、郵便番号を入力したら住所が途中まで自動補完される仕組みです。
むしろこれくらいしか思いつくものが無かったりしますが、住所の入力補完が付いてないのはマイナス要素です。
それ以外でも、入力を補助する仕組みはあればあるほど良いです。
入力モードの自動切り替え。特にスマホで重要
スマホで電話番号を入力するときは数字のソフトキーボードが出てくると嬉しいですよね。
他にも、メールアドレスを入力するときは英語のキーボード、名前を入力するときは日本語のキーボード、などなど。
スマホでは、入力内容に応じてキーボードを切り替えてあげるととても入力しやすくなります。これはフォームの仕事です。
ブラウザの入力補完
ブラウザの入力補完がうまい具合に働いてくれると入力の手間が大幅に省けて良いです。
入力補完が効きやすいかどうかは入力項目の内部的な名称で決まるのですが、この「入力項目の内部的な名称」を決めているのは通常フォーム作成ソフトなのです。
ですので、フォーム作成ソフトによってブラウザの入力補完が効きやすいかどうかが決まる場合が多いです。
後戻りが発生しないか
インスタントバリデーション
バリデーションというのは、項目に入力された文字が適切かどうかを判断する仕組みです。
たとえば、郵便番号の入力欄で、入力された文字が7ケタの数字でなかったらエラーを表示するような仕組みです。
バリデーションによる入力内容のチェックは、タイミングが早ければ早いほど良いです。
「フォームを入力して送信ボタンを押して次の画面が表示されたらバリデーションエラーだった」よりは「次の入力項目に進もうとしたらバリデーションエラーが出た」の方が、後戻りが小さいので良いです。
このように、即時でバリデーション処理を行うことをインスタントバリデーションなどと呼びます。
今どきはインスタントバリデーションは普通ですので、この機能が付いているフォーム作成ソフトを選びましょう。
バリデーションが厳し過ぎないか
前述のバリデーションですが、すごく厳格な場合があります。
たとえば、郵便番号に「-」を付けないとダメとか、社名は全角(日本語)でとか、住所は50文字以内とか。
厳しすぎるバリデーションはお客様の負担になりますので良くありません。
フォームの応答に気付きやすいか
エラーがある場合
送信ボタンを押したのに反応が無い…
そんな場合、画面をスクロールして戻ってみると、画面の外にあった入力項目でバリデーションエラーが発生していることがあります。
エラーがある場合は、お客様がそのエラーに気付けるような仕組みになっていることが重要です。
これを確認するには、入力漏れや入力間違いがある状態でわざとフォームを送信してみると良いです。
気の利いたフォームであれば、エラーが起こっている箇所までスクロールしてくれます。
送信した後
当然ではありますが、フォームを送信したあと、送信が終わったこと、成功したか失敗したかが必ず分かることは大事です。ページが変わったりダイアログが出るのであれば確実ですね。
ですが、ページの「地」の部分に送信結果が表示される場合は、目立たなかったりブラウザの表示範囲の外で見えなかったりすることがあるので注意してください。
チェックシート
以上、良いフォームを選ぶために見る項目を挙げました。
チェックシートにまとめましたので、ぜひご活用ください。
- 項目のまとまり具合が適切である
- チェックボックスとラジオボタンが見分けられる
- 任意項目と必須項目が見分けられる
- 入力した文字とプレースホルダーが見分けられる
- チェックボックスやラジオボタンが押しやすい
- エラーで他のものが隠れない
- アニメーションエフェクトがテンポを乱さない
- 不必要に動いて気が散ったりしない
- 部品が小さすぎない
- 住所の入力補完機能がある
- 入力モードが自動で切り替わる
- ブラウザの入力補完が効く
- インスタントバリデーション機能がある
- バリデーションが厳し過ぎない
- エラーに気付けるような配慮がある
- フォーム送信が終わったことや送信結果が分かりやすい