書式プロンプト

入力プロンプト(手がかり)として、そこに入力すべきデータの書式を示す文字列をフィールドの中に入れておく。
理由:入力書式についてのガイドを入力フィールドの中に配置することによって、スペースを節約しながらユーザーの理解を促せるため。

図例
書式プロンプト

効能

  • 日付、ID、シリアルなど、人によって入力書式にばらつきが出る可能性が高い項目で、ユーザーに正しい書式を伝えられる。
  • 書式についてのガイドを入力フィールドの中に配置することによって、ラベルプロンプトガイドプロンプトと同様に、面積を節約しながら補足情報を提示できる。

用法

  • 日付、ID、シリアルなどをシンプルなテキストボックスに入力させる際、正しい書式が分かるような説明や入力例を、フィールドの中に(デフォルト値として)入れる。例えば、年月日を入力させるテキストボックスに、「YYYY/MM/DD」「例:2007年10月1日」といった文字列をあらかじめ入れておく。
  • そのフィールドがフォーカスされると、書式プロンプトは消え、空欄になるようにする。
  • フィールドが空欄の状態でフォーカスアウトされると、再び書式プロンプトが表示されるようにする。
  • 書式プロンプトは、ユーザーが自分で入力した文字列と区別がつくように、グレーで表示する。
  • バリデーションの際には、書式プロンプトの文字列は未入力と同義に扱う。
  • 必要に応じて、分割テキストボックスを併用する。

注意書き

  • 書式プロンプトは、ユーザーが何かを入力してしまうと「正しい書式」が見えなくなってしまう。そのため、入力済みのフィールドが書式不備のエラーになっている時、そのフィールドを見てユーザーが「どのように入力すればよいのか」分からない恐れがある。この問題を解決するために、ユーザーが不適切な書式で入力した場合には、テキストボックスからのフォーカスアウトのタイミングなど、できるだけ早いタイミングで修正を促すことが望ましい。