[(X)HTML] フォームのユーザビリティ・アクセシビリティについて1

最近は年度末ということもありフォームを大量に制作していたが、あがってくるワイヤーやデザインを見ていると、フォームのユーザビリティ、アクセシビリティについて考えることが多かった気がする。なので、確認の意味で要点をメモする。今回は主に入力項目について記載する。

項目数はなるべく少なくする

あまりに入力項目が多いと、ユーザは入力ページを見ただけでフォームから離脱してしまう ケースが多い。入力を求める項目については設計段階で十分に精査し、ひとつのページに配置する入力項目は必要最低限にするのが良い。重複する内容の入力項目が存在するのはもってのほかである。また、どうしても項目数が増えてしまう場合は、タスク毎にページを分割するなどの配慮が必要となる。操作の実行に複数のステップを踏まえる必要がある場合は、段階的にユーザーを誘導すると良い。

必須項目は最小限にする

上記「項目数はなるべく少なくする」と関連してくるが、必須入力の項目が多いと、その分ユーザに掛る負担も増えることになる。また、個人情報にあたる項目(住所、電話番号など)に必須が多いと、 ユーザが感じる不安も大きくなり、登録まで至らないケースもある。フォームを設置する目的を明確にして必須入力項目を決定することが大切だ。より多くの情報を集めたいという欲が、ユーザのフォームからの離脱を招くことになる。

項目名と入力欄の対応関係を分かりやすく配置する

当然のことだが、ユーザが直観的にどこに何を入力すればいいのかが分かるように画面を設計すべきである。分かりずらいレイアウトはユーザの誤入力を招く要因となる。誤入力によって再入力を求められることはユーザにとってはかなりのストレスとなるため、ユーザに再入力を求めなければいけない状況を生み出す可能性がある要因は、設計の段階で徹底して排除する必要がある。

選択によって入力項目を分ける場合、入力不要な項目は非表示にする

フォームの内容によっては、ユーザの選択肢によって入力が不要な項目が発生する場合がある。 例えば、ECサイト等で支払方法を選択する場合では、「商品代引き」を選択したユーザにはカード番号や口座振込みの情報は、入力(閲覧)する必要が無い項目となる。こういった場合は、ユーザが選択した方法によって、ユーザに見せる情報を変更するのが望ましい。余計な情報を隠すことでユーザにはフォーム入力が簡単に見え、離脱を減らすことができる。

入力項目に対応する項目名にラベルを貼る

チェックボックスやラジオボタンなどのコントロールは、それ自身のサイズが小さいためクリックをしにくいという欠点があるが、label 要素でラベルとコントロールを結びつけることにより、ユーザがクリック可能な領域を広げることができる。また、通常 label 要素は上述したような用途で使用されることが多いが、フォーム部品と項目名を関連付けるという意味では、全ての input 要素に付加するのが望ましい。

プルダウンは他の形式で代替可能か検討する / プルダウンを使用する際はマウスホイール対策を行う

選択肢の多いプルダウンから目的の項目を選び出すのは、ユーザにとって面倒な作業である。また、ユーザが一度クリックをしなければ選択肢を認識できないのもあまり良くない。なるべくプルダウンの使用は避け、他の要素(ラジオボタン等)で代替できないかを検討すべきである。どうしてもプルダウンを使用する際は、マウスホイールによってユーザの意図しないところで、選択した値が変わってしまうのを防ぐため以下のような対策をするのが望ましい。

<select ~ onchange="window.focus()">

これによってプルダウン項目を選択した時点で自動的にフォーカスが解除されるようにする。

テキストフィールドには、充分なスペースを確保する

入力欄が狭いことはユーザの誤入力につながるため、十分なスペースを確保すべきである。

入力欄には、記述例を明記する

また記述例は入力形式が感覚的に理解できるように具体的に表記する 入力形式が直観的に判断できないことは、誤入力を招く原因となる。また、ユーザに対し整形された形式での文字列の入力を求めるべきではない。記述例は具体的かつ分かり易く記載するべきである。また、入力形式に指定がある場合はコントロール側である程度対応すべきである。

入力項目の説明は項目の上に記載する

フォームの後に解説があると、ユーザが音声ブラウザ・テキストブラウザ等を利用していた場合、 入力した後に説明に気づくことがあるため、入力項目の説明は項目の上(前)に記載するのが良い。

ラジオボタン、チェックボックスを使用した選択項目には、「選択可能な数」を明記する

制作者側にとって、ラジオボタンは単一選択であり、チェックボックスは複数選択であることは当たり前だが、ユーザにとってそれが必ずしも当たり前とは限らない。ラジオボタンの選択可能数が明記されて居ない場合、ユーザが複数選択しようとしてしまい、事前のラジオボタンの選択が解除されて混乱を招く可能性がある。ラジオボタン、チェックボックスを使用する際には、選択可能な数を明記するのが望ましい。

言葉によってナビゲートする場合、位置情報を使うべきではない

位置情報による誘導は視覚によらない利用者やテキストブラウザの利用者等を混乱させる。 ナビゲートには位置情報を遣うべきではない。

郵便番号から住所を自動入力する際は地名・番地・建物名を補完される入力とは分ける

ユーザにとって住所の入力は面倒なので、できるのであれば郵便番号から住所情報を自動で補完する機能はあった方が良い。しかし、そういった機能を提供する場合は、地名・番地・建物名を補完される入力とは分けるのが望ましい。ユーザは自動挿入に安心し、続きの住所を入力しない恐れがある。

次回はエラーメッセージやフォーム全体としての表記などについて記載する。

投稿日付 :

カテゴリー : HTML / XHTML

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/82

コメント投稿フォーム