2016.06.07

2017.05.24

ホームページ制作関連

ユーザーフレンドリーなフォームにする5つのポイント

メモをとる手元

フォームの使い勝手をよくする意味

フォームはユーザーからの問い合わせを受け取る大事な窓口です。使い勝手が悪いとせっかくの機会を逃してしまう原因となります。今回はそんなフォームの使い勝手を向上し、機会損失を減らし、ユーザーのストレスも軽減できる、5つのポイントをご紹介します。

項目名をクリックできるようにする

ラジオボタンやチェックボックスの選択項目がクリック出来ないと、クリックできそうでできない見た目になってしまい、使い勝手の非常に悪いフォームになります。 また、html上でボタンと選択項目の関連付けがされていない構造になり、html的にも望ましくないフォームになります。

悪い例

See the Pen OXyLBJ on CodePen.

選択項目名をクリックしても選択できません。

良い例

See the Pen aZvoMK on CodePen.

選択項目名をクリックすると選択できます。

必須項目は「※」ではなく、「必須」とわかりやすく明記

必須項目を記号の●や※で表しているフォームをよく見かけますが、記号は意味のあるテキストではないので好ましい手法ではありません。
また、記号を使うと見落としや意味が正しく伝わらず、ユーザーのストレスに繋がる可能性も増えてしまいます。

入力ボックスには記入例を用意する

電話番号のハイフンや数字の大文字小文字など、記入例を表示しておくことでユーザーの迷いを減らすことができます。
また、どのような入力にも対応できるよう入力条件を指定していたとしても、ユーザーの迷いを減らすことでフォームからの離脱率を下げることに繋がります。

入力情報が複数ページの場合は現在地をナビゲーションする

会員情報の登録フォームなど、入力項目が多く複数ページに渡る場合などは、ユーザーに対して今どの位置にいるのかを明確にし、入力の終わりを伝えることでユーザーの記入ストレスを軽減できます。 終わりの見えないフォーム入力はユーザーにとって大きなストレスになるので、離脱を防ぐためにナビゲーションは効果的です。

title_default

どの項目がエラーなのかわかるように表示する

フォームページの上方に「エラーがあります」と表示がでるだけで、具体的にどこがエラーかわからない…これではユーザーにエラー箇所を探す負担を与えてしまい、ページ離脱に繋がってしまいます。
エラー表示は入力項目ごと、入力欄の近くに表示されるよう設定するのが好ましいです。

フォームは細かく設定しようとすると構造がややこしいものも多く妥協や力技に頼りがちです。
しかしユーザーが直接触る大事な窓口なので、編集しやすいテンプレートを自作するなどして、ユーザーへの気遣いを形にしやすくしていきましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する