triBlog

トリアナのブログ。

webサイト制作をお考えなら、株式会社トリアナにお任せください。

WEB制作
2019.5.16

EFO(入力フォーム最適化)って知ってる?コンバージョン率向上のための7つのチェック項目

2019.5.16 フォーム画像
キャベツとレタスと白菜の違いが分かりません。
ライター画像
おくだ

こんにちは、奥田です。

今回はWEBサイトにおける入力フォームのお話です。

企業サイトやイベントページなど、様々なWEBサイトに設置されている入力フォーム。

しかし、中にはユーザーがイライラしてしまうようなフォームも….!

そこで今回はユーザーフレンドリーな入力フォームを目指す人に向けて「EFO」について解説します。

EFOの意味と効果

意味:EFO(Entry Form Optimization)

EFOはEntry Form Optimization(入力フォーム最適化)の略です。

要は入力フォームをユーザーにとってより楽に分かりやすくしよう!という施策のことです。

効果:コンバージョン率向上

フォームの入力が楽になる = ページ離脱率が下がる

と考えられます。

ページ離脱率が下がるということは、

申し込みや問い合わせ率(コンバージョン率)が上がる!ということに繋がるわけなんです。

でも、具体的にどうやったらいいの?と思いますよね。

そんな声に応えて、7つのチェック項目を用意しました。

7つのチェック項目

1,必須・任意の表示

いわずもがなですね。これはもちろん必要です。

必須任意の表示がなければ、ユーザーはどの項目を優先的に埋めればよいか分からなくなります。

ほとんど場合、ユーザーは少ない入力で済ませたいと考えるものです。

明示のための工夫として、必須と任意を色分けする方法があります。

そしてユーザーが必須項目を入力しないまま送信しないように、jQuery Validate Pluginなどで制御しましょう。

2,autocomplete属性の追加

意外と軽視されがちなautocomplete属性。

しかし、inputタグにautocomplete属性をつけることには意味があります。

autocomplete属性をつけることで、ブラウザが「今これを入力しようとしてるだろ!」と言わんばかりに

候補を表示してくれるようになります。自動補完ってやつですね。

やり方はシンプル。inputタグに書き足すだけ。

これだけで電話番号の入力候補が現れます。

tel以外にもfamily-nameで苗字、given-nameで名前、emailでメアドなど、様々な値があります。

ちなみにname属性にそれらが設定されていた場合、autocompleteは”on”とするだけでよいです。

autocompleteのその他の値に関しては、

WEB業界ではお馴染みのMDN web docsさんがまとめてくださっています。

3,エラーメッセージの内容と場所

エラーメッセージにも工夫の余地はあります。

まず不親切なエラーメッセージの例がこちら。

上部に全てのエラーメッセージを出してしまうと、

ユーザーがエラーメッセージをもとに未入力の項目を探さなければいけません。

それでは非常に手間なので、以下のようにすると良いでしょう。

未入力フォームの真下に表示すれば一目瞭然です。

エラーメッセージの場所はjQuery Validate Pluginなどで設定可能です。

4,MaskedInputの導入

できるならエラーメッセージは減らしたいところ。

jQueryプラグインのMaskedInputを導入すれば、

ユーザーに一発で正しい入力をしてもらうために最初から望む書式に強制することができます。

入力欄にフォーカスを合わせるとすでにハイフンが現れています。

「1050000」と入力したら勝手に「105-0000」となります。

MaskedInputのダウンロードは以下のGitHubから行えます。

5,住所の自動入力

MaskedInputと組み合わせて使用すると便利なのが「ajaxzip3」

郵便番号を入力すると、それを元に住所をはじき出してくれます。

この形式の他に、郵便番号のinputを3桁と4桁に分けたり、住所の出力を都道府県と市町村に分けたりすることもできます◎

公式が日本語に対応している上に、分かりやすい解説記事も充実しています。

6,プレースホルダーの削除

一見、ユーザービリティを高めているように感じるプレースホルダー。

多くの場合、郵便番号や電話番号の形式(ハイフン有りか無しか)をユーザーに知らせるために使われます。

しかしフォームのinput内にすでに文字(プレースホルダー)があることで、

送信ボタンを押す前にユーザーは未入力の項目に気づきづらくなるという欠点もあります。

入力すべき形式はMaskedInputでも誘導できるので、好みや状況に応じて使い分けると良いでしょう。

7,離脱防止ダイアログの表示

フォームの使いにくさだけが離脱の原因ではありません。

間違って戻るボタンを押したり、ウィンドウを閉じたりした時もです。

それを未然に防ぐ方法として「離脱防止ダイアログ」があります。

このアラームはページを離れようとした場合に表示されます。

実装方法は非常にシンプルで下記の3行をHTMLに埋め込むだけです。

しかし、このままではフォームを送信する際のページ移動でもアラームが出てしまいます。

そこで、フォーム送信時にこのアラームを無効化する記述を追加します。

「送信ボタンをクリックしたとき(onclick)、アラームの処理を無効化する」という意味のコードです。

あとがき

フォームは専用のページを作ることで誤クリックなどでの離脱を防げますが、

設置するサイトの構成によってはそうすることができないかもしれません。

フォームのユーザビリティを高めるためには基本的なポイントを押さえることが重要です。

今回紹介した7つのチェック項目をぜひご活用下さい(⌒▽⌒)

記事を書いた人

ライター画像
おくだ インターン

湯布院出身のトリアナ大好きマン。いつも髪をグシャグシャにしながらフロントエンド業務をしています。サムネはバレンタインに描いていただきました。自炊を始めたよく食べるミニマリストです。

ライター画像
おくだ インターン

湯布院出身のトリアナ大好きマン。いつも髪をグシャグシャにしながらフロントエンド業務をしています。サムネはバレンタインに描いていただきました。自炊を始めたよく食べるミニマリストです。

ページ上部へ