【EFO実例】エフトラEFOサイトのフォーム制作時に気をつけたこと~入力補助機能編~

入力補助設定

先月リニューアルしたエフトラEFOのサービスサイトの制作時に
EFOで気をつけた点やポイントを、以下の全4回のシリーズでお伝えしています。

  1. 入力ページ編
  2. 入力補助機能編
  3. 確認ページ編
  4. 完了ページ(サンクスページ)編

今回は第2回の<入力補助機能編>として、入力補助機能についてお伝えしていきます。

題材のフォーム

今回取り上げるフォームは、前回同様こちら。
無料トライアルお申し込み|EFO(エントリーフォーム最適化)なら「エフトラEFO」
エフトラEFOの機能を30日間無料でお試し頂ける無料トライアルフォームです。

このフォームにも、もちろんエフトラEFOの入力支援機能を導入していますので
今回はエフトラEFOの機能をベースに工夫した点をお伝えしていきます。
もちろん、エフトラEFOを導入していない場合でも応用していただけるテクニックだと思います。

目次

  1. 背景色設定
  2. ガイドの設定
  3. 吹き出しの設定
  4. 入力形式のリアルタイムアラート

背景色設定

まず、前回のエントリでお伝えした通り、今回のフォームには「必須」をあらわすアイコンを用意していません。
ですので、どの項目が必須項目であるかを明確にするため、背景色設定で必須項目の色をピンク色に設定しました。
必須項目の背景色設定
どれが必須なのかは一目瞭然ですね。

また今回は「個人情報の取扱について」のチェックボックスも必須項目なので、色をつけています。
ここではプラスアルファでクリック領域を広げる工夫を行いました。

Before

チェックボックスの背景色Before
普通に色付けを行なった状態だと、このように色がつきます。
必須であることはわかりますが見栄えがよいとはいえません。

After

チェックボックスの背景色After
Label要素をブロックレベルに変更し、内側に少し余白を持たせています。また、マウスをあてたときに指のカーソルアイコン(ポインタ)になるようにスタイルを設定しています。
細かい点ですが、このようにクリック領域を広げることで少しでもユーザビリティが向上します。

ガイドの設定

項目が少ないとはいえ、ユーザーの入力モチベーションの向上につながるガイド表示

デザインはサイトのトンマナにあわせる

エフトラEFOのデフォルト設定のガイドのデザインは、今回のサイトデザインの上では浮いてしまうので、デザインの設定を変更しました。
デフォルト設定のガイド表示のデザイン
デフォルトデザインだとこのようなデザインです。

デザインを反映したガイド表示
このような見た目にデザインを変更しました。

具体的には背景色と文字サイズ、文字色を変更し、文字組みを左寄せに。
また、残り項目数の数字部分はより強調するためにフォントサイズをさらに大きくし、太字にしています。

文言も親しみやすい形に

デフォルト設定のままでも良いのですが、今回はより親しみを持っていただける形に文言を修正しました。

デフォルト設定のガイド表示文言
元の文言。次のアクションを簡潔に伝えてはいますが、今回はもう少しあたたかみを持たせたいと思います。

設定変更後のガイド表示文言
「おつかれさまでした!」という言葉をプラスしてしました。かなり雰囲気がやわらかくなりました。

このように文言はサイトのトーンに合わせてカスタマイズすると良いですね。

吹き出しの共通設定

ふきだしについても、サイトのデザインにあわせて設定を変更しました。

ふきだし
今回ラベルに「必須」と明示していないので、項目フォーカス時に「この項目は必須ですよ」という旨を伝えています。

エラーのダイアログ
エラーの時は違う色に設定しました。より目立ちますね。

入力形式のリアルタイムアラート

今回のフォームでは、その後のフローとしては申込みを受け付けた後にメールで詳細な連絡をお送りすることになっています。
もしもメールアドレスが間違っていると、通常のフローが滞ってしまうことになります。
ですので、メールアドレス形式チェックを用いてリアルタイムアラートを設定しています。
エラーのダイアログ

導入サイトURLについても、任意項目とはいえきちんとURLの形式になっている必要があります。
URLのエラーダイアログ
実際URLの形が間違っていて、サイトにアクセスできていなくても、ユーザーはURLを伝えた気でいるため、
その後のフローを円滑に気持ちよく進めるためにも入力形式チェックを導入したほうが良さそうです。

最後に

いかがだったでしょうか。
今回は、エフトラEFOサイトのフォームで入力支援機能を設定する際に気をつけた点や工夫した点をまとめてみました。

かんたんでスピーディに入力支援機能が導入できる、便利なEFOツールですが、
ちょっとした工夫をおこなうことで更に効果的なEFOが実施できるのではないでしょうか。

※さらに、確認ページ編へ続きます:【EFO実例】エフトラEFOサイトのフォーム制作時に気をつけたこと~確認ページ編~

入力補助設定

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です