スマホを意識したEFOで、入力フォームのストレスを軽減
2022.05.12 Posted by hosobuchi.m
Webサイトにおいてメールマガジンの会員登録や資料請求、商品・サービス決済情報、お問い合わせなどで、必ず利用するのがお問い合わせフォームです。Web担当者なら、どうすれば多くのスマホユーザーが入力フォームを離脱なく利用してくれるようになるか、試行錯誤の日々かと思います。
入力フォームは、ユーザーにアクションしてもらう大事なものだからストレスなく使ってもらいたいですよね。特に、コンバージョンに大きな影響を与えるものなら、最大限良いものを提供したいと思うでしょう。
今回は、スマホユーザーに使ってもらうための入力フォーム最適化(EFO)について、さまざまな方向から考えてみたいと思います。これから入力フォームの設置やデザインの改善を考えている方は、ぜひ参考にしてください。
入力フォームの目的
入力フォームは、Webサイトの運営者によって、さまざまな目的で設置されます。そのため、目的に合った入力フォームを設置することが大事です。逆に目的と合わない入力フォームを設置してしまうと、ユーザーがすぐに離脱してしまって、新規会員登録や資料請求などの必要なアクションを得づらくなります。
言い換えれば、素晴らしいコンテンツを作成し、集客が上手くいっていても、EFOのレベルが低く、離脱率が高ければ、Webサイトからの売り上げは伸びません。そのため、目的とあった入力フォームの設置やデザインの変更が必要となります。
たとえば、コーポレイトサイトでは、お客さまのご要望を聞くためのお問い合わせフォームをよく見ます。他にも、ECサイトではキャンペーンなどのための応募フォームや、販促目的のアンケートフォーム、会員登録をするためのフォームもありますね。
これらの入力フォームには、それぞれ設置目的があるわけですが、次にユーザーにアクションしてもらいやすくなるデザインについてご説明します。
スマホで入力することを考えたデザイン
EFOで大事なことは、スマホを意識したWebデザインにすることです。ユーザーの多くは、スマホから入力フォームにアクセスするため、使用デバイスに合わせてEFOを行っていきます。基本的には、どのサイトでもスマホ対応しておきます。
忙しい営業マンも「資料請求くらいは移動中にやっておこう」と思ったり、Webサイトの閲覧者よりフォーム利用者はスマホ率が高かったりする場合もあるからです。
実際に、スマホを意識したEFOを行う場合、どのような要点を押さえておくべきでしょうか。EFOにおいて重要な要点は、次のとおりです。
- 文字数は最小限に抑える
- 不要と思われる情報はすべて消しておく
- 画面の小さいスマホでもタップしやすい操作性を実現する
- フォームの開始位置から内容確認までの距離を長くしない
- 選択形式で簡単に選べるようにする
- 面倒に感じないように入力省略機能をつける
- 間違ったらどのように修正すべきなのかがすぐわかるようにする
- 会員登録やログインがしやすくする
- キーボードが自動変更されるようにする(番号の時は番号専用)
上記のポイントを押さえるだけでも、フォームのデザインをより良いものへと大きく改善できます。
EFO実践のための具体的な方法
EFOにおける代表的な要点についてご説明しました。次に、EFO実践のための具体的なデザインの変更ポイントをご紹介します。
- 1カラムのレイアウト(質問項目と回答欄を縦に並べて、すっきりとした印象を与える)
- チェックボックスやラジオボタンを立て並びにして、使いやすさを高める
- テキスト量はなるべく少なめに(電話番号を記載してください→電話番号)
- その他のご要望などのテキスト入力項目はなるべく少なくする
- 入力欄や登録ボタンをタップしやすいサイズに変更する
- 「必須項目」はマークで締めすのではなく、項目のところに「必須」と書く。
- 郵便番号や電話番号はハイフン不要とする
- エラーメッセージは、一番上と該当の修正箇所、両方に出す
- メールアドレスやパスワードの入力項目を1つにする(同じ2つの項目は、必要ない)
- GoogleアカウントやSNSアカウントで簡単に会員登録やログインができるようにする
EFOの改善は、会員登録や売り上げといった結果につながりやすいケースが多いです。ひとつでもできていないポイントが見つかったら、デザインについて見直していきましょう。
まとめ
今回は、EFOによる入力フォームの改善の必要性や具体的な実践ポイントについてご説明しました。入力フォームへの対策は、コンテンツによるSEO対策と比べて、話題になりづらくしっかりと対策できていない会社も多いでしょう。
しかし、スマホを意識した入力フォームへとデザインを改善すれば、間違いなくユーザーが目的のアクションを起こしやすくなります。改善効果が得やすいポイントなので、他サイトを参考にしながらできることを始めてみましょう。
関連記事こちらの記事も合わせてどうぞ。