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

ページを「閉じる」を防ぐ 離脱防止ポップアップを使ったEFO事例

Webフォームの入力中にブラウザを誤って閉じてしまう、戻ってしまうといった誤操作を防止するためのEFO(入力フォーム最適化)の事例を紹介します。Javascriptを使って、ページの離脱時の「onbeforeunload」というイベントを検知し、確認ダイアログを出す機能です。ポップアップに表示させる文例もご紹介します。

EFO(エントリーフォーム最適化)の敵「離脱」を減らすコツを紹介します。「ユーザーの離脱を止める編」の2回目は、フォームの2大誤操作「閉じる」または「戻る」離脱の対策として有効な「確認ダイアログ」の活用例を紹介します。

この記事では、入力フォームを改善して入力完了率を上げる! エントリーフォーム最適化15か条【第10条】「離脱ブロックを導入すべし」をご紹介します。リンクをクリックすると第10条のまとめに飛びます。

フォームの誤操作防止に効く「確認ダイアログ」

今回「惜しい!」エントリーフォームとして紹介するのは、横浜銀行様の「口座開設」フォームです。

金融機関の口座開設フォームは、EFO施策が進んでいる分野の1つです。というのも口座開設の申し込みは、入力すべき情報、入力項目数、入力ページ数が多いからです。

入力項目や入力ページ数が多いと、入力完了のためにユーザーに強いる作業量は増えます。そのため入力支援機能の実装をはじめ、ユーザーの負担を減らすためのさまざまな工夫がされています。EFOについて考えるうえで、金融機関のフォームは参考になるでしょう。今回も、まずは参考になる良いところから紹介しましょう。

良いポイント
ムダなリンクが無く、リアルタイムエラー機能がある

株式会社横浜銀行「口座開設
複数回の同意を経た後、最初に表示された「STEP1」の入力ページ
  • ムダなリンクが無く、フォーム専用のレイアウトになっている
    入力ページは、余計なリンク要素を徹底的に排除したシンプルなレイアウトにすべきと第9条で解説したように、フォーム内には、ほぼリンク要素がなく、離脱要因をかなり減らせているでしょう。

  • 必須項目、入力エラーをリアルタイムで伝えている
    必須項目は「※」ではなく、[必須]と表示すべきと第6条で解説したように、必須と任意がわかりやすく表記されています。

    第5条でも解説しましたが、必須項目の背景がピンクになっており、入力を満たした場合にリアルタイムで色が消えるようになっています。また、入力を外すと「入力してください」というアラートが表示されるなど、どの項目を入力すればいいかが一目でわかるようになっています。

次に改善すべきポイントを勝手に提案しましょう。

改善ポイント
ページを閉じる前に、確認ダイアログを出す機能を実装する

確認ダイアログのサンプル

このフォームでは、ユーザーが間違えて、「ページ自体を閉じる」または、「ブラウザの戻るボタンで戻る」などを押すとその操作が実行されてしまい、今まで入力していた情報がすべて消えてしまいます。そこで有効なのが、次の機能です。

間違えてフォームと閉じることを防ぐ「確認ダイアログ」を実装する

ユーザーが間違えて、入力中のフォームを閉じてしまっても、「確認ダイアログ」で本当に閉じるかどうかを確認することで、意図しない離脱を減らせます。

また「確認ダイアログ」表示は、入力ページだけでなく、確認ページでも有効です。確認ページで、送信完了したと誤解してウィンドウを閉じるという離脱を減らすことにも有効な策です。

確認ダイアログとは、上記図のようなブラウザ側で用意された機能です。基本的にはどのブラウザにも用意されています。確認ダイアログ内には、任意の文字列を指定して表示できます(Firefoxのみブラウザ側の固定の「このページから移動しますか? 入力したデータは保存されません。」という文字列が表示されます)。

意図せず離脱してしまうことは、ブラウザを使ってフォームを閲覧する以上、ブラウザの操作に慣れている、慣れていないに関係なくいつでも起きうる動作です。むしろ慣れている人のほうが、ウィンドウやタブを閉じるショートカットキーの「Ctrl + W」を誤って押してしまう可能性があるので危険かもしれません。

間違えてフォームを閉じてしまった場合、再び入力ページへのアクセスからやり直す必要があり、ユーザーが気持ちを立て直すには、相当の労力が必要です。ましてや、入力ページに辿りつくまでに同意チェックを経る必要があったり、入力ページが複数あっていくつかの入力ページの入力を終えた場合だと、2度と戻ってくることはないと思ったほうがいいでしょう。

「確認ダイアログ」を出す方法

ブラウザによって挙動の違いはありますが、基本的にはページを再読み込み、閉じる、リンクをクリックする、などされるときに発生する、「onbeforeunload」というイベントをJavaScriptで検知して出せます。

確認ダイアログを表示するソース例
<script type="text/javascript">
  window.onbeforeunload = function(e) {
    e.returnValue = "本当にページを閉じますか?";
  }
</script>

※Windows 7のIE11、Firefox、Google Chromeで確認ダイアログが出ることを確認済みです。

ただし、この処理を追加すると、ページを閉じる場合、別ページに遷移する場合、どちらにも確認ダイアログが出ます。フォーム本来の送信ボタンなど確認ダイアログを表示したくない要素へのクリック時にはこの処理を実行しないような処理の追加が必要です。

フォーム自体の送信時には確認ダイアログが表示されないようにするソース例
<input type="submit" value="送信" onclick="window.onbeforeunload=null"/>
プライバシーポリシーなどへのリンククリック時には確認ダイアログが表示されないようにするソース例
<a href="~" onclick="window.onbeforeunload = null">~~</a>

確認ダイアログを実施している事例4選

「確認ダイアログ」表示を実際に行っている、フォームの確認ダイアログを4つまとめて紹介します。

確認ダイアログには、前述で任意の文言を表示できると書きましたが、どのような文言を入れるかで印象や効果が違ったものになるはずです。文言を考えるときの参考にしてください。※Google Chrome最新版(当時)で表示された確認ダイアログをキャプチャーしています。

事例①鳥取銀行:一般的な文言①

入力ページ数は、横浜銀行よりも少ないものの、離脱ブロック機能が実装されています。確認ダイアログのメッセージは「入力内容が破棄されます。よろしいですか?」という一般的な文言を使っています。

事例②三井住友銀行グループモビット:一般的な文言②

離脱するとせっかく入力した内容が全て失われることを伝える内容です。こちらも一般的なタイプです。

事例③栃木銀行:入力項目数を表示

残り入力項目数を表示して、ゴールまでの作業量を伝えることで、完了までのモチベーションを再度盛り上げることを狙っているのでしょう。

事例④第三銀行:文字数が多過ぎる

とても丁寧に説明しているものの、情報量が多く、また1行の文字数が多いため、一番伝えたいことがわかりにくいですね。文言を変えるときは、ここまで文字数を増やすことはおすすめしません。

◇◇◇

フォームからの離脱につながるユーザーの動作は前回も紹介した通り、大きく3つあります。

  1. フォーム内にあるリンクから別ページに移動してしまう
  2. ページ自体を閉じてしまう
  3. ブラウザの戻るボタンでフォーム以外の元のページに戻ってしまう

①については前回解説しました。今回紹介したのは②と③についてです。

入力を諦めて、フォームを意図的に閉じるならともかく、まだ入力を続けるつもりが、誤操作でウィンドウを閉じてしまったときのユーザーの心理的ダメージは甚大です。

特に入力ページの数や入力項目の数が多いフォームでこの施策は有効です。ぜひ実装を検討しましょう。

【第10条】離脱ブロックを導入すべし

  • 確認ダイアログを表示する機能で、離脱を直接防ぐべし
    ユーザーが間違ってページを閉じないように、ブラウザの確認ダイアログを出して、本当に閉じてしまっていいか、離脱してしまっていいかを確認すべし。ユーザーがページを閉じてしまう操作自体はゼロにはできないが、意図せぬ離脱を減らすことができる。
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

アップロード
手元のPCなどの機器から、ネットワークを介して、別のPCやファイルサーバー、ウェ ...→用語集へ

インフォメーション

RSSフィード


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