エフトラEFO「UI改善機能」で実現できる、フォーム改善のテクニック

このブログ「エフトラEFOブログ」では、EFO専用ツールの有無を問わず色々なEFOのためのUI改善ノウハウを紹介していますが、なかなか改善のためのフォーム修正を実施する工数や予算が割けないということもあるかもしれません。

弊社のEFO専用ツール「エフトラEFO」では、基本の入力支援やレポート表示のほかに、様々なフォーム改善施策を簡単に実施することができる「UI改善機能」が搭載されています。

今回のエントリーでは、その「UI改善機能」を使って具体的にどのようなフォーム改善ができるのかを、過去に取り上げた改善ノウハウの例を交えながらご紹介できればと思います。

※エフトラEFOの「入力支援機能」「レポート機能」については過去記事で紹介しています。
エフトラEFO 使い方3パターン

UI改善機能とは

エフトラEFOのUI改善機能とは、その名の通り、フォームのユーザーインターフェイスをより使いやすく成績の良い形に変更する機能です。
フォーム入力のコンポーネントに留まらず、フォーム画面全体を視覚的に改善することができます。

具体的には以下のような改善メニューがあります。

エフトラEFOのUI改善機能一覧

  1. オファー画像追加
    フォーム入力を促す画像を追加
  2. 要素非表示設定
    入力の邪魔になりかねない要素を非表示
  3. 入力項目スタイル変換
    入力項目の幅や表示色を入力しやすいスタイルに変更
  4. テーブルレイアウト変換
    2カラムを1カラムに変換(スマホのみ)
  5. 選択肢の初期値設定
    選択の手間を最小化
  6. 送信ボタンスタイル切替
    目立つボタンでフォーム完了率を向上
  7. 選択肢のクリック領域拡大
    選択肢のクリックしやすさを向上

オファー画像追加

icon_ui_detail01
フォーム入力を促す画像「オファー画像」をフォーム内に追加することができます。

良いオファー画像をフォームに取り入れることで、フォームの成績は確実にアップします。
オファー画像については、過去の記事で詳しく取り上げていますね。

エントリーフォーム改善に知識は必要ナシ!誰でも知ってる○○○?
ユーザーの心をとらえて離さない!良いオファー表示、5つの条件

また、良いオファーの参考例は下記の過去記事でいくつか紹介していますので、参考にしてみてください。

EFOに取り組む際、参考にしたい【オファー表示】まとめ

要素非表示設定

icon_ui_detail02
フォーム画面内の必要のない要素を非表示に設定することができます。

フォーム画面にサイト共通のナビゲーションやサイドバー、バナー等の余計なを配置することは、ユーザーの意図しない離脱を産んだり興味がフォーム以外に移ってしまう要因になりえます。
このブログでも、フォームのページではなるべく不要なリンクを消し、フォーム専用のページレイアウトを採用することを推奨してきました。

気にするほど気づかない?エントリーフォーム改善のたった一つの大問題

また、ファーストビューになるべくフォームの項目をおさめる、という観点からも、余計なナビゲーション、リンクを消すことは効果的です。

ファーストビューを制するものはEFOを制す!スクロールを減らして直帰を防ぐ最新テクニック3選

入力項目スタイル変換

icon_ui_detail03
フォームの入力コンポーネントの見た目(デザイン)を変更することができます。

入力コンポーネントのデザインの改善については、下記の記事で紹介していますね。
快適なテキストボックスを作る、たった5つの条件

テーブルレイアウト変換

icon_ui_detail04
主にスマートフォン向けの改善メニューですが、2列のレイアウトのフォームを1列に成形することができます。

スマートフォンでは、画面の小ささや項目フォーカス時に拡大される等の特性から、ラベルを項目の左横に配置するとユーザビリティを落とす可能性があります。
スクロールの負担が少ないUX上の特徴からも、スマートフォン向けには上下にラベルと項目を配置すると良いですね。

すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因

選択肢の初期値設定

icon_ui_detail05
プルダウンやラジオボタンなどの選択式の項目の選択肢の初期値を制御できます。

初期値は適切に設定することでユーザーの手間を省くことができますが、間違った使い方をするとかえってフォームを使いにくくしてしまう可能性がありますので、注意して設定したいですね。

適切な【フォーム項目の初期値】設定で、ユーザーの入力を楽にするコツ

送信ボタンスタイル切替

icon_ui_detail06
送信ボタンは、ここにこだわることで改善率に直結する。フォーム改善の要。
エフトラEFOを使うとボタンのスタイルを変えての検証が簡単に行えます。

【EFO施策】フォーム最適化・最大の要<送信ボタン>を攻略する、9つの掟

選択肢のクリック領域拡大

icon_ui_detail07
ラジオボタン、チェックボックスでは必ず文字(=ラベル)をクリックできるように設定したいところ。
エフトラEFOを使うと簡単に設定することができます。

ラベル要素の重要性と、効果的なカスタマイズ方法
クリック領域を広げよう!フォームの使いやすさを劇的にアップする、たった3つの工夫

最後に

いかがだったでしょうか。
本日はエフトラEFOの「UI改善機能」を使ってできること(改善メニュー)をご紹介しました。

  1. オファー画像追加
  2. 要素非表示設定
  3. 入力項目スタイル変換
  4. テーブルレイアウト変換
  5. 選択肢の初期値設定
  6. 送信ボタンスタイル切替
  7. 選択肢のクリック領域拡大

エフトラEFOではご紹介したUI改善機能のほかにも、フォーム入力の手間やストレスを減らす入力支援機能やフォームの課題を発見できるレポート機能が利用でき、フォームの改善を効率的に実施することが可能です。

詳しい機能や料金、実績などについては、サービスサイトをご覧いただければと思います。

エフトラEFO サービスサイト

フォームに課題は感じているけれどなかなか改善に時間が割けないという方には、
本当ににおすすめできるツールですので、ぜひ検討していただければ幸いです。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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