単一テキストボックス

入力フィールドを不必要に分割せずに、一項目につきひとつのテキストボックスだけを提示する。
理由:入力作業をスムーズに行え、細かな書式の違いに寛容な自由度の高いシステムになるため。

図例
単一テキストボックス

効能

  • 入力コントロール間をフォーカス移動する操作(次のフィールドのクリックや、Tab キー押下)が減り、入力の操作効率が高まる。
  • ハイフンの有無や区切り文字の種類、スペースや改行の位置と数など、入力書式に関するシステム側の恣意的な仕様を気にすることなく、好きな書式で入力できる。結果的に入力エラーに遭遇することが減る。
  • 入力フィールドが分割されていると、キーボードを見ながらタイプするユーザーの場合、ひとつのテキストボックスに不適切な桁数の入力をしてしまう場合がある。例えば電話番号の入力フィールドが3つのテキストボックスで提示されている場合、ひとつめのテキストボックス(市外局番)に電話番号全桁をタイプしてしまったりする。単一テキストボックスならそういったミスがなくなる。

用法

  • 電話番号、クレジットカード番号、日付、氏名、住所などの入力コントロールを、それぞれひとつのテキストボックスにする。
  • ユーザーによって入力する書式(ハイフンの有無や区切り文字の種類など)が異なることになるが、システムはそれを許容して、もしくは可能な限り自動的に整形(数字以外の文字の削除、全角と半角の置換、区切り文字の置換など)して、データベースに登録する。
  • 電話番号、クレジットカード番号、シリアル番号など、桁数が決まっている場合でも、入力可能文字数や文字種を制限しない。制限されていると、ハイフンやスペースを含めて入力しようとした際に全桁入力できなくなるため。他のアプリケーションから文字列をコピーペーストしてきた場合など、全桁入力できていないことに気づかないこともある。ハイフンやスペースを含めた桁数で制限すればよいという考え方もできるが、どのようにそれらの区切り文字が挿入されるかを完全に予測できない以上、制限はしない方がよい。入力された文字列が有効桁数を越えている場合は、フォーカスアウト時もしくはサブミット時にエラーメッセージで通知する。
  • ただし、ユーザーがそこに入力すべきデータの一般的な書式や桁数をイメージしにくいと思われる場合には、入力例を示すとよい。

注意書き

  • 当然のことながら、入力データとして区切り箇所が正確でないと処理に支障がある場合には、このパターンは使えない。例えば電話番号の市外局番だけを正確に切り出す必要がある場合など。その場合は分割テキストボックスを用いる。しかし実際のところ、多くのシステムでは、姓と名をわざわざ分けて入力させたり、住所を三つのフィールドに分けて入力させたりしなくても、十分に運用できるはずである。データとしての精度と、UIとしてのシンプルさの、バランスを考えることが望まれる。