勝手にEFO分析-エントリーフォーム改善

勝手にEFO分析-エントリーフォーム改善
入力フォームは「1000×550px」で作る! 1画面に収めて直帰率を減らす/15か条の3

ブラウザの1画面に入力項目~送信完了までを収めて直帰率を減らそう。

エントリーフォームに来たユーザーにパッと見て、どのくらい入力しなければいけないかを把握してもらうために、ブラウザの1画面に入力項目~送信完了までを収めて直帰率を減らそう。

この記事では、入力フォームを改善して入力完了率を上げる!エントリーフォーム最適化15か条【第3条】「ファーストビューに収めるべし」を紹介します。※リンクをクリックすると第3条のまとめに飛びます。

フォームを開いたときに内容を一望できるかどうかで、モチベーションが大きく変わる

まずは実際に例を見てみましょう。エントリーフォームを開いたときに画面にこの内容が表示されたとして何を感じるでしょうか? 「一体このフォームにはどれだけの項目があるのか」と一瞬、不安を感じるのではないでしょうか?

ブックオフオンライン新規会員登録フォーム

自分がエントリーフォームに入力する時の操作を思い出してみてください。私ならば、入力を開始する前に縦の画面スクロールをして、ページ全体を確認しようとします。

これは、フォームの最初の項目から、送信ボタンまでを見渡すことで、どのくらいの項目数に入力しなければならないのか、入力内容はどんなものか、自分が送信完了するために必要な作業量を計るためです。

では、こちらはどうでしょうか? 同じくらいの項目数ですが、送信ボタンまで見渡すことができますから、スクロールの手間は不要です。

エフ・コード流改善案:ファーストビューに収まっている例

エントリーフォームを開いた瞬間、入力項目から送信ボタンまで見渡せるようにすることは、入力作業がどれだけ必要かがわからないという一瞬の不安と、ユーザーが最初に行う縦スクロールの手間を減らすことができます。そのため、入力項目から送信ボタンまで見渡せるとユーザーは安心してスムーズに入力を開始することができます。これもまた直帰を減らすための有効な策です。

今回は、このエントリーフォームを例に、勝手に入力完了率アップのための改善すべきポイントを紹介し、改善案を提案します。

【第3条】ファーストビューに収めるべし

第3回の「惜しい!」エントリーフォームとして紹介するのは、ブックオフオンライン様の「新規会員登録フォーム」です。

良いポイント
入力支援機能を入れている点は○です。

入力中の項目背景の色を変更し、リアルタイムにエラー表示する

項目にフォーカスをあてたとき、入力項目の背景色が変更することで、ユーザーは自分が入力しようとしている項目がどれかがわかります。

また、入力直後にリアルタイムでエラーも表示されますので、ユーザーは送信ボタンを押すまでに入力内容の軌道修正をし、ボタンを押したときにはエラーのない状態で次ページに進めるでしょう。

改善ポイント
フォームの縦サイズを少しでも減らし、「ファーストビュー」に収めるようにしよう

フォームを開いたときに、できるだけ全ての入力項目が見渡せるようにすることが大事

今回の惜しい点は「項目数は少ないのに、ファーストビューに収まっていない点」です。

ブラウザでページを開いたときに表示できる領域を「ファーストビュー」といいます。モニタサイズや解像度によって表示できる領域(ピクセル)は変わってきますが、ここ数年は、横幅1000ピクセル、高さ550ピクセルがファーストビューのサイズといわれています。

この「ファーストビュー」に入力項目の全てが収まっていると、ユーザーは最初に見えていないページ後半部分を縦スクロールで確認することなく、スムーズに入力を開始することができます。また、入力しながらも送信ボタンが見えているため、モチベーションを下げることなく、入力作業を続けることができます。

改善案
ファーストビューを意識したレイアウトにしよう

入力項目をコンパクトに配置することで、入力項目から送信ボタンまでをファーストビューに収め、ユーザーにスムーズに入力してもらう

再掲/エフ・コード流改善案:ファーストビューに収まっている例

「メールアドレス」「メルマガ配信」「パスワード」という見出しを省略することで、ぐっとコンパクトなレイアウトになりました。ファーストビューの横幅1000px、高さ550pxというサイズの領域に収まっているかどうかは、実際の表現で調整して検証する必要はありますが、少なくとも、ぐっと見やすくなり、印象が良くなっているのではないでしょうか?

改善前(Before)と改善後(After)を並べてご覧いただきましょう。いかがですか? 改善前より改善後の方がずっと入力を開始しやすいはずです。

入力項目の絶対量が多い場合は、2画面程度を目安にページの縦の長さが収まるように努力しよう

今回、入力ページの縦の長さをファーストビューに収めることの大事さを伝えしてきましたが、項目の絶対量が多い場合には、とてもファーストビューには収まらないというケースが実際には多いと思います。同時に、入力項目はそう簡単には減らすことがでないのも現実だと思います。

しかしその場合でも、できるだけ入力ページの高さを節約することは大事なポイントです。項目数が多い場合には、以下のポイントに留意してレイアウトを調整しましょう。

  1. 入力例を入れる場合、入力項目の右側または入力項目内に配置する

  2. 姓名などの項目は、左右に並べ、1行分を節約する

  3. 個人情報ポリシーをiframeにし3~5行程度が見えるようにする

  4. 入力項目部分を、左右2カラムのレイアウトにする

  5. 入力ページを複数に分ける

ファーストビューにこだわるあまり、入力項目を詰め込みすぎてゆとりのないレイアウトになってしまっては本末転倒です。レイアウト変更にあたっては、入力しやすさを失うことのないように注意しましょう。

【第3条】ファーストビューに収めるべし

入力ページが縦に長いと、ユーザーがページを表示した際に、入力すべき項目がどのくらいあるかがわからず、ユーザーは不安を感じてしまう。入力ページを開いたときに最初に表示される領域に、入力項目の全てと送信ボタンが見えるようにすることが重要だ。

多くのユーザーが最初に表示できるブラウザ画面の領域をファーストビューという。モニタの解像度にもよるが、ここ数年は、横幅1000px、縦幅550pxというのが目安だ。

フォームの最初の入力項目から送信ボタンまでをファーストビューで表示できるよう努力しよう。

とはいえ、項目数の絶対量というものはあるだろう。ファーストビューが難しい場合は、せめて2画面程度に収めるようにしよう。

この記事が役に立ったらシェア!
tweet88このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

EMD
EMDは「Exact Match Domains」の略で、「完全一致ドメイン名」 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore