本日は以前からお伝えしている、弊社のコーポレートサイトのお問合せフォームを改善するシリーズの続きです。
過去記事：
【改善実例】フォーム改善、実際にやってみました[Vol.2]～問題解析編～
【改善実例】フォーム改善、実際にやってみました[Vol.1]～現状分析編～
今回は「UI改善編」として、前回までに導き出した下記のポイントを実際に改善していきたいと思います。
- ボタンに大きく改善の余地あり
- フォームの冒頭に文言が必要
- 不要な情報が表示されていることで、離脱機会や縦長さを助長
なお、せっかくですので当社EFOツール「エフトラEFO」の「UI改善機能」のメニューをベースに改善を進めていきたいと思います。
UI改善機能について
フォーム入力のコンポーネントに留まらず、フォーム画面全体を視覚的に改善するためにエフトラEFOに備わっている機能で、下記のような改善メニューがあります。
- オファー画像追加
- 要素非表示設定
- 入力項目スタイル変換
- テーブルレイアウト変換（スマホのみ）
- 選択肢の初期値設定
- 送信ボタンスタイル切替
- 選択肢のクリック領域拡大
※詳しくは過去記事エフトラEFO「UI改善機能」で実現できる、フォーム改善のテクニックでもお伝えしているので参考にしてみて下さい。
ボタンの改善
まずはインパクトの大きそうなボタンから改善していきます。
改善前の送信ボタン
UI改善機能の送信ボタンスタイル切替のメニューを利用して改善できます。
何の装飾もないボタンでしたが、背景色、フォントサイズ等のスタイルを変更することで下記のように改善できました。
送信ボタン 改善後
改善のポイント
- ボタンの左右の位置を逆に（次に進む方を右側に）
- 文言をよりわかりやすいと思われる形に変更
- 送信ボタンの背景色、余白、文字のサイズ、色、太さのスタイルを追加し、目立つように
- 逆に前に戻るボタンは背景色をなくし、色も目立たないように変更
- マウスオーバーでのポインタや背景色変更のスタイルを追加し、ボタンをより押しやすく
フォーム冒頭の改善
次に、そっけない印象を与えるフォームの上部を改善していきます。
オファー画像追加でフォームの上部にコンテンツを挿入してみることにします。
まずは、画像を用意します。
UI改善機能でオファー画像追加を実施する場合は、画像素材をあらかじめご用意いただく必要があります。
今回はこのようなオファー画像を作成しました。確認画面なので、文字だけのシンプルな構成としています。
オファー画像
フォーム上部に挿入
用意した画像を挿入しました。たった一言でも文言があるのと無いのとでは大きな差です。
オファー画像挿入後
不要な情報を削除
不要な情報やリンクが表示されていることで、離脱機会や縦長さを助長してしまいます。
ですので最後に、要素非表示設定で不要な要素を削除していきます。
具体的にはサイドバー、フッターの一部、パンくずを非表示にしていきます。
かなりスッキリした印象に
その他実施した修正
今回のフォームではヘッダーが縦のスペースを割いてしまっているため、部分的に非表示にしつつ、目立たない形にスタイルを調整しました。
さらに今回は、確認画面で選択していないサービス内容の欄を表示しないようにフォーム側のHTMLも修正してみました。
まとめ
今回の改善でのビフォー・アフターは以下のようになりました。
Before（確認ページ）
After（確認ページ）
いかがでしょうか？
かなりページ全体がすっきりし、あまりスクロールしなくても送信ボタンまでたどりつけるようになっています。
また、ボタンがかなり目立っているために、つぎのアクションが明確となり、あまり考えなくても次に進めるようになったのではないでしょうか。
余計な情報はなくし、重要な箇所（ボタン）は目立たせ、ページにメリハリをつけるとフォームは生まれかわります。
エフトラEFOのUI改善機能を使うとこのような改善が容易に実施できます。
ご興味のあるかたは、ぜひご相談いただければと思います。
次回予告
次回はシリーズ最終回。今度は同じく「UI改善機能」を使いながら、スマートフォンに向けた最適化・改善をテーマにお届けします！
