YUIDEA

YUIDEA

MENU

技術

Date: 2016.09.14

Author: E.G

離脱しにくいエントリーフォームの設計

以前 @nifty WEB販促の窓口 のサイトにてエントリーフォームの最適化(EFO: Entry Form Optimization)について回答させていただきました。
EFOについてはネット上でたくさんの情報がありますね。
今更エントリーフォームの最適化について触れるというより、弊社がこれまでエントリーフォームを設計するときに心がけているポイント、ご提案したポイントをいくつかまとめたいと思います。

エントリーフォームはWebサイトの中で一番重要なページ

世の中のWebサイトには、ほとんどエントリーフォームが存在していますね。
会員を新規獲得するための会員登録フォームや、ECサイト上で商品を購入するための購入フォーム、商品のお問い合わせをしていただくためのお問い合わせフォーム、サービス申し込みの申し込みフォームなど、様々なエントリーフォームが存在しています。

Webサイトに訪れたユーザから「会員登録」、「商品購入」、「お問い合わせ」、「サービス申し込み」などのアクションをしていただくための重要なページですので、エントリーフォームで送信完了までしてくれるユーザを増やすこと(コンバージョンを増やすこと)がとても重要です。

ですが、Webサイト構築では、エントリーフォームがあまり重要視されていない傾向があります
トップページや商品ページにはきれいなデザインを作りますが、エントリーフォームのあるページは入力フォームを設置すればよいと考えているWeb担当者が多いようです。

エントリーフォームの設計ミスでせっかく興味を持ってくださるユーザがいても、途中で離脱してしまい、非常にもったいないです。エントリーフォームを最適化することで、コンバージョン率を高めることが可能です。

エントリーフォームの最適化はパソコンとスマホでは対策が違います。

今回はパソコンについて書きます。

エントリーフォームを設計するときに心がけすることは1つ

離脱しにくいエントリーフォームの作り方はただ1つです。

ユーザが嫌うエントリーフォームを作らないことです

当たり前な話ですみません…

エントリーフォームを設計するときは、たいていの人は、見せ方というより、
・ユーザからどういう情報が欲しいか
・社内システム内のデータの持ち方
をまず考えて、フォームの設計をしますが、ユーザの視点で設計することを忘れがちです。

基本的にはエントリーフォームは面倒なものです。
本当にそのサービスを利用してみたいという気持ちにならない限り、エントリフォームをわざわざ書いて送るユーザはいません。
エントリーフォームを開いていただくだけで、Webサイトの価値は上がったといえるでしょう。
なので、せっかくエントリーフォームを開いてくれたユーザに最後まで送信完了していただくためには、ユーザが気持ちいいと感じるエントリーフォームを作ることが大事です。

電話番号の入力方法1つだけでユーザが離脱してしまうということもありますので、ユーザが嫌うエントリーフォームのタイプを把握し、それを避ければ、コンバージョンを上げることが十分可能です。

ユーザが嫌うエントリーフォームとは?

以下、考えられるエントリーフォームの離脱の原因です。

  • 入力項目が多すぎ(ページが長すぎ)て疲れてしまう→離脱!
  • 入力が難しくて(注意文が多い)、疲れてしまう→離脱!
  • 入力の途中で他のページを閲覧してしまう→離脱!
  • せっかく入力したのにエラー→離脱!
  • ボタンクリック間違え→離脱!

入力項目が多すぎ(ページが長すぎ)て疲れてしまう

当然ですね…
誰もがエントリーフォームに時間をかけたくないです。
エントリーフォームを開いて、大量の項目数と長いスクロールバーをみるとすぐ離脱してしまうユーザは少なくありません。
エントリーフォームには必要最低限の項目だけを設けることがエントリーフォーム設計の基本です。
オプションの項目をすべて親切に入れてくれるユーザはほとんどいませんので、入力しなくてもよい項目はなるべく入れないことです。

とはいえ、項目数を減らせないときは仕方がないかというと、そうではないです。

ちょっとした工夫でユーザのストレスを軽減することができます。

住所は自動補完機能をつけましょう

よくある工夫としては、入力が面倒な住所の自動補完機能です。
郵便番号を入力すると自動的に住所を表示してくれる機能です。
これはぜひ付けましょう。

郵便番号や電話の分け方を見直しましょう

桁数にわけて入力項目を設けるエントリーフォームをよく見かけます。
例えば、郵便番号は、3桁と4桁の入力テキストボックスに分けてしまうと、2回入力しないといけないとユーザが認識してしまいます。
電話番号も桁数で分けると、3回入力しないといけないことになります。
入力回数が増えると、ユーザがストレスを感じやすいです。
郵便番号や電話番号に関しては1つのテキストボックスにまとめ、入力回数を1回に減らすことが良いです。

郵便番号だけではなく、住所入力は自動補完機能をつけない場合は、
都道府県、市区町村などの項目も分けずに1つにできると理想です。

NG



NGな例
郵便番号 郵便 
電話番号

OK



OKな例
郵便番号
電話番号

ページ全体の長さを減らしましょう

項目数を減らせないなら、ページ全体(フォーム)の長さを減らしましょう。
例えばよくある記入例の書き方ですが、テキストボックスの中にするだけでだいぶフォームが短くなります。

NG



NGな例
お名前

例)山田

例)太郎
カタカナ

例)ヤマダ

例)タロウ

OK



OKな例
お名前
カタカナ
セイ メイ

入力が難しくて(注意文が多い)、疲れてしまう

同じことを繰り返しますが、エントリーフォームは面倒です。
面倒だと分かっていてもユーザが入力してくれているので、ユーザが迷わずに送信完了する設計にすることが重要です。
入力に戸惑ってしまうと、ユーザは諦めて離脱してしまいます。

よくありがちな例としては、以下のような半角と全角の切り替えを求める入力や、形式まで求める入力フォームです。

フリガナ ※全角カナで入力してください。
郵便番号 ※半角数字で入力してください。
電話番号 ※半角数字で入力してください。

特にパソコンに慣れていないユーザですと、入力コードの切り替えは負荷のかかる作業です。
電話番号のような半角しか入らないところはプログラム側で自動的に入力モードを半角にしたり、
郵便番号みたいな形式を求める場合はプログラム側で吸収したり、
ユーザへ求める操作を軽減する工夫をするだけで、ユーザのストレスがだいぶ減ります。
注意文を読みながらでないとエントリーフォームを完了できないものは見直しが必要です。

入力の途中で他のページを閲覧してしまう

エントリーフォーム内に関係ない外部リンクは書かないようにしましょう。
外部リンクをクリックしてコンテンツを閲覧してしまうと、今記入中のフォームを忘れてそのまま去ってしまうユーザが多いため、関係ない案内文などは外しましょう。

せっかく入力したのにエラー

項目数が多いことの次に離脱が多い原因はこちらです。
一生懸命入力したにも関わらず、送信後の画面でエラーが出てしまうとユーザは挫折します。
ユーザの送信後のエラーを減らすためには、リアルタイムエラー検知をすることが有効的です。
例えば、入力ミスした時点でエラーを表示させると、ユーザがその場で訂正することができ、一生懸命入力した後にエラーが表示されるよりもストレスを軽減することができます。

メールアドレス

メールの形式が
正しくありません

どうしても送信後にしかエラーを検知できない場合は、エラー画面の表示の仕方の工夫も必要です。
よく見かける例としては、送信後の確認画面にて、エラーを一括で表示する以下の例です。

入力エラーが発生しました!以下をご確認ください!

  • 郵便番号は半角で入力してください。
  • メールアドレスの形式が正しくありません。
氏名
郵便番号
メールアドレス

この場合、ユーザが一生懸命エラー文言を解読し、エラー箇所を自ら探さないといけないです。
この作業は非常に面倒で、この時点で離脱してしまうユーザが多いです。
エラー箇所へ自動的にスクロールし、的確に教えることにより、ユーザも入力ミスの箇所を訂正しやすく、フォームを最後まで入力完了してくれます。

ボタンクリック間違え

これは一番やってはいけない大きなミスです。
入力フォームの確認画面にて、「リセット」ボタンを配置することです。
最近は見かけないですが、昔「送信」ボタンの横に、「リセット」ボタンが置いてあるケースが多く見かけます。
間違って押してしまった場合はすべてのデータがクリアされるので、この瞬間、再度入力してくれる人がほとんどいません。
また、ブラウザーの「戻る」ボタンでデータがすべて消えてしまうパターンも致命的です。
私もそんな入力フォームに何度も遭遇したことがありまして、どれもやる気を失い、去ってしまいます。
入力フォームのテストもその辺をきちんと行うことが大事です。

とても基本的なことを書いてみましたが、
入力フォームの設計はサイト構築上、非常に大切です。
冒頭で少しお話ししましたが、この記事はパソコンの入力フォームの対策を簡単にまとめたものとなります。
スマホは画面の狭さや操作方法の違いにより、パソコンとは別の対策が必要です。
またの機会で書いてみようと思います。

E.G

留学のため、日本へ。
来日後はIT企業でサーバーやデータベースエンジニアを経験。
デザイナーへ転身後でもUnixコマンドを忘れることなく、コーディングはvimなどでコマンドプロンプトで行うときもしばしばある。