こんにちは。ノリ子です。
前回、ご紹介した事例の続きで、STEP2,3の内容をご紹介いたします。

出典元:http://contentverve.com/lead-form-optimization-case-study/

STEP2 配達情報のUXを変更

image1
引用:http://contentverve.com/wp-content/uploads/2014/06/lead-form-step-2.png

1. ボタンはSTEP1と同じく黄色の大きいボタンに変更しました。
2. input項目を22個→6個に減らしました。

見た目からも項目数が少なく、すっきりしていますね。

改修前フォームは年、月、日をそれぞれ入力しないといけないですが、改修後はカレンダーボタンが項目の中に表示されており、視認性も高まりました。

カレンダーボタンがあることで入力が簡単にできるイメージが湧きます。

やはり項目数が多いとユーザはカーソルインアウトの操作がその分増えますので、項目数を減らしたことは、入力の手間を大幅に省けたと思います。

STEP3 顧客連絡情報の入力ページを変更

image2
引用:http://contentverve.com/wp-content/uploads/2014/06/Lead-form-step-3.png

1. STEP1、STEP2と同じく送信ボタンを大きく変更しました。
2. input項目数を6個→4個に減らしました。
3. 項目の配置を1行に1項目から、1行に2項目に変更しました。
結果入力ページの長さが短くなり、改修前より入力負担が軽減されています。
4. ボタンの文言を変更しました。
「お支払い」を強調する「pay off」の文言を“Get free, no-obligation shipping quotes(無料見積もり)”に変更しました。

ヘッダーの変更

image3
引用:http://contentverve.com/wp-content/uploads/2014/06/Lead-form-header.png

ヘッダーのコピーを改修前フォームでは“ Fill out form – it only takes a moment(フォームにご記入ください – あまり時間はかかりません)”でしたが、 “Get free, no-obligation shipping quotes(無料見積もり)”に変更しました。追加で更にSTEP数も記載しました。

STEP数を記載することは、日本では当たり前になっています。そうすることでユーザに安心感を与えているかもしれませんね。

本記事の著作権は全て出典元にあります:
http://contentverve.com/lead-form-optimization-case-study/

【海外記事】3ステップフォームの改善事例 Part1