使いやすいフォームを実装するための10のポイント

サイト構築 -ユーザビリティ

ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。

ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。

Comment Form Styling: Examples and Best Practices

下記に10のポイントとその概要を紹介します。
サイトではキャプチャなども豊富に掲載されています。

入力フィールドはシンプルに

たいていのフォームには複数の入力フィールドがあります。
フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。
ラベルは分かりやすく

入力するユーザーの立場にたって、ラベル付けします。
例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用語に精通していないユーザーもいるので、「ホームページ」のように分かりやすい文言にします。
必須入力のサインは目立つように

入力フィールドに必須項目がある際、それを認識できなかったユーザーはエラーになると混乱します。
必須項目に「*」だけを使用するのはシンプルでよさそうにみえますが、はっきりと「必須入力」などのようにテキストで明記します。
入力の流れを壊さない

ユーザーがフォームを入力する際、スムーズに入力できるように各入力フィールドを配置します。
例えばサブミットボタンの後に、チェックボックスなどのちょっとした入力フィールドを配置しないでください。
入力は簡単なものから

入力フィールドが複数ある際、ユーザーが簡単に答えられるものを最初に配置します。
例えば、コメント欄より名前・メールアドレスを先に配置します。ユーザーが思考するなどして入力が困難なものほど終わりに配置します。
フィードバックは少しでも早く

入力時のエラーのフィードバックはAJAXなどを使用して、少しでも早いタイミングでユーザーに伝えます。
入力文字数に制限がある場合などは、ユーザーが入力してからエラーを伝えるのではなく、入力する前にユーザーに分かるようにフィールドの隣に明記します。
CAPTCHAは避ける

入力したのが人なのか、コンピューターなのかを区別するために使用するCAPTCHAは可能であれば避けてください。
WordPressであれば、標準のAkismetのプラグインを使用することでスパムを排除できます。
習慣には従う

自分が考えた新しい機能は使用しないでください。おそらくそれは失敗する見込みが高いです。
多くのウェブサイトで使用されている書式やデザインにならってフォームを作成します。
多言語対応の検討

ウェブサイトは全世界の人が閲覧可能で、フォームを全世界の人々が入力するかもしれません。そのため、異なる言語の習慣を念頭において制作します。
手始めとして、名前の入力フィールドは「姓」「名」と二つのフィールドに分けてしまうと、姓と名が逆の順番の言語や二つ以上の文化もあるので、名前のフィールドは単純に一つにします。
ビジュアルだけにたよらない

ビジュアル要素は非常に大事な表現方法ですが、フォームに関してはユーザーを混乱させてしまう場合があります。例えば、ウェブサイトの入力欄にアイコンだけを設置するのではなく、記述的なラベルを使用した方がユーザーを混乱させないでしょう。