先月リニューアルしたエフトラEFOのサービスサイトの制作時に
EFOで気をつけた点やポイントを、以下の全4回のシリーズでお伝えしています。
- 入力ページ編
- 入力補助機能編
- 確認ページ編
- 完了ページ（サンクスページ）編
今回は第2回の＜入力補助機能編＞として、入力補助機能についてお伝えしていきます。
題材のフォーム
今回取り上げるフォームは、前回同様こちら。
エフトラEFOの機能を30日間無料でお試し頂ける無料トライアルフォームです。
このフォームにも、もちろんエフトラEFOの入力支援機能を導入していますので
今回はエフトラEFOの機能をベースに工夫した点をお伝えしていきます。
もちろん、エフトラEFOを導入していない場合でも応用していただけるテクニックだと思います。
目次
背景色設定
まず、前回のエントリでお伝えした通り、今回のフォームには「必須」をあらわすアイコンを用意していません。
ですので、どの項目が必須項目であるかを明確にするため、背景色設定で必須項目の色をピンク色に設定しました。
どれが必須なのかは一目瞭然ですね。
また今回は「個人情報の取扱について」のチェックボックスも必須項目なので、色をつけています。
ここではプラスアルファでクリック領域を広げる工夫を行いました。
Before
普通に色付けを行なった状態だと、このように色がつきます。
必須であることはわかりますが見栄えがよいとはいえません。
After
Label要素をブロックレベルに変更し、内側に少し余白を持たせています。また、マウスをあてたときに指のカーソルアイコン（ポインタ）になるようにスタイルを設定しています。
細かい点ですが、このようにクリック領域を広げることで少しでもユーザビリティが向上します。
ガイドの設定
項目が少ないとはいえ、ユーザーの入力モチベーションの向上につながるガイド表示。
デザインはサイトのトンマナにあわせる
エフトラEFOのデフォルト設定のガイドのデザインは、今回のサイトデザインの上では浮いてしまうので、デザインの設定を変更しました。
デフォルトデザインだとこのようなデザインです。
このような見た目にデザインを変更しました。
具体的には背景色と文字サイズ、文字色を変更し、文字組みを左寄せに。
また、残り項目数の数字部分はより強調するためにフォントサイズをさらに大きくし、太字にしています。
文言も親しみやすい形に
デフォルト設定のままでも良いのですが、今回はより親しみを持っていただける形に文言を修正しました。
元の文言。次のアクションを簡潔に伝えてはいますが、今回はもう少しあたたかみを持たせたいと思います。
「おつかれさまでした！」という言葉をプラスしてしました。かなり雰囲気がやわらかくなりました。
このように文言はサイトのトーンに合わせてカスタマイズすると良いですね。
吹き出しの共通設定
ふきだしについても、サイトのデザインにあわせて設定を変更しました。
今回ラベルに「必須」と明示していないので、項目フォーカス時に「この項目は必須ですよ」という旨を伝えています。
エラーの時は違う色に設定しました。より目立ちますね。
入力形式のリアルタイムアラート
今回のフォームでは、その後のフローとしては申込みを受け付けた後にメールで詳細な連絡をお送りすることになっています。
もしもメールアドレスが間違っていると、通常のフローが滞ってしまうことになります。
ですので、メールアドレス形式チェックを用いてリアルタイムアラートを設定しています。
導入サイトURLについても、任意項目とはいえきちんとURLの形式になっている必要があります。
実際URLの形が間違っていて、サイトにアクセスできていなくても、ユーザーはURLを伝えた気でいるため、
その後のフローを円滑に気持ちよく進めるためにも入力形式チェックを導入したほうが良さそうです。
最後に
いかがだったでしょうか。
今回は、エフトラEFOサイトのフォームで入力支援機能を設定する際に気をつけた点や工夫した点をまとめてみました。
かんたんでスピーディに入力支援機能が導入できる、便利なEFOツールですが、
ちょっとした工夫をおこなうことで更に効果的なEFOが実施できるのではないでしょうか。
※さらに、確認ページ編へ続きます：【EFO実例】エフトラEFOサイトのフォーム制作時に気をつけたこと～確認ページ編～
