フォームから離脱させないために
東京オリンピック開催まで2年を切り、近頃オリンピック関連のニュースを見ることも多くなりましたね。
そんな中、大会ボランティアの応募フォームが難しすぎると話題になっています。
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶)
私も実際に応募フォームを見ましたが、なかなかにクセの強いものでした←
エンジニアの間では「Webサイトでやってはいけないことを全部やっている」とまで言われてしまう始末。
“人のふり見て我がふり直せ”
というわけで、改めて入力フォームからの離脱をさせないために注意しておくべきことをおさらいしようと思います。
離脱する主な理由3点
理由としてはたくさんあると思いますが、参考サイトなどにも共通して取り上げられている理由としては以下の3点です。
- 入力項目が多すぎる
- 入力フォーマット・エラー箇所が不明確
- レスポンシブが成っていない、デザインが見にくい
どういった種類の入力フォーム（例：通販、就職サイト）なのかにも左右はされるとは思いますが、皆さんも一度はこういうストレスを感じて入力を止めた経験があるかと思います。
ではこれらの点をどうしたら離脱を防ぐことができるのでしょうか。
入力項目、選択肢を厳選する
手数が少ないほど、ユーザーはストレスを感じずに入力をすることができます。
そのために私たち制作側がすることは、入力項目、選択肢を厳選することです。
ユーザーのどのような情報が知りたいのか、どの情報が絶対に必要なのか。
まずはこれを洗い出すことが不可欠です。
ただし情報数が少なすぎると、個人の特定やセキュリティ面などで不都合な場合もありますので、その点も踏まえなければいけません。
多すぎても少なすぎてもダメ…難しいですね。
例えば、通販サイトであれば、以下は確実に必要な情報だと考えられます。
- 名前
- 住所
- 電話番号
- 支払方法
- 請求先情報
こうしてみると意外と少ないと思いませんか？
実際の通販フォームではもっと項目数は多いですが、なくても問題はない情報については必須項目になっていないはずです。
また選択肢を与える場合は、一般的にどれが選択されるのかを想定し、デフォルトでそれを選択しておいたり、選択率の高いものから順に並んでいることが望ましいでしょう。
以下は物件検索サイトでよく見るフォームの例です。
正しい入力をするよう誘導するUI
「何を入力すればいいのか」「全角か半角か」「-（ハイフン）などの記号がいるのか」
「入力エラーの項目はどこか」「どう直せばエラーがなくなるか」
これらはUIを工夫することでいくらでも正しい方向へ誘導することができます。
フォーマットに関してはフォームのラベルとして、複雑な場合は例などを用いて記述するだけです。
小さな一手間で離脱率が抑えられるのであれば安いものですよね。
エラー箇所についても、該当のフォームが赤くハイライトされていたり、フォームの下に明確なエラーメッセージが表示されているだけで大きな違いです。
送信ボタンを押してからエラーがわかるものもありますが、入力時リアルタイムでエラーが表示されていると、より次のステップへ行く時間の短縮になりますね。
レスポンシブ対応
現在はスマートフォン対応が当たり前の世の中ですので、レスポンシブ対応は必要不可欠です。
bootstrapやmaterializeなどのCSSフレームワークにはレスポンシブ対応のスタイルが用意されているものがほとんどなので、ありがたく活用するが吉ですね。
最後に
ここまで挙げた工夫以外にも離脱させない手段はいろいろあります。
これらのほとんどは表現パターンは違えど、もはや当たり前に実装されており、大抵のサイトではEFO(Entry Form Optimization: エントリーフォーム最適化)が行われていると思います。
少しの手間を惜しんだために離脱率が増えてしまうのは勿体無いですね。
時代と共にフォームの良し悪しは変化していくため、Web制作に携わる方は常に新しい「良さ」を求め今一度再確認しておくといいかもしれませんね。
参考
