ECサイトのフォームは入力項目が多く、どうしてもフォームが長くなってしまいがちで悩んでいるウェブ担当の方は多いのではないでしょうか。
チャリティ支援を行うECサイト「sevenly」のディレクターJustin Palmer氏が提唱する「ウェブフォーム最適化のための25のTips」という記事を見つけましたのでこちらを今回から3回に分けて、ご紹介したいと思いますので参考にしていただければと思います。

  1. 画像認証(キャプチャ)は使用しない
  2. 不要な項目は削除する
  3. シンプルを心掛ける
  4. 消去ボタンをなくす
  5. キャンセルボタンをなくす
  6. 必須項目には必須マークをつける
  7. 項目の説明を表示する
  8. 入力例を記載する

それぞれ、順番に見ていきましょう。

1.画像認証(キャプチャ)は使用しない

画像認証(キャプチャ)とはフォームを送信する際、画像を見て、埋め込まれた文字や数字を入力するもので、みなさんもたびたび見かけるのではないかと思います。

「SI CAPTCHA Anti-Spam」を用いた画像認証(キャプチャ)例。
「SI CAPTCHA Anti-Spam」を用いた画像認証(キャプチャ)例。

こちらはもちろんスパムなどを防ぐために有効な手段ですが、文字や数字を読み取りにくく、入力に少し手間がかかってしまいます
そのため、思い切って画像認証(キャプチャ)の使用をやめてはどうかと筆者は提案しています。
たしかに小さなスパムの一つや二つを防ぐために、多くのコンバージョンを失っているのでしたらもったいない気がしますね。
もちろん検証などは必要ですが、試してみる価値はありそうです。

2.不要な項目は削除する

こちらはこれまで当ブログで何度のお伝えしている、フォーム最適化の基本中の基本ですね。
フォームに入力する情報は、極めてプライバシー性の高いものが多いと思います。
例えば、年齢や性別などの情報は本当に必要な情報なのでしょうか。
プライバシーについてあまり気にしないユーザーであったとしても、根掘り葉掘り質問をされると嫌になってしまうので入力項目については慎重に検討するべき、とのことです。

3.シンプルを心掛ける

CSSを使えばテキストボックスをかわいらしく装飾することはできますが、そのようなことをする必要はないと筆者は言っています。
デザイン面でユーザーを困惑させることは避けるためにも、フォームフィールドはシンプルにしておくのがベターかもしれません。

シンプルの代表例、googleのトップページの検索窓テキストボックス。
シンプルの代表例、googleのトップページの検索窓テキストボックス。

4.消去(クリア)ボタンをなくす

送信ボタンの隣に消去(クリア)ボタンを設置しているページがたまに見うけれらますね。
せっかくフォーム入力を完了させたのに、誤って消去ボタンを押して入力情報を全て失ってしまうことが多々あります。
消去ボタンがなくなったところでそれほどユーザーに不便な思いをさせることはないので、なくしてしまって良いかと思います。

5.キャンセルボタンをなくす

精算フォームのように、いくつかのページにわかれているフォームがあると思います。
このようなページによくある「キャンセルボタン」。キャンセルボタンはセールスマンがお客様に対して「本当にこの商品を買うのですか?」というようなものなので、なくすべきであると作者は言っています。

6.必須項目には必須マークをつける

入力が必須な項目にはアスタリスク等のマークをつけて、ユーザーにわかりやすくするべきとのことです。
入力形式を連想させるもの
アスタリスクも良いですが、個人的にはきちんと「必須」と記載するとよりわかりやすくなるのではないかと思います。

7.項目の説明を表示

要求されている情報の意味がわからない場合があるかと思います。
そういった際、「?」マーク等のアイコンにマウスオーバーするとその項目の説明が表示されるなどの機能があるとユーザーは迷うことがありませんね。

エフトラEFOの管理画面
エフトラEFOの管理画面では取り入れている手法です

例えば、クレジットカードを登録する際、セキュリティーコードの入力を求めることがあると思います。多くのユーザーはセキュリティーコードが何を指しているのかわからなかったり、迷ったりするでしょう。そういった際、ポップアップなどで説明が表示されればとても親切ですね。

8.入力例を記載する

データベースの関係でユーザーの入力形式が制限される場合は、どのように入力すればよいか記載すべきと筆者は言っています。
半角・全角の指定、電話番号のハイフンの要・不要などがあげられます。
また、できるだけ制限を少なくできると良いですね。

まとめ

いかがだったでしょうか。
個人的には”キャンセルボタンはセールスマンがお客様に対して「本当にこの商品を買うのですか?」というようなもの”というのが目からうろこでした。
まだまだご紹介しきれていないTipsがありますので、次回も楽しみにしていただければと思います。
※続きはこちら:【海外EFO】ウェブフォーム最適化のための25のTips(2/3)

参考記事

25 Web Form Optimization Tips