ツールなしでもここまでできるフォーム改善14カ条で取り上げた中でも、本当に簡単(それこそ工数30分)なのに多くのフォームで出来ていない3つの改善ポイントを紹介します。

1. 「必須」は誰でも一瞬でわかるようにする!

・必須項目だと気づかず確認ボタンを押して「これも必須だよーん」とエラーが出る
この時点で離脱するユーザーは多いかと思いますが、さらに
・パスワードが再入力になり、入力する
・また別の項目が「これも必須だよーん」とエラーが出る
といった経験、そして離脱をしたことがある人は多いのではないでしょうか。
実際に、当社で実施したウェブフォームについてのアンケート(有効回答数405件)では、「任意入力項目なのか必須入力項目なのか分からない」という点にイライラしたことがあると答えたユーザは49.6%という結果となっており、必須だと一目でわかるようにすることは当然重要です。
必須・任意項目があるのに明記していないフォームはそもそも論外ですが、「*」や「※」といった記号で示されているために、必須だということを瞬時に気づけないことがあります。
じゃあどうするか・・・「*」や「※」ではなく「必須」ときちんと書くだけです。
「※」で表しているフォームと「必須」と書いてある2つのフォームを比較してみると明らかです。
「e+チケット」会員登録フォーム
1_b_11
「出前館」会員登録フォーム
1_b_1
「出前館」のフォームでは、必須項目に背景色がついているのでより分かりやすくなっていますが、左側の項目名のみを見ても分かりやすさに違いがあるのが分かるかと思います。
(しかも、e+チケットのフォームはよく見てみると「※」がついていない項目もいずれか必須となっていて、このフォームを一回で完璧に入力するのは難易度が高いです。)

2. ラジオボタンやチェックボックスは文字をクリックできるようにする!

ユーザはおそらく、文字がクリック出来ない事でなんとなく使いにくいと感じる程度ですが、小さな使いにくさが重なることで、ユーザは着々と離脱へと近づきます。

文字をクリックできない
文字をクリックできる

実装は簡単で、次のどちらかで書くだけです。
・input要素にidをふって、label要素にforで指定する
・input要素をラベル要素で囲む

<label for="policy">
<input type="checkbox" id="policy">
個人情報の取扱について同意する
</label>

iphoneでは下記cssを追加するか、label要素にonclick=””属性を追加しないと動作しないのでご注意を。

label {
cursor:pointer;
}

 

3. 例、またはヒントを書く!デザインで問題があるならplaceholderを使う!

当社で実施したアンケートで、61.2%の人が「入力すべき内容が不明瞭で、例示などもない」ということでイライラしたと回答しています。
何を入力すれば良いか分からなかったらもちろん離脱します。
「住所項目が分かれてるけど何を基準に区切るんだ?」というフォームはよくあり、amazonの購入フォームでも上部の文字を読まないとわかりません。
「amazon」購入フォーム
3b
このフォームの場合は、項目の近くに文字数制限のヒント(15文字を超える場合は項目を分けてください、等)を書くことで、ユーザは迷わずに入力できます。
しかし、項目の周りに文字がたくさん書いてあると逆に分かりにくくなってしまうので、デザインとして難しいのであれば、placeholderを利用してでも例やヒントを表示しましょう。
※エフトラEFOでは「初期表示文言」と読んでいる機能です。
「ラスクル」新規登録フォーム
1_b_r5_c5
ラスクルのフォームでは、メールアドレス欄に「example@raskul.com」とplaceholderを利用して表示しています。デザインとしてくずれることなく、ユーザに分かりやすく例示ができています。

まとめ

簡単なこと(やっていて当然)なのに出来ておらず、せっかく入力を開始したユーザが離脱してしまうのは本当に無駄もったいないです。
しかし意外とできていないんです・・・。フォームまでの動線では、時間がかかるものでも何度も修正を繰り返して検証しているのに、エントリーフォームのすぐにできる改善が見落とされていることは非常に多いです。
一度、自分の関わっているフォームを見つめ直して、工数たった30分の改善をしてみてはいかがでしょうか。

著者:小木曽正佳