2016.06.07
2017.05.24
ホームページ制作関連
ユーザーフレンドリーなフォームにする5つのポイント
フォームの使い勝手をよくする意味
フォームはユーザーからの問い合わせを受け取る大事な窓口です。使い勝手が悪いとせっかくの機会を逃してしまう原因となります。今回はそんなフォームの使い勝手を向上し、機会損失を減らし、ユーザーのストレスも軽減できる、5つのポイントをご紹介します。
項目名をクリックできるようにする
ラジオボタンやチェックボックスの選択項目がクリック出来ないと、クリックできそうでできない見た目になってしまい、使い勝手の非常に悪いフォームになります。 また、html上でボタンと選択項目の関連付けがされていない構造になり、html的にも望ましくないフォームになります。
悪い例
See the Pen OXyLBJ on CodePen.
選択項目名をクリックしても選択できません。
良い例
See the Pen aZvoMK on CodePen.
選択項目名をクリックすると選択できます。
必須項目は「※」ではなく、「必須」とわかりやすく明記
必須項目を記号の●や※で表しているフォームをよく見かけますが、記号は意味のあるテキストではないので好ましい手法ではありません。
また、記号を使うと見落としや意味が正しく伝わらず、ユーザーのストレスに繋がる可能性も増えてしまいます。
入力ボックスには記入例を用意する
電話番号のハイフンや数字の大文字小文字など、記入例を表示しておくことでユーザーの迷いを減らすことができます。
また、どのような入力にも対応できるよう入力条件を指定していたとしても、ユーザーの迷いを減らすことでフォームからの離脱率を下げることに繋がります。
入力情報が複数ページの場合は現在地をナビゲーションする
会員情報の登録フォームなど、入力項目が多く複数ページに渡る場合などは、ユーザーに対して今どの位置にいるのかを明確にし、入力の終わりを伝えることでユーザーの記入ストレスを軽減できます。 終わりの見えないフォーム入力はユーザーにとって大きなストレスになるので、離脱を防ぐためにナビゲーションは効果的です。
どの項目がエラーなのかわかるように表示する
フォームページの上方に「エラーがあります」と表示がでるだけで、具体的にどこがエラーかわからない…これではユーザーにエラー箇所を探す負担を与えてしまい、ページ離脱に繋がってしまいます。
エラー表示は入力項目ごと、入力欄の近くに表示されるよう設定するのが好ましいです。
フォームは細かく設定しようとすると構造がややこしいものも多く妥協や力技に頼りがちです。
しかしユーザーが直接触る大事な窓口なので、編集しやすいテンプレートを自作するなどして、ユーザーへの気遣いを形にしやすくしていきましょう。