製造業　英語Webサイトお問い合わせフォーム改善事例：分析編

こんにちは ポータル・ジャパンの久保です。

今回は2回に分けて弊社が行った英語Webサイトお問い合わせフォーム改善の事例をお伝えさせていただきます。

対象のWebサイトは以前弊社でお客様の声をいただいた製造業のお客さまです。

今回は「WEBサイト解析ツール、クリックテールを使って英語サイトのボトルネックを改善しよう！」の記事でもご紹介させていただいたサイト改善ツールクリックテールを活用してのフォーム改善です。 (このクリックテールはかなり細かくユーザーの動きを確認できるのでおすすめです。なんとなくではなくてきちんと数値を持って改善を行うことができます。) さて、そもそも今回のお問い合わせフォーム改善を行った背景ですが、お客様のアクセス解析をしたところ下の図のようなポイントに気付きました。 ※数値は内容を損なわない程度に改編してあります。(以降出てくる数値も同様です) ①Webサイトへのアクセス ②お問い合わせフォーム ③確認ページ ④完了ページ のお問い合わせが完了するまでのファネルです。 注目していただきたいのが、

「確認ページ」から「完了ページ」までの遷移が40%

という数値です。 一通りフォームの項目を埋めて、確認して、最後にお問い合わせしよう、という段階のユーザーにも関わらず、40%しか完了していません。100人いたら60人ものユーザーが最後の段階で離脱してしまっています。これは大きな問題です。見つけた瞬間に「これは改善しなくては！」と思い、今回の改善に至りました。

まず、こちらがフォームの入力ページです。今回の問題は確認ページですが、せっかくなのでこの入力ページも改善しました。

まず、ボトルネックまたは、誤解を生んでいる可能性の高い、確認ページ（エラー時）をチェックしました。
すると、文字化けしているではないですすか！また、エラー箇所が書いてありますが、その都度、入力ページに戻らないとエラーを直せません。また、このページにしかエラー箇所の記載が無いので入力ページに戻っても「どこがエラーだったっけ？」となってしまい、入力ページとエラーページをいったりきたりしないと修正できません。あまりにもユーザーにとって不親切で手間だと感じさせてしまい、離脱を誘発している可能性が高いものでした。

最後に確認ページ(確認時)です。 一見普通に見えますが、下部のボタンの文言が「Correct」と「It transmits」となっています。皆さんは、すぐに各ボタンの意味か分かりますか？私は意味が分からず、弊社の外国人スタッフも同意見でした。項目の改善に加え、英語表現の見直しも必要そうでした。

ざっと見てもいくつか改善点が挙がりましたが、最終的にユーザーの動きを見てどうするか決めたかったのでクリックテールの以下の機能を活用して分析しました。
●マウスヒートマップ ⇒ユーザーがどの部分にマウスを載せているか(どこをよく見てるか)
●フォーム解析(ドロップレポート) ⇒フォームのどの項目で離脱しているか
●フォーム解析(タイムレポート) ⇒フォームのどの項目の入力に時間がかかっているか 1つずつポイントをご説明します。

●マウスヒートマップ
注目したいポイントに番号を振っています。
①グローバルナビゲーションがよく見られ、クリックされている。
②サイドナビゲーションがよく見られ、クリックされている。
→お問い合わせするつもりのユーザーがナビゲーションから別のページに遷移してしまっている。
③resetボタンがクリックされている。
→入力した情報を誤ってリセットしてしまっているユーザーがいる。 (リセットボタンと確認ボタンのデザインもほとんど同じなのでなおさらだと思います)

●フォーム解析(ドロップレポート)
①フォーム入力を開始したユーザー
②「次へ」ボタンをクリックしたユーザー

③「次へ」ボタンをクリックしたが失敗したユーザー
④実際に次のページ(確認画面)に移動したユーザー

 となります。
ここでのポイントは②以降は離脱が無い、ということ。 但し約84%のユーザーが最初のステップで離脱しているので、「一度入力を開始したユーザーは離脱せず最後まで情報を入力する確率が高いが、入力するまでの敷居が高い(入力せずに離脱させる要因が多い)」ことが想定されます。

マウスヒートマップとフォーム解析(ドロップレポート)を使用した分析から、離脱の要因となる、グローバルナビゲーションとサイドナビゲーション、また不要なリセットボタンを全て削除することにしました。お問い合わせフォームまで来たらお問い合わせすることだけに集中してもらいたいからです。 ●フォーム解析(タイムレポート)
どの項目にどれだけ時間がかかっているかを計測する機能です。具体的な時間は消していますが、オレンジの番号は入力に時間がかかった箇所、逆に青の番号は入力に時間がかからなかった箇所となります。

オレンジの箇所は主に、会社のzip code、会社の住所等が該当しました。会社の住所を入力する際には暗記していない限りは基本的に確認してから入力します。そのため、入力に時間がかかります。

青の箇所は自分の名前や会社の電話番号等が該当しました。自分の名前を入力するのに時間がかかるユーザーはいませんね。会社の電話番号も住所に比べると比較的覚えている人も多いかと思いますし、確認するといってもそこまで時間はかかりません。ある程度妥当なデータかと思います。

このデータを基に改善を行うのですが、入力に時間がかからない青の項目をフォームの上部に、時間がかかるオレンジの項目をフォームの下部にできる限り移動しました。フォーム解析(ドロップレポート)のデータにもありましたが、人は一度入力を始めると最後まで入力する傾向にあります。そして基本的にフォームの上から順に入力すると思いますが、上部の方に入力に時間のかからない、ハードルの低い項目を置いておき、時間のかかる項目は最後の方に設置することにより、「会社の住所入力するの面倒だな、まぁでもここまできたから最後まで入力するか」と思わせることが目的です。

また、最後にフォームの機能も見直しを行い、
「入力している項目が一目で分かるようにアクティブフィールドをハイライトする」
「リアルタイムにエラーを表示する」
機能を追加することにしました。
特に、「リアルタイムにエラーを表示する」を行うことによってこれまでのフォームにあった「エラーを確認するための確認ページ」が不要になるので今回の課題であった確認ページからの離脱を大幅に減らすことができるかと考えています。
以上、今回の改善点のポイントをまとめると、以下のようになります。

●グローバルナビゲーション、サイドナビゲーションからの離脱が目立つので削除
●不要なリセットボタンを削除
●項目の変更、移動
●英語表現の見直し
●機能の見直し

現在実際にフォームを改善している最中なので、完了し、改善データが集まりましたらまたご報告させていただきます。 どうぞお楽しみに！

参考：株式会社オーサカステンレスWebサイト ・株式会社オーサカステンレス様 お客様の声