スーパマーケット N 町店の広報スタッフである D さんは，本社の Web サイト担当の E さんと協力して N 町店紹介のページを作成している。このたび，N 町店紹介のページのアクセス数増加を目的として，Web サイトで懸賞付きアンケートを実施することになった。D さんは，図 1 のような懸賞ページ案を作成し，E さんに相談した。 図 1 懸賞ページ案 ・〈懸賞ページタイトル〉 ・賞品：A 賞 〈写真 1〉，B 賞 〈写真 2〉，C 賞 〈写真 3〉 ・希望賞品を一つ選んでください [ ] ・〈アンケートでの個人情報の取得目的，用途，管理などに関する記述〉 ・アンケート 〈アンケートの内容の一部〉 ・N 町店の Web ページを見たご感想 [ ] ・お名前 [ ] ・性別 [ ] ・連絡先メールアドレス [ ] ・（応募する） （キャンセル） ・注記：[ ] は入力領域，（ ）はボタン，〈 〉は表示する部品や表示内容が省略されている箇所の説明を示す。 D さんは，懸賞ページ案を確認した E さんから，次のようなアドバイスと指示を受けた。 〔デザインに関する主なアドバイス〕 (1) マウスでの入力など，操作性の良い入力方法を採用する。 (2) 回答などの操作がしやすい順序に，入力領域やボタンを配置する。 (3) 入力の誤りを防ぐため，データ形式に応じた入力フォームを利用する。 〔作成に関する主な指示〕 (1) 懸賞ページは HTML 形式の ank01.html というファイル名で作成し，Web サーバの指定されたディレクトリに転送する。 (2) ファイルを指定する場合は，相対パスで記述する。 (3) 使用する写真のファイルサイズは，1 枚当たり 200k バイト以下とする。 D さんは，E さんから受けたアドバイスの内容を考慮して，図 1 の懸賞ページ案のデザインを改善することにした。改善内容として，適切なものはどれか。
平成23年度 特別試験 ITパスポート試験 問97
この問題の解説と、これまでの解答の記録です。
問 97
不正解ア
「応募する」ボタンを画面の一番上に配置するという内容だが、これはアドバイス (2)「回答などの操作がしやすい順序に，入力領域やボタンを配置する」に反する。入力フォームの自然な操作の流れは、上から順に各項目へ回答し、すべて入力し終えてから最後に確定ボタンを押す、というものである。確定ボタンを一番上に置くと、視線とマウスが末尾の入力欄から画面上端まで戻る動きを強いられるうえ、まだ入力が済んでいない段階で応募ボタンが目に入るため、記入途中の誤送信を誘発しかねない。「押し忘れがないよう」という理由付けももっともらしいが、押し忘れを防ぐには入力の最後に到達する位置、すなわち入力領域群の直後に置くのが定石であり、上端配置は逆効果である。
不正解イ
「希望賞品」にチェックボックスを用いるという内容だが、図 1 には「希望賞品を一つ選んでください」と明記されており、これは択一 (一つだけ選ぶ) の項目である。チェックボックスは各項目のオン/オフを独立に切り替える部品で、複数の項目を同時に選べてしまうため、A 賞と B 賞の両方をチェックするといった仕様違反の入力を防げない。すなわちアドバイス (3)「データ形式に応じた入力フォームを利用する」を満たしていない。マウスのクリックで選べる点はアドバイス (1) に沿うものの、択一項目に対して正しい部品はラジオボタン、あるいは選択肢が多い場合のプルダウンメニュー (ドロップダウンリスト) であり、チェックボックスは誤った選択である。
- ウ
正解 正解はウ。この問題は、E さんの〔デザインに関する主なアドバイス〕(1) マウスでの入力など操作性の良い入力方法を採用する、(2) 回答などの操作がしやすい順序に入力領域やボタンを配置する、(3) 入力の誤りを防ぐためデータ形式に応じた入力フォームを利用する、という三つの指針に照らして選択肢を評価する問題である。ウの「性別」は、「男」「女」という互いに排他的な二つの選択肢から必ず一つだけを選ぶ項目である。ラジオボタンは、並んだ選択肢のうち一つを選ぶと他の選択が自動的に外れる択一専用の入力部品なので、「一つだけ選ぶ」というデータ形式にぴったり対応し、アドバイス (3) を満たす。また、キーボードで文字を打つ必要がなくマウスのクリックだけで回答が完了するので、アドバイス (1) の操作性の良い入力方法にも合致する。図 1 の案では「性別」が [ ] すなわち自由記述の入力領域になっており、このままでは「男性」「オス」「M」「男 」のような表記ゆれや打ち間違いが混入し、集計時に正規化の手間が発生する。ラジオボタンに変えれば取り得る値が設計時点で二つに固定されるため、こうした入力誤りをそもそも発生させない構造にできる。このように、項目の性質 (択一か複数選択か、自由入力か固定値か) を見極めて適切な GUI 部品を割り当てることが、入力フォーム設計の基本であり、ウがその考え方に沿った唯一の改善内容である。
不正解エ
画面の右上の項目から順に回答することを想定してアンケート項目を配置するという内容だが、日本語や英語の横書き Web ページを閲覧するとき、利用者の視線は左上から右へ、そして下へと流れるのが一般的である (いわゆる Z 型・F 型の視線移動)。右上を起点とする配置はこの自然な読み順に逆らうため、利用者は次にどこを見ればよいか迷い、回答漏れや操作ミスを招く。これはアドバイス (2)「回答などの操作がしやすい順序に，入力領域やボタンを配置する」に反しており、改善ではなく改悪である。加えて、図 1 のアンケートは感想・お名前・性別・連絡先メールアドレスと縦に並ぶ形式であり、右上起点という前提自体がこのページ構成に適合しない。
- 入力部品の使い分け — ラジオボタンは互いに排他的な選択肢から一つだけ選ばせる部品、チェックボックスは各項目を独立にオン/オフして複数選択を許す部品である。「一つ選ぶ」項目にはラジオボタン (選択肢が多ければプルダウンメニュー)、「当てはまるものすべて」にはチェックボックスを割り当てる。項目のデータ形式に合った部品を選ぶことで、入力誤りを設計段階で防止できる。
- ユーザビリティを考えた画面設計 — 入力領域は利用者の視線の流れ (左上から右下) に沿って配置し、確定ボタンは入力を終えた位置、すなわち入力領域群の後ろに置く。自由記述より選択式のほうが入力の手間と表記ゆれが減るため、値が限定できる項目は選択式にするのが原則である。