フォームの確認画面を最適化してefo対策をしよう

フォームのユーザービリティを向上させ、登録ページや申し込みページの離脱率を低くする施策をefoと言います。efoはEntry Form Optimizationの略で、「入力フォーム最適化」の意になります。

一般的にはUIやバリデーションの改善などを行いますが、この時、ついつい忘れてしまいがちなのが入力後の確認画面。ここでは、この確認画面の最適化について説明します。

efoでユーザーの離脱を防ぐ!最適化を行うことで得られるメリット


確認画面を表示するタイミングはいつか

フォームの確認画面が表示されるのは、ユーザーがすべての入力を終え、確認ボタンを押下したタイミングが基本と言えます。この時、大切なのは、エラーなくすべての入力が終了しているということ、つまり、送信されたすべての入力値がバリデーションを通過できていることが前提です。

エラーがあった際には、この画面へは推移させず、フォーム画面でその入力不備を伝えます。このようにすることで、エラーはフォーム画面で完結し、確認画面では入力情報の確認に専念することができるでしょう。また、入力フォームが複数ページにまたがる場合は、最終ページが終わったタイミングで表示することになります。

この際、バリデーションは各ページ毎に行いますが、最終ページの場合のみ確認画面への推移を可能とします。つまり、最終ページ以外では、確認ページの表示はしません。というのも、余計な中断を挟まず、まずは入力作業のみに専念できるようにすることが大切だからです。

もちろん、単一ページの場合も複数ページの場合も、フォーム画面は入力とエラーの通知、確認画面は入力情報の確認、それぞれの役割を意識して実装することがユーザービリティの向上につながるはずです。


どのような確認画面を用意するのか

確認画面には基本的に入力されたすべての値を一覧表示します。ラジオボタンやセレクトボタンのようなウィジェットは、同じものをリードオンリーに、つまり読み取り専用として入力時と同じフォーマットで表示すると、ユーザーの可読性が向上するかもしれません。

文字列の入力フォームの場合は、リードオンリーのフォームを表示することも、直接文字列として表示することも可能でしょう。ただし、ページ上のどこが入力値かを一目で判別できるよう、入力値を太字にしたり、フォントサイズを大きめにするなどの工夫が必要かもしれません。

また、データの種類に応じても最適化が求められます。例えば、パスワードなどの文字列は基本的にセキュリティーを考慮して伏字で表示されます。しかし、これでは値を確認をすることができません。それゆえ、状況に応じ、伏字の横に表示ボタンのようなものを設け、値を可視化できるようにしても良いでしょう。

このボタンは、再び押下すれば、また非表示にトグルできるような仕様であると望ましいです。なお、フォームが複数ページにまたがる場合も、確認画面は1ページに納めることが大切です。1つのページですべての入力値をまとめて見れたほうがチェックがしやすくなるはずです。

スマホのefoで重要なポイント8選

編集画面へはどのように推移させるのか

確認画面で入力値にミスが見つかった場合、ユーザーは編集ページへ戻る必要があります。この時、よく見える分かりやすい位置に編集ボタンを設ける必要があるでしょう。一般的には、確認画面の下部、登録ボタンなどの左側に配置されていることが多いです。

他のページ推移にも共通して言えますが、基本的に何かアクションを「戻る」際のボタンは左、「進む」際のボタンは右、というのがブラウザのデファクトスタンダードです。横書きのページめくりの方向をイメージすると分かりやすいかもしれません。

また、入力フォームが複数ページにまたがるの場合は、確認画面で入力値を各ページ単位に区切って表示をし、各区切りの下部に編集ボタンを設けることも可能です。これにより、対象の編集ページへの推移がスムーズになるでしょう。

ただし、下線やラベルなどでしっかりと区切られていないと、複数の編集ボタンのうち、いずれを押下すれば目的の値を編集できるのか、判断がつきにくくなるおそれもあります。それゆえ、各ページのデータを1つのチャンク(塊)として認識できるよう、整頓して表示することが大切です。

編集画面へ推移する際に何を表示するのか

編集の際に入力ページへ戻ったら、すべての値を1から入力し直さなければならなかった、などという不便があれば、それだけでユーザーは離脱してしまうでしょう。それゆえ、確認画面から編集画面へ推移する際は、入力されたすべてのデータを保持し、そのデータを各フォームへ再表示する必要があります。

ただし、パスワードやキャプチャ認証をはじめとする一部の特殊な値のみ、再入力を促す必要があるかもしれません。前者はセキュリティーを考慮し、後者は値が更新されることを考慮し、適時空にしておきましょう。また、その際に、しっかりと未入力である旨を明示しておく必要があります。

目的の箇所の修正が済んだ際に、空のフォームがあることに気づかずに進んでしまうのは、極力避けたいところです。フォームの近くに赤字などで分かりやすく表示しておきましょう。

編集画面へ推移する際の注意点

確認画面でミスが見つかった際に、ブラウザのバックボタンで戻ろうとしてしまうユーザーがいます。しかし、ブラウザでページを戻ると、時に入力値が失われかねないため、基本的にはこれを抑止する必要があると言えます。

具体的な手段として、確認画面でブラウザバックのボタンを押下した際に確認ダイアログを表示し、そこで入力値が失われる可能性がある旨を伝える方法が考えられます。このようにしておけば、多くの場合、編集ボタンから推移してもらうことを期待できるでしょう。

また、トップページをはじめとする他のリンクへ移動をする際にも、編集をやめて良いかを問うダイアログを表示し、しっかりと確認を促したほうが良いかもしれません。ただし、もとより、編集画面や確認画面には登録のフローと無関係のリンクをあまり設けすぎないことがベストプラクティスなのかもしれません。

最低限のリンク、例えば、トップページやヘルプなどに限定しておけば、誤った操作によりデータを失ってしまうなどの余計な心配も少なく済むはずです。ブラウザバックやリンク、いずれにおいても、画面の推移の実装はできうる限り丁寧に実装し、より良いユーザービリティーを実現することが大切でしょう。

参考リンク>>フォーム最適化 - エフトラ