今回は、チャリティ支援を行うECサイト「sevenly」のディレクターJustin Palmer氏が提唱する「ウェブフォーム最適化のための25のTips」という海外の記事を参考に、ECサイトなど、項目数が多くなりがちなフォームの改善案についてのご紹介第二弾をお送りしたいと思います。(第一弾はこちら

  1. 世界中の人が利用することを念頭におく
  2. 前のページ、後ろのページへ移動しやすくする
  3. タブキーでの移動先に注意
  4. サーバーサイドでのバリデーション
  5. あいまいなエラーメッセージは出さない
  6. 必要な時に、必要な表示をする
  7. リストの順番はロジカルに
  8. ajaxでのバリデーション

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

9.世界中の人が利用することを念頭におく

もし運用しているサイトが日本以外からも申込が来る、インターナショナルなサイトの場合、名前や住所の入力欄に少し気をつけた方がよいでしょう。
例えば住所であれば県単位から入力する国もあれば、番地から入力する国もあります。こういった場合、項目を県や市など細かく分けるのではなく、住所で一つの入力欄のみにすることでユーザーの混乱を減らすことができます。その際はもちろん入力可能文字数を多くする必要がありますね。
こちらのサイトに詳細な説明が載っていますので興味のある方は是非参考にしてください。(※英文です)

10.前のページ、次のページへ移動しやすくする

フォームが複数ページにわかれている場合、前のページに入力した内容を確かめたくなり、戻るボタンを押して移動するユーザーは多いのではないでしょうか。
特にECサイトの精算などの場合、自分が何を買い物かごに入れたか、途中で気になることがありますね。
前のページに戻る、次のページに進む、ページ更新などの動作を行った際、エラーで入力した内容が消えてしまわないよう設定するとよいでしょう。

11.タブキーでの移動先に注意

タブキーを押すとフォーカスしている箇所が次の入力欄や選択肢に移動すると思います。
この移動先がユーザーの思ってもいない箇所になると、入力漏れ等が発生することがありますので、きちんと順序立てて移動するようにしましょう。
下記の場合でタブキーを押したら「フリガナ」に移動する
無料パンフレット請求|合宿免許ハンターで激安・格安プランを検索、予約!

12.サーバーサイドでのバリデーション

入力欄に入力された情報が正しいかどうかを判断する「バリデーション」ですが、クライアント側で行う方法とサーバー側で行う方法の2つがあります。
クライアント側でのバリデーションは処理が軽くてすみますが、どうしてもブラウザの設定の影響を受けてしまいます。
ですので、サーバー側でも必ずバリデーションを行うようにしたいですね。もちろん、併用する形がベストです。

13.あいまいなエラーメッセージは出さない

ユーザーが正しくない形式でデータを入力したり、必須項目が未入力であった際、あいまいに「全てのデータを入力してください」とメッセージを出すのではなく、「メールアドレスを入力してください」という風に、どのように訂正すればよいかを明示すべきです。また、できれば訂正の必要な入力欄に戻り、その横にメッセージを出すとよいでしょう。
図2

14.必要な時に、必要な表示をする

ユーザーに入力してもらう必要があるとわかるまで、入力欄を隠すようにできるのがベスト、とのことです。
こちらは海外に特有な事例ですが、アメリカからのユーザーとわかる場合、province(カナダでの「州」)の入力欄を隠し、その代わりにstate(アメリカでの「州」)のドロップダウンボックスを表示させるとよいと筆者は言っています。

15.リストの順番はロジカルに

ドロップダウンリストやラジオボタンを使用する際、選択肢の順番はロジカルに考えて決定すべきです。
例えば関東圏のユーザーが多いとわかっている場合、北から順に北海道、青森、、、と並べていくのではなく、
関東圏の県名をリストの上に表示させるとよいでしょう。
「jal」の航空券予約画面
図1

16.ajaxバリデーション

入力欄から次の入力欄へ移るとすぐに間違いがあるかどうかを表示してくれるフォームも多くなってきており、筆者も勧めています。
間違いがあった際、入力してすぐにわかると入力のフローが邪魔されずにすみますね。
ajaxを利用することで、画面遷移を経ることなく入力内容のチェックが可能となります。

まとめ

いかがでしたでしょうか。今回は少し技術的なEFOテクニックも多かったかと思いますが、「15.リストの順番はロジカルに」など、ちょっとした変更でユーザーの手間を省くことができる施策かと思います。残り9つのtipsも今後ご紹介していきたいと思いますのでどうぞよろしくお願いいたします。
※続編はこちら:【海外EFO】ウェブフォーム最適化のための25のTips(3/3)

参考記事

25 Web Form Optimization Tips