前田 俊幸
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。
まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。
【動画】 ：フォーム入力におけるリアルタイムエラー判定デモ
上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。
すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
エラー判定は、ユーザにとって入力内容が自明でない（入力エラーとなりやすい）項目の場合に有効。
氏名や住所はユーザにとって入力内容が自明ですので、エラーになる確率は低くなります。一方、ユーザ名やパスワードは、既に登録されている可能性や、サイト独自の入力条件(Ex.半角英数6文字以上など)があり、ユーザにとっては入力ミスを犯しやすくなります。
リアルタイムエラーを実装すべきかどうか、上記のように入力項目の性質を判断材料とすることができそうです。
もしフォームの入力項目がユーザにとってすべて自明の場合(上記左図)は、実装コストを考慮して、通常のページ遷移のエラー判定方式を選択してもよいでしょう。
エラー判定結果をユーザに返すタイミングとしては、入力直後が良い。
ウロブレウスキ氏は、ユーザの入力に応じたエラー判定の結果表示タイミングについても調査を行っています。実験は以下の3パターンのタイミングで行われました。
[1]入力直後（AFTER）：正確には、次の入力フォームに遷移した直後に、前の入力フォームの判定結果を出す。
[2]入力中(WHILE)：入力中（1文字入力がある度）に判定結果を出す。
[3]入力前と途中(BEFORE AND WHILE)：入力フォームにフォーカスをあてた直後と入力中に判定結果を出す。
【動画】 タイミング別のエラー判定結果表示デモ
上の動画を見た方はお分かりになると思いますが、結果は「[1]入力後（AFTER）」が最も効果的で、他より7-10秒早く入力を終えられたそうです。
「[2]入力中(WHILE)」は、一文字一文字入力しながら判定結果を確認してしまうため、入力に時間がかかりました。
また、「[3]入力前と途中(BEFORE AND WHILE)」では、[2]と同様の理由で入力時間もかかる上、入力途中で常にエラーが表示される(1,2文字入れただけで判定がはしる)ため、満足度の低下を引き起こしたとのことです。
このように、ユーザへのフィードバックが、タイミングによってはユーザ行動を妨害するノイズにもなり不快の要因ともなり得ます。このような細かいタイミング等は、ある程度実装が進んだ段階でないと気づきにくいかも知れませんが、極力設計する段階から、ユーザの行動に影響する重要ポイントの一つとして、定義し忘れないことが必要でしょう。
また、実際にリリースする前(できればプロトタイピング時)に、簡単なユーザテストを行うことも強くオススメします。
出展： Luke Wroblewski , "Inline Validation in Web Forms" (A List Apart)Translated with the permission of A List Apart Magazine and the author[s].
