スーパマーケット 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
This question's explanation and your answers so far.
問 97
Incorrectア
This choice says to place the “Apply” button at the very top of the screen, but that goes against advice (2), “arrange input fields and buttons in an order that makes operations such as answering easy.” The natural flow of operating an input form is to answer each item in order from the top, and only after everything has been filled in to press the confirm button at the end. If the confirm button is placed at the very top, the user’s eyes and mouse are forced to travel back from the last input field all the way to the top of the screen, and because the Apply button is in view while input is still unfinished, it can invite an accidental submission partway through. The stated reason of “so that the user does not forget to press it” sounds plausible, but the standard way to prevent forgetting is to put the button where the input flow ends, that is, immediately after the group of input fields; placing it at the top has the opposite effect.
Incorrectイ
This choice says to use checkboxes for “Desired Prize,” but Figure 1 clearly states “Please select one desired prize,” so this is a single-choice item where only one may be chosen. A checkbox is a part that turns each item on or off independently, and since several items can be selected at the same time, it cannot prevent invalid input such as checking both Prize A and Prize B. In other words, it does not satisfy advice (3), “use input forms suited to the data format.” The fact that the selection can be made with a mouse click does fit advice (1), but for a single-choice item the correct part is a radio button, or a pull-down menu (drop-down list) when there are many options; a checkbox is the wrong choice.
- ウ
正解 The correct answer is ウ. This question asks you to evaluate the choices against the three guidelines in Mr. E’s [Main advice on design]: (1) adopt input methods that are easy to operate, such as input with the mouse; (2) arrange input fields and buttons in an order that makes operations such as answering easy; (3) to prevent input errors, use input forms suited to the data format. The “Gender” item in ウ is one where exactly one option must be chosen from the two mutually exclusive options “Male” and “Female.” A radio button is an input part designed only for single selection: when one of the listed options is selected, the others are automatically cleared, so it matches the data format of “choose only one” perfectly and satisfies advice (3). In addition, the user does not have to type characters on the keyboard and can finish answering with a mouse click alone, so it also fits the easy-to-operate input method of advice (1). In the draft of Figure 1, “Gender” is shown as [ ], that is, a free-text input field, and if it stays that way, inconsistent notations and typing mistakes such as “Male person,” “male (animal),” “M,” or “Male ” (with a trailing space) can creep in, creating extra normalization work when the results are tallied. If it is changed to radio buttons, the possible values are fixed at two at design time, so such input errors are structurally prevented from occurring at all. Judging the nature of an item (single choice or multiple choice, free input or fixed values) and assigning the appropriate GUI part to it is the basis of input form design, and ウ is the only improvement that follows this way of thinking.
Incorrectエ
This choice says to arrange the questionnaire items assuming that they are answered in order starting from the item at the top right of the screen, but when people read a horizontally written Web page in Japanese or English, the user’s gaze generally flows from the top left to the right and then downward (the so-called Z-shaped or F-shaped eye movement). A layout that starts at the top right runs against this natural reading order, so users hesitate about where to look next, which leads to unanswered items and operation mistakes. This goes against advice (2), “arrange input fields and buttons in an order that makes operations such as answering easy,” and is a change for the worse rather than an improvement. Moreover, the questionnaire in Figure 1 is laid out vertically as impressions, name, gender, and contact e-mail address, so the very premise of starting from the top right does not fit the structure of this page.
- Choosing the right input part — a radio button lets the user select only one option from a set of mutually exclusive options, while a checkbox turns each item on or off independently and allows multiple selections. Assign radio buttons to a “choose one” item (a pull-down menu when there are many options) and checkboxes to a “select all that apply” item. By choosing a part that matches the data format of the item, input errors can be prevented at the design stage.
- Screen design that considers usability — arrange input fields along the flow of the user’s gaze (from the top left to the bottom right), and place the confirm button where input finishes, that is, after the group of input fields. Selection-style input reduces both effort and inconsistent notation compared with free text, so as a rule, items whose values can be limited should be made selectable.