離脱させない入力フォームの作成、改善する10の方法

LINEで送る
Pocket

この記事の所要時間: 約 10分35秒

メールフォーム 意外にあまり書いていないWebデザイン関連の記事を書いてみたいと思います。

 

先日、某サイトの資料請求フォームの改善をしたいと相談を受け、私なりに分析して改訂のお手伝いをしました。

そこで、実際に入力フォーム改善に力を入れてきた経験もあり、
私なりの考え方と注意点をまとめ、フォームを改善するヒントになればと思います。

 

※しかし、あくまでも私個人の経験に基づいてますので、 すべてに当てはまるわけではございませんのでご了承くださいませ。

 

それではエントリーフォーム改善のポイントを順番に見てみましょう。

※基本的にお金をかければいいものが作れますが、ここではコストが出せない場合に無料でまずできることを書いています。

 

 

1.フォームページには、別ページへのリンクを一切表示しない

 

某サイトの問合せフォームは、ヘッダー、グローバルメニューが決まったテンプレートの中にフォームページを作成していました。

コンバージョン達成を阻害する多くの要因は、別ページへ移動してしまうこと。

 

フォームの目的は、サンクスページまで無駄のない移動を徹底させなければなりません。

ですので必要のないリンクは一切表示させないようにします。

できればフッター要素のリンクも削除しましょう。

※削除できないリンクは(9)を参照

フォームページには、外部へのリンクを一切表示しない

リンクをすべて削除すると、本来のサイトへ戻れなくなります。
そのため、フォームページへのリンクは、必ず_blank設定し、別ウィンドウ(タブ)で表示させるようにします。
誤ってフォームページを閉じてしまっても問題ありません。

 

2.申込へのハードルを下げるため、完了までの作業ステップ、所要時間を明記する

 

フォームページでの離脱要因は、入力途中で、

まだあるのか?→面倒くさい!→ 離脱 というパターン。

 

第一印象で、どれくらいの時間・手間で終了するかを伝え、安心感を与えましょう。

申込へのハードルを下げるため、完了までの作業ステップ、所要時間を明記する

 

 

3.入力項目を極力少なくし、必須項目を最小限にする

 

さて、問題のフォーム項目ですが、これはフォームの目的により内容がさまざまですね。

ユーザとのファーストコンタクトとなるフォームですが、入力項目はできるだけ少なくしてください。

また、必須項目は最小限にしてください。

 

例えば、性別や年齢など、データを取らなくてもそれほど問題がない、

もしくは後日アポイントで確認が可能な場合などは、必須から外しましょう。

 

私の経験から、フォーム入力するユーザーは必要な項目以外は徹底的に入力しません。
例えば、フリガナを必須項目から外すだけで、劇的に離脱率が改善されたこともあります。
自分のフリガナすら入力したくない、面倒くさいというユーザもいるのです。

入力項目を極力少なくし、必須項目を最小限にする

 

 

4. 必須項目は、入力エラーをその場でわかるようにする

 

これはかなり大切ですね。

必須項目が未入力、または入力形式が違っている場合など、
確認画面でエラー表示され、戻って修正など、煩わしいフォームは私でも離脱します。

最近は、このようなエラー表示の仕組をもったフォーム素材も多く提供されていますね。

 

必須項目は、入力エラーをその場でわかるようにする

 

とりあえず取り入れる場合は、Javascriptで実装できるものが紹介されています。

参考ページ:フォームの入力エラーを吹き出しで教えてくれる JavaScript

 

5.フォームが長くなる場合は、2ページまたがるように段階式する

 

どうしてもフォーム項目がたくさんあり、ページが縦に長くなる場合があります。

このような縦に長いフォームはとても威圧感があり、見ただけで離脱するユーザも少なくありません。

 

この場合は、とりあえず段階式の入力で2ページにまたがるよう工夫し、
ファーストビューでの印象を和らげるようにしましょう。

 

フォームが長くなる場合は、2ページまたがるようにする

 

 

6.プルダウン形式のよりも、ラジオボタンの方が良い場合がある

 

これは、私の経験からですが、
選択項目をプルダウン形式のメニューで表示する場合と、
ラジオボタンで表示する場合の離脱率に、違いがあります。

 

これは、選択項目がラジオボタンでは、全項目が一目でわかり、目的のものが一瞬で見つけられるのに対して、プルダウンだと全項目を下までスクロールが必要なので選択しづらいのだと思います。

 

さらにいうと、どれだけ選択項目が多くても、ラジオボタンにした方が結果は良かったです。

 

プルダウン形式のよりも、ラジオボタンの方が良い場合がある

 

 

7.自動入力や入力補助機能を利用する

 

郵便番号による住所の自動入力や、半角英数など、フォーマットが決まっている場合は、
入力補助で離脱、入力エラーを未然に防ぎます。

 

自動入力や補助機能を利用する

参考ページ:郵便番号から住所を自動入力する操作性が世界一簡単なZipAddr

 

●IEとFireFoxのみ有効ですが、半角英数の入力欄などは、CSSにて、ime-mode プロパティを指定する

参考ページ:ime-mode – テキスト入力時のIMEの状態を指定する

●スマートフォーンの場合は、input要素にtype属性を指定する

参考ページ:スマートフォンでも使いやすいテキスト入力欄を作る

 

 

8.入力形式を分かりやすく記載しておく

 

郵便番号や電話番号にハイフンが必要か、振り仮名は、ひらがな?カタカナ?
など所定の入力形式を「入力項目の上・下」どちらかに記載しておくことで迷うことが軽減されます。

 

※スマートフォンの場合、テキストフィールドに画面がフォーカスされるため、横側に記載しても表示されない場合があります。

 

さらにinput要素の、placeholder属性を使うことで、テキストフィールドに入力例を表示させることができます。

(placeholder属性は、IEでは未対応ですが、Chrome、Firefox、Safari、スマートフォン等では有効です)

入力形式を分かりやすく記載しておく

placeholder属性について参考ページ:★HTML5タグリファレンス

 

9.リンクへの移動が必要な場合は、インラインコンテンツとして浮き立たせる

 

個人情報保護方針や、規定事項を確認させる必要がある場合、リンク移動せずその場で確認ができるよう、ポップアップ風に浮き立たせるなどの対応でリンク移動を防ぎます。

いわゆる、ライトボックス的な方法がベストだと思います。

※どうしてもリンク移動させる必要がある場合は、_blank設定にしましょう。

 

●ページをインラインコンテンツとして表示できるJavascriptサンプルには「ThickBox」が便利

参考ページ:まとめ:ThickBox の使い方 (記述例&Tips)

リンクへの移動が必要な場合は、インラインコンテンツとして浮き立たせる

 

10.EFO(エントリーフォーム最適化)ツールを利用する

 

9番までの方法は、ユーザの入力ストレスを軽減し、リンク移動させず離脱させない無料で行えるテクニックです。

 

しかし、それでも改善されない場合は、異なる問題を抱えている場合があります。

EFOツールは、フォームページに移動してきたユーザの全ての行動を記録し、
どういった項目での離脱や入力ミスが多いかなど、データとして蓄積・確認することができる便利なツールです。

 

また、上記で説明している入力補助やエラーチェックも標準で装備されています。
導入にはコストがかかりますが、さらなる改善を行うには非常に役立つのでメリットは大きいでしょう。

 

私自身は数種類のEFOツールを使用してきましたが、なかでも導入ハードルが低く、使いやすいものをご紹介します。

※以前ご紹介していたナビキャスト社の「フォームアシスト」は月額3万円のプランがなくっていました。

 

そこで、ユビキャスト社の「Gyro-n EFO」は導入コストも低く、1ヵ月の無料トライアルがあるので、EFOを検討したい場合は有効です。
 Gyro-n EFO(エントリーフォーム最適化)はこちら

 

●EFOの便利なところ

フォームの直帰率や、途中離脱、コンバージョン率(CV率)が詳細にわかり、

どの項目で離脱やエラーが出ているのかわかります。

 

確認できるフォームデータの内容

  • ページビュー
  • ユニークユーザー数
  • 直帰数、直帰率
  • 確定数(確認ページへ到達した数)、確定率
  • 途中離脱数、途中離脱率
  • 確認ボタンのエラー表示回数
  • コンバージョン数、コンバージョン率
  • 各項目のタイミング別によるエラー数とエラー率
  • 各項目の条件別によるエラー数とエラー率

 

EFOでデータを積み上げ、フォーム項目をより最適化していくことで、コンバージョン率を上げていく施策を打つことができます。

 

最後に、補足としてプラス。

 

11.フォームから別ページへ移動する場合は確認メッセージを表示する

 

結構、これは効果があります。

 

フォームページを閉じる、また別ページへ移動する場合は、本当に移動しますか?

という確認メッセージを出すことで、誤ってリンクをクリックしたり、
ページの閉じるボタンを押してしまった場合に、離脱の一歩手前で引き止める効果があります。

 

フォームから別ページへ移動する場合は確認メッセージを表示する

 

参考ページ:ページ移動前に確認ダイアログ – ironsJPのブログ – Yahoo!ブログ

 

12.リセットボタンは設置しない

 

最近はほとんど見なくなりましたが、たまに、リセットボタンがついているフォームを見かけます。

私の個人的経験からも、誤ってリセットボタンを押して、入力した内容がすべて消えてしまったら、もう入力をやめます。

 

ですので、リセットボタンは全く必要ありません。

 

13.ユーザのモチベーションを上げる

 

フォームでは、どれだけ訪れたユーザのモチベーションを上げれるかも、重要なポイントです。

 

  • 今なら、○○プレゼント!
  • お申込みいただくと、○○がついてくる!

 

などのインセンティブを提供できる場合は、後押しとして是非利用すると良いでしょう。

 

14.フォームのファーストビューには、フォーム画面が少しでも見えるように

 

これは、あまり重要ではないかもしれませんが、フォームページに移動した時になにやら延々と説明した上で、フォーム画面が表示される場合あります。

 

私の経験上、フォーム入力までに説明が長いものは離脱率が高かったため、ファーストビューにフォーム画面が少しでも表示され、フォームページであることがわかる割合でレイアウトしています。

フォームのファーストビューには、フォーム画面が少しでも見えるようにする

今は、多くのサービスが提供されているためメールフォームをイチから作成することは少なくなりましたが、コストをかけられない場合は自力で改善するしか方法はありません。

入力フォーム改善のご参考にしていただればと思います。

 

※ここで紹介している参考ページは、私が見た中で丁寧でわかりやすいと思うサイトです。紹介させていただきましたサイトオーナー様に御礼申し上げます。

 

 

 

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です