EFO（入力フォーム最適化）で押さえておきたい9つのポイント+α

今回は、そのサイトを改善するための施策のうち「EFO（入力フォーム最適化）」で押さえておきたい9つのポイントと、スマホのEFOで特に気をつけたい4つのポイントを紹介します。

EFOで押さえておきたい9のポイント

まずは、PCとスマホ共通のEFOで押さえておきたい10個のポイントを紹介します。

1. 1つ目の項目は、入力しやすい項目にする

・入力フォームの1つ目の項目は、名前や性別など自由度が少なく、ユーザが迷わず入力できる内容にする

*フォームでは、まずは入力を始めてもらうことが重要です。*入力し始めてしまえば、入力が進めば進むほど、離脱してしまうと自分の作業が無駄になってしまいもったいないと感じるようになります。

2. 何のためのフォームかを明確にする

・「会員登録」「問い合わせ」などのフォーム名は大きく表示する

ユーザは目的をもってフォームに到達しますが、*自分がしたいと思ったアクションと異なる場合には離脱します。*

例えば、資料請求をしようと思ったのに「お問合わせフォーム」となっていて、問合わせ内容のセレクトボックスに資料請求という項目があるフォームでは、資料請求をしようと思ったユーザが離脱してしまう可能性があります。

・入力フォームの入力が完了し、送信ボタンを押した後のフローを明確にする

・自動返信メールが来る、担当者から返信があるなどを伝える

「お問合わせ」フォームの場合は、メールや電話などどのように連絡が来るのか、いつ連絡が来るのかという点はユーザにとって気になるポイントです。

「予約」フォームの場合は、フォームを送信すれば予約が完了するのか、入金後に予約が完了するのか、確認の電話がかかってきて完了するのかなど、様々なパターンがあり、ユーザが不安に思うポイントとなるため、明確にしておく必要があります。

3. 入力例や入力形式を明記する

せっかく、ユーザが入力しようとしているにも関わらず、*入力方法がわからないという理由でフォームを離脱してしまうのはもったいないです。*

・入力例を明記する

項目の近くに例を記載したり、デザイン上スペースが無い場合は、HTMLのプレイスフォルダーを利用して項目内に記載することも可能です。

・入力形式はできるだけ制限しないようにする

電話番号は半角で‐（ハイフン）あり（例：「080-1234-1234」）となっている場合など、全角文字が入ってしまう事によるエラー、ハイフンではなくマイナスであることによるエラーなど、細かい部分でユーザにストレスを与えてしまいます。

システム側で、半角・全角を変換するなどして、ユーザが気にしなければならない入力形式の制限は極力減らしましょう。

4. 最低限どの項目に入力すれば良いかを伝える

・「必須」「任意」をわかりやすいマークで明記する

答えにくい任意項目によって、ユーザが離脱してしまうことを防ぎます。

・「必須」項目を近くにまとめたレイアウトにする

ユーザの視線の移動を減らしたり、入力項目は任意をなくし、必須のみに絞り込むことも有効です。

5.入力エラーをリアルタイムで伝える

・項目毎にエラーチェックを行なう

1つの項目を入力し終わって、次の項目を入力し始める前に、吹き出しなどを利用してエラーを通知することで、全部入力しおわってエラーが複数箇所に出て離脱してしまうという状況を減らすことができます。

・ユーザが確認／送信ボタンをクリックする際は、エラーがない状態になっているようにする

入力が完了して確認／送信ボタンをクリックしてエラーが出たときの落胆は、ユーザが離脱する最大の要因になります。

6.離脱要因となる不要なリンクを減らす

・フォームは入力要素以外の要素は極力いれず、シンプルなフォームにする

入力完了率を上げるには、ユーザが離脱する要因を減らすことが大切です。*グローバルナビゲーションを用意することはサイト制作の大原則ですが、入力フォームにおいて、それは当てはまりません。*

7.クリアボタン、キャンセルボタンはなくす

・クリアボタンやキャンセルボタンは外す

送信ボタンを押そうとしたら、隣にあるクリアボタンを押して入力内容が全て消えてしまった。となれば、ほぼ全ての人が面倒になって離脱してしまうでしょう。

*そもそも、クリアボタンを設置する意味が無い場合がほとんどなので、設置している場合は外しましょう。*

8.入力の手間を減らす

・郵便番号を入力することで、住所が自動で入力されるようにする

・かな入力を自動で入力されるようにする<br></b>

郵便番号による住所の自動入力は現在では、多くのフォームに導入されているため、もはや無いと不親切であると認識するユーザも増えています。

9.送信ボタンは大きく、具体的な文言にする

・何をする／何が起きるボタンなのかをわかりやすく表記する

・送信ボタンは大きく・重要な色を付ける

・戻るボタンを用意する場合、送信ボタンとのメリハリを付けて分かりやすくする

スマホのEFOで特におさえておきたい4つのポイント

1. 項目は大きくする

スマートフォンは指で操作するデバイスです。当然、指の大きさの分だけマウスよりも緻密な操作が難しくなります。*指でタップする必要のあるフォームの入力項目は、文字サイズを大きくするなどして、タップエリアが大きくなるようにデザインしましょう。*

また、ラジオボタンやチェックボックスには、ラベル文言をlabelタグで囲むことで、タップ領域を大幅に広げることができます。

2.  余白を充分に保たせる

タップ要素同士が隣り合っており、誤って隣接したタップ要素を選択してしまったという経験をお持ちの方は多いのではないでしょうか。

*指で快適に操作するためには、タップエリアを広げるだけでなく、項目同士の余白も適切に確保しましょう。*

とくにチェックボックスやラジオボタンの羅列では注意したいポイントです。

3.  負担の少ない入力形式を使う

スマートフォンでのフォーム入力は、ユーザにとってストレスとなる可能性が高いです。特に「テキスト入力」の負担が大きいと言えます。

できるだけ入力の負担を減らすためには、下記のようなテキスト入力に替わる入力コンポーネントの利用や入力補助機能を導入すると効果的です。

・選択式（セレクトボックスやチェックボックスなど）で代用する

・入力サジェストを実施する（メールアドレスなど）

・自動入力機能を使う（ふりがなや住所など）

・GPSを利用した位置情報入力

4.  入力形式に合ったキーボードを表示する

ただでさえ面倒なテキスト入力のときに、英字・かな・数字など入力内容にあわせて都度都度キーボード表示を切り替えるのはユーザにとって負担です。

しかし、スマートフォンフォームでは、HTML側で指定することで項目フォーカス時に表示するキーボードを切り替えることができます。

*電話番号ならば電話番号用のキーボード、メールアドレスであればメール用など、専用のキーボードを表示するようにしましょう。*

まとめ

今回はEFOのポイントを、両方に共通するもの、スマホ向けのものに分けて紹介しました。自分の関わっている入力フォームがユーザにとって使いにくいものになっていないでしょうか。

次回は、HTMLタグの挿入だけで簡単にEFOが行えるツールを紹介します。