本記事は【改善実例】フォーム改善、実際にやってみました[Vol.1]～現状分析編～の続編としてお届けします。前の記事をまだお読みいただいていない場合は、まずはそちらを一読いただくことをおすすめします。
前回に引き続き、弊社コーポレートサイトのお問い合わせフォームを題材に、改善を進めていきたいと思います。
前回は「エフトラEFO」のレポート機能を使った離脱ポイントの解析と、フォーム改善15カ条と照らしあわせることでフォームの現状を分析しました。
今回の記事では明らかになったフォームの現状から、問題はどこにあるのかさらに深堀りしていきます。
現状分析でわかったこと
現状分析を行ったことで判明したのは下記の点でした。
解析より
- 確認ページの離脱率が非常に高い
エラー画面および確認画面から大量のユーザーを逃してしまっている - フォーム直帰率、入力途中離脱率は問題なし
15カ条のなかで達成されていなかった条件
- 何のためのフォームかを伝えるべし
- ファーストビューに収めるべし
- 離脱要因となる不要なリンクを減らすべし
- 他のCV（コンバージョン）手段があれば伝えるべし
- 送信完了の勘違いをなくすべし
- 送信ボタンは大きく、具体的な文言にすべし
まずは、問題箇所を観察
今回多くの離脱を生んでいるのは確認ページとエラーページだとわかっています。そこで、まずは問題のページを観察してみます。
確認ページ
まずは、問題の確認ページです。
確認画面。※ページのヘッダー、サイドバー、フッターを除く。
送信ボタンの配置
確認ページを観察してみて、明確に課題だと感じたのは送信ボタンです。
ボタンが今回の最大の離脱要因である可能性も高いと感じました。
送信ボタン
理由は、ボタンの配置です。
昨今のフォームは、右側に次に進むアクションボタン、左に前のステップへ戻る導線が設けられていることが多いのですが、このフォームは配置が逆になってしまっています。
このことが誤操作を引き起こし、ユーザーが送信をあきらめたり、送信したと勘違いしてしまうケースが発生している可能性はあります。
そのほかにも、現状の送信ボタンには下記のような課題がありそうです。
- 大きさが不十分
- デザインが目立たない
- 差がない（次に進む方を目立たせるべき）
ヘッダー4点セット
このフォームには「この画面は何か」「何をしてもらいたいか」をあらわす情報が欠如しています。
「お問い合わせ」のタイトル意外何の言葉も無い
もちろん、入力からの流れからすると、今自分が確認ページにいるということをユーザーは理解できるのですが、それにしてもあまり親切とはいえません。
むしろ、あまりにも淡白すぎてユーザーが不安になってしまう可能性もなきにしもあらず。
ここではこのページでは、ユーザーに入力内容を確認してもらい、送信してもらうという行動を促すべきです。
不要な情報が表示されたままになっている
細かい点ではありますが、ユーザが選択していない、確認に不必要な欄のタイトルが表示されたままになっています。
空欄が気になって戻ることは大きなロス
空欄があると、ユーザーは気になるもので、確認のために戻る…などと無駄な遷移を引き起こすことにならないよう、不必要な情報は載せないようにしたいところです。
エラーページ
確認画面ですでに致命的な問題点が見つかっているのですが、行き続き疑惑のページを確認していきます。
お次はエラーページです。
すべての項目が空欄の状態でエラーを表示させた場合
長い
長い。という感想と持った人も多いのではないでしょうか。
上のキャプチャでは、すべての項目についてエラーを表示させているため余計縦に長く感じるのですが、
エラーページが出て、延々とスクロールしなければならないのは苦痛です。できるだけ余計に縦に長くならないうように設計したいところです。
なお、ヘッダーなどを削除してしまうのも一つの手かもしれません。
冒頭にも一言あるとよいか
エラーが該当の位置に表示されている点はとても親切なのですが、
該当の位置までスクロールしないと、エラーの内容がわからないだけでなく、冒頭に何の文言もないため、最初は何が起こったのか（今どこにいるのかも）すらわかりません。
エラーが起こっている旨を冒頭のどこかで示すと良いでしょう。
そもそも、エラーページに遷移させない
極力エラーページに遷移させないことが大切です。
そのためには入力ページでの入力支援機能の強化、とくにサブミットブロックが効果的です。
15カ条のなかで、確認
もちろん、15カ条はできればすべて達成されるようにしておきたいのですが、
- 何のためのフォームかを伝えるべし
- ファーストビューに収めるべし
この2点はおもに直帰対策
とくにボトルネックである確認画面や送信途中離脱に関係のある条件をピックアップしてみます。
まとめ
今回の記事では、課題となる箇所を観察しながら、フォームの問題点をさらに深堀りしてみました。
仮説をまとめると、大きく下記の３つです。
- ボタンに大きく改善の余地あり
- フォームの冒頭に文言が必要
- 不要な情報が表示されていることで、離脱機会や縦長さを助長
次回のこのシリーズでは、いよいよ改善に着手していきますので、お楽しみに。
※次回記事はこちら：【改善実例】フォーム改善、実際にやってみました[Vol.3]～UI改善編～
