入力画面設計

入力画面設計の基本

人間とシステムとの接点をヒューマンインタフェースといいます。入力画面は典型的なヒューマンインタフェースです。入力画面の設計は、情報システムのセキュリティ対策、入力データの信頼性確保、利用者の操作性向上など、情報システムの成否に大きく影響します。
　ここでは、そのための留意事項を示しますが、初心者と熟練者では大きく異なります。初心者には丁寧な説明やＧＵＩ環境が求められるし、熟練者には操作性が求められます。また、パソコンの熟練者にはマウス操作よりキーボード操作のほうが好まれるかもしれません。それぞれが満足する工夫が必要になります。

セキュリティ対策

正当な入力担当者が権限内の操作しかできないようにする必要があります。

機能の制限
誤操作により、システムがダウンしたり、蓄積されているデータが消去されたりする危険性があると、安心して操作することができません。そのような日常操作では不要な機能は、通常の入力画面からは操作できないようにするべきです。
利用者別の入力画面
例えば他支店管轄のデータ入力を禁止している場合、支店別に異なる入力画面を表示し、支店名は入力さないようにします。多様な画面を提供するのは煩雑ですが、利用者は毎回決まりきった入力をしないで済む利点もあります。

誤入力の防止

誤ったデータがシステムに取り込まれてしまうと、それを訂正する作業は非常に困難です。誤入力をさせない工夫、誤入力したときのエラー表示などの工夫が必要です。

ＧＵＩ機能による選択
選択候補の少ない項目では、ラジオボタンやプルダウンメニューなどのＧＵＩ機能（後述）を用いるのが適切です。
コードや略称での入力
長い取引先名や商品名を名称で入力するするのは面倒だしタイプミスが発生します。コード入力のほうが適切です。システムとしてコードや略称を設定していなくても、入力画面内で設定して正式な文字列に変換することも考えられます。
データの型の自動指定
項目ごとに全角や半角の切り替えをするのは面倒です。利用者がそれを気にする必要がないように自動指定します。また数字チェックや範囲チェックも組み込みます。
警告表示
誤入力のときは、直ちに警告表示をして再入力を促す必要があります。警告表示では修正されなければ次のステップには進みません。
表示内容は、利用者が何をすべきかを，簡明かつ正確に表示すべきです。それで不十分なときは、表示部分をクリックするとヘルプ画面が表示されるようにします。
該当項目だけでチェックできるものは、入力直後に表示するのが適切ですが、一区切りの入力が終り［入力］ボタンをクリックした時点で、入力箇所の近くに表示することもあります。
確認表示
例えば取引先をコード入力したとき、正式名称を表示するとか、通常では発生しない大きな発注数量を入力したときには確認表示するなどが適切です。この場合は再入力しなくても次のステップに進むので、利用者が確認忘れをしないようにする必要がありますが、利用者が煩雑と感じることもあります。
UnDo機能
誤りに気付いたときに、その入力時点にまで戻ることができる機能です。この機能があると利用者はリラックスして操作できるのでストレスを減らすことができます。標準的な機能はＯＳでもっています（「戻る」ボタン）が、細かい操作ができるように画面に作りこむこともあります。

利用者の操作性向上

どの個所でどのデータを入力すればよいかが明確でないと、利用者は戸惑ってしまいます。操作性が低下するだけでなく、誤入力の原因になります。また、一画面での入力項目数も操作性に影響します。

常識的な入力順序
例えば伝票から入力するのであれば、入力画面は伝票と似たデザインにするべきです。それ以外の場合でも、常識的な入力順序に合わせて。上から下へ、左から右へと入力するようにします。
適切な項目名称表示
これも職場での常識に一致させるべきですが、画面サイズの都合で短縮する場合もあります。また、単品個数なのか箱数なのかなどを明示することも必要です。
ヘルプ機能
入力項目を明確にしようとするあまり過剰説明表示になると、利用頻度の多い利用者には煩雑になります。初心者用／熟練者用に画面を用意することもありますが、簡単な表示にしておき、それをクリックすると詳細説明が表示されるヘルプ機能を組み込むのが適切です。
適切な入力項目数
一画面での入力項目があまりにも多く、その結果が表示されないと、エラーで再入力する作業が面倒です。逆に入力するごとに画面が変わるようでは、操作が煩わしくなります。
入力項目数の削減
決まりきったことを入力させないために、上述の「利用者別の入力画面」にしたり、日付など頻繁に使用される値はデフォルトとして入力欄にあらかじめ表示しておくなどの工夫をします。また、同じ取引先の伝票が続くことが多い場合は、前に入力したものをデフォルトにするのが適切です。
利用者の業務が細分化されている場合には、このような手段が大きな効果を生み出します。

他画面との関係

情報システムには販売システム、人事システム、生産システムなど多くのシステムに入力画面がありますし、同じ販売システムでも多様な入力画面があります。そして人事異動により、利用する入力画面が変わることがあります。
　異動してきた利用者が実務を理解するもは当然ですが、せめてデータ入力などでの操作に関しては、戸惑いを最小にしたいものです。

Ｗｅｂブラウザの利用
多くの利用者はＷｅｂブラウザに親しんでいます。個々のシステムで独自の画面表示ツールを使うのではなく、Ｗｅｂブラウザを用いることにより「戻る」や「リンク」などの操作を教える必要がなくなります。
操作ボタンなどの統一
どの画面においても操作ボタンの表示位置や形を同じにします。
画面以外での統一
項目名の統一、コードの統一、伝票形式（入力順序）の統一、画面の流れの統一など、全社的なルールを整備することが、入力画面の改善に大きな効果があります。

ＧＵＩによる選択

選択候補の少ない項目では、ラジオボタンやプルダウンメニューなどのＧＵＩ機能を用いるのが適切です。
　反面、候補一覧を表示するため、画面を圧迫したり、他の入力項目とマッチしないデザインになるなどの欠点もあります。

各機能の例はフォーム取得の基本、ＨＴＭＬ５での新機能を参照してください。

ラジオボタン: 排他的な複数の選択候補を○印とともに表示しておき、それから一つだけを選択させる。選択すると，それ以前に選んだ項目の選択は解除される。
チェックボックス: 選択候補を□印とともに表示しておき、それぞれの候補を選択するかどうかを指定する。クリックするたびに，選択と非選択が切り替わる。
テキストボックス: 販売数量や得意先名称など数値や文字列を入力する。選択候補はない。
リストボックス: 複数の選択肢が全部（あるいは、ある程度の個数）最初から表示されていて、その中から選択するものをクリックして選ぶ。
サムネイル: リストボックスが文字列表示なのに対して、実際には大きな画像を縮小画像（サムネイル）で表示し、複数のサムネイルリストから選択する。
プルダウンメニュー: リストボックスが事前に候補が表示されているのに対して、プルダウンメニューは、タイトル部分をクリックことにより、その隣接位置に選択候補の一覧表が小さな画面に表示され，その中から選択するものをクリックして選ぶ。
ポップアップメニュー: プルダウンメニューと同じ機能だが、表示される位置が決まっていない。
コンボボックス: プルダウンメニューと似ているが、タイトル部分に任意の文字を直接入力することもできる。