フォームのユーザビリティについて｜開発プロセス｜「Webシステム開発専門企業」TAMシステム

会員登録、投稿、ショッピングカートなど、フォームはユーザとシステムの橋渡しとして使われます。フォームユーザビリティはユーザの企業・ブランド体験そのもの。スムーズに入力できるフォームは、コンバージョン率を高め、サイトを訪れたユーザーをおもてなしすることにつながります。

これまでの開発経験から、ＴＡＭシステムではユーザビリティの評価指針を設定しています。フォームの画面設計には、この指針が適用されます。これに加え、モニターによるユーザビリティテストも実施します。

（１）テキストボックス

maxlength を必ず設定する
テキストボックスの表示サイズとの差を小さくしておく
氏名、郵便番号等については、情報の切れ目でテキストボックスを分けておく（どのように入力するかが、視覚的に分かりやすいようにレイアウトする）
フォーカスが移動した際に、そのテキストボックスの入力で主に用いられるＩＭＥモードに切り替えるように設定する
（対応は一部のブラウザに限定される）
入力項目の横には、記入例を明示する
入力可能な文字数を明記する

（２）ラジオボタン

ユーザの選択に重要な意味がある場合（個人情報、有償である項目の選択等）、初期選択値（デフォルト値）は設定しない
選択の可能性の高い項目を、左又は上部に配置する
未選択の状態があり得る場合、未選択の状態に戻す手段を用意しておく（未選択を表す選択肢を用意する、JavaScript等で選択を解除する手段を用意する　等）
ラジオボタンのグループに属する選択肢は、なるべく近接して配置する
入力画面が複数の場合、選択肢は１画面上に全て表示する

（３）チェックボックス

ユーザの選択に重要な意味がある場合（個人情報、有償である項目の選択等）、初期選択値（デフォルト値）は設定しない
多数の選択肢がある場合、一気に選択、或は選択解除ができる機能を用意する
選択の可能性の高い項目を、左又は上部に配置する
列方向になるべく揃えて配置する（選択肢を見失わないため）

（４）セレクトボックス

選択肢が多数になる場合には使用しない（生年月日の年等）
選択肢が容易に想像できない項目の選択には使用しない（一覧で表示できる方がよいものにはラジオボタンの使用を検討する）
選択肢の名称は、極端に長さの差があるものは使用しない
ユーザの選択に重要な意味がある場合（個人情報、有償である項目の選択等）、初期選択値（デフォルト値）は設定しない

（５）テキストエリア

スクロールがなるべく不要な表示サイズにしておく
入力可能な文字数を明記する

入力項目は最小限に絞る
特に個人情報は、必要最小限にとどめる
入力必須項目であることを、入力欄の近くに分かりやすく表示する
入力終了まで画面数が多い場合、全体の画面構成と現在の位置を示すナビゲーションを設ける
同じ情報を、複数箇所で入力させない
特に複数画面に渡って同種の情報の入力が必要な場合は、最初に入力されたものを対応する入力欄に表示し、編集可能にしておく
入力後の確認画面には、訂正を行うための入力画面に戻るリンクを設ける
終了画面（Thanks画面）には、画面構成に合わせて、別のページへ移動するリンク、又は閉じるボタン（ポップアップウインドウの場合）を設ける
タブ入力時の項目の移動順は、画面の入力順に合わせる

入力内容のチェックは、できるだけサーバで行う
フォーム入力でエラーが発生した場合、再入力が容易なように、既入力値を保持したフォームにエラーメッセージを表示する
エラー発生時、フォームの画面上部にエラーが発生していることを分かりやすく表示する
同時にエラーの項目をリストアップする
エラー発生時、エラーになっている入力項目の付近にエラー内容を分かりやすい表現と色で表示する
半角カナは、入力データのチェック処理の前に全角に変換する
入力データが数値のみの項目（郵便番号、電話番号等）、英数記号のみの項目（メールアドレス等）は、チェック処理の前に、全角→半角変換処理を行う
データ長の確認処理は、可能な限り、バイト数ではなく文字数で行う

住所入力の際には、郵便番号検索機能を利用できるようにする
住所入力欄には、記入すべき情報の区切り、記入方法について入力欄付近に例を表示する
年齢の情報を取得したい場合は、生年月日を取得するようにする
生年月日の「年」の入力にセレクトボックスを使用しない
生年月日の「年」は、西暦と和暦を選択できるようにしておく
名前（漢字、カナ）の入力は、姓と名を分けておく
送信ボタンの名称を分かりやすくしておく
特に、確認画面に進むのか登録されてしまうのかが容易に判別できるようにして、読者の心理的負担を下げるようにする

ユーザビリティ方針