1つ目の項目への入力を開始したユーザーに最後の項目まで入力してもらうための入力支援のコツを解説します。エントリーフォーム最適化15か条の【第4条】「入力例や入力形式を明記すべし」をご紹介します。リンクをクリックすると第4条のまとめに飛びます。入力を開始したユーザーが離脱しないよう入力支援をしよう!フォームまでアクセスしてくれたのはよいものの、項目を1つも入力することなく入力ページを閉じてしまうのが「直帰」です。この直帰を減らすために、これまで3回にわたり「スムーズに入力開始してもらうためにはどうしたらよいか」について考えてきました。ユーザーが1つ目の項目の入力を開始してくれたとして、2つ目以降の項目の入力を途中でくじけることなく進めるには何が必要でしょうか?それは1つ1つの項目についてユーザーが迷いなく入力してくれることです。今回と次回、「ユーザーの入力を励ます編」と題し、入力を開始したユーザーが途中で入力をあきらめて離脱しないよう、ユーザーの入力を支援するにはどうしたらよいかについて考えます。ユーザーの気持ちになってエントリーフォームを見てみよう!では、今回の例を見てみましょう。このエントリーフォームをパッと見た瞬間、どんなことを感じますか?イオンスクエア会員登録フォーム「左のピンクの見出し項目」と「入力欄の中に表示されている文言」がほぼ同じになってしまっています。これでは、左のピンクの見出し項目はなくてもいいのではと思ってしまうくらいです。項目ごとの注意書きが右側に配置されていますが、入力項目から遠いため、入力に際して左右の視線移動が発生してしまうのも入力しにくさにつながっていると思います。入力欄の下にあった「入力例」を「入力欄の中」に記載し、「右側の注意書き」を「入力欄の下に配置」しただけで、ずいぶんと見やすくなったと感じませんか。エフ・コード流改善案:入力欄の中に入力例を入れ、視線の動きを少なくする入力欄の近くに入力するための必要情報がまとまって記載されるだけで、視線の動きが少なくなり、ユーザーは迷いなく項目ごとの入力を開始できるはずです。今回は、このエントリーフォームを例に、勝手に入力完了率アップのための改善すべきポイントを解説し、改善案を提案します。解説します第4回の「惜しい!」エントリーフォームとして紹介するのは、イオンスクエア様の会員登録フォーム「イオンスクエアメンバー基本情報登録」フォームです。余白をゆったりととったレイアウトになっているので、各項目に集中しやすい。エラー表示ができるだけ他の項目に重ならないように配慮してある良いポイント:余白をゆったりと取ったレイアウトとエラー吹き出しが周辺要素とかぶらないゆったりとしたレイアウトは、前回のファーストビューのためのコンパクトなレイアウトづくりとは対極にありますが、各入力項目に意識を集中させやすいというメリットはあります。必須入力項目にフォーカスを当てた後、入力に誤りがあった場合はリアルタイムにエラーが表示され、入力せずに他の項目へ進むと入力を促す吹き出しが出ます。リアルタイムのエラーが出ると、エラーがない状態で次の項目に進める点で○です。吹き出し、エラーメッセージが、周囲の要素に重ならないように配慮されています。今回の惜しい点は、次の2つです。入力を行うときに視線の移動が多い点ユーザーが入力項目ごとに入力を開始するまでに、何をどのような順番で行うかを考えてみましょう。みなさんも、自分がエントリーフォームを入力するときを想像してみてください。ユーザーは、次のようなことをするのではないでしょうか。入力する項目名がどのくらいあるのかを確認する入力項目が「自分で入力する形式」「選択肢から選択する形式」のどちらなのか確認し、選択する場合は選択肢の内容に一通り目を通すエントリーフォーム全体を把握した後、入力を開始するユーザーは入力項目ごとに、エントリーフォームが求める入力内容を、項目周辺に書かれた情報から学びとり、入力してくれようとしていますから、まずは、そのために必要な情報を過不足なく記載することが大事です。具体的にはどのような情報を用意すべきでしょうか。入力欄にスムーズに入力してもらうために用意する情報として、入力例は必須でしょう。入力例があるとないとでは、入力しやすさが大きく変わってきます。入力形式もあるといいでしょう。フォーム側で求める入力形式があるならそれも書くべきです。補足として注意書きも入れるべきでしょう。きを配置しよう入力項目ごとの入力のための情報の取得のしやすさを向上し、入力項目ごとの入力をスムーズに開始してもらう入力項目ごとの視線移動について左右の移動を減らし、縦方向中心にすることで入力のための情報取得がしやすくなっています。入力例を入力項目内に入れることでレイアウトの節約を行っています。前回のファーストビューの表示内容を増やすためにも有効な策です。改善前(Before)と改善後(After)を並べてみましょう。項目ごとで比較すると改善前より改善後の方が視線の移動が少なく、入力を開始しやすいはずです。入力のための条件が書かれすぎていることはNG今回、ユーザーに入力してもらう項目は必要な情報を過不足なく、視線移動に配慮して配置することについてお伝えしました。入力例はともかく、入力形式や注意書きは本来は必要ないのが理想です。これはこれで親切ではありますが、本来は、ユーザーに負担を強いるのではなくて、ある程度の入力の幅は、システム側で受け止めるようにすべきです。注意書きの全てを読む気になれない例たとえば、半角・全角どちらで入力してもOKとする、ある程度多めの文字数でもOKとする、などが考えられます。そのためには、フォームの仕組み側で、幅広いユーザーの入力内容を受け入れる必要があります。具体的には、フォームのフロント側や保存処理の際に入力形式を適切に変換するなどの処理が必要になるでしょう。フォームのシステムとも大きく関わる部分なので、フォーム改修時に作り替えるのは難しいかもしれませんが、新たにフォームを企画するときには「できるだけ注釈が必要ないフォームにすべき」です。き)を用意し、視線の移動が最小になるように配置しよう。入力欄などのユーザーにテキストを入力してもらう項目では、入力例を入力項目内に記載するなどが有効だ。入力のルールはできるだけ少ないのが理想だ。エントリーフォームを新規に企画する際は、注意書きの少ないフォームづくりを目指そう。エフ・コードでは開発チームに所属、ASP型EFOツール「f-traEFO」のいわゆる「なかのひと」。Web制作とプログラムがともにわかる人材として、エントリーフォーム改善の支援に従事する。大学卒業後、Web制作会社勤務を経て、Webディレクター/コーダーとして活動。制作チーム所属を経て、株式会社エフ・コード入社、現在に至る。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。いいね!「おもてなし」は思考停止ワード。「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語コンバージョンサイトを訪問した人が、商品を購入したり、資料請求したりすること。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。