web-dev-qa-db-ja.com

検証/エラーメッセージをフォームに表示するのに最適な場所はどこですか？

検証/エラーメッセージをフォームに表示するのに最適な場所はどこですか？

  1. フィールドの横？
  2. フィールドの下？
  3. ページの上部/下部に領域を予約し、そこにエラー/成功したメッセージを表示しますか？
formserror-messagevalidation
10
June

これに対する正しい答えは1つではありません。状況に大きく依存します。

大きなフォームの場合、エラーの概要と、修正が必要な特定のフィールドの近くにあることは理にかなっています。これは、ユーザーがフォームを送信してページが再読み込みされるときに理想的です。これが上部に表示され、アクションを実行できます。

これはこの良い例です： enter image description here

おまけとして、これらは、ユーザーが長いフォームを簡単にジャンプできるように検証の問題を解決する必要がある領域にリンクすることができます。

ただし、フォームを小さくする場合は、インライン検証（入力フィールド周辺）で問題ありません。これにより、ページの煩雑さが減り、注意が散漫になり、注意が必要な領域にフォーカスが移ります。

enter image description here

16
Grant McAllister

エラーのあるフィールドを強調表示し、フィールドに入力する前に、フィールドに指示を出します。これには2つの理由があります。 1つ目は、ユーザーが適切に入力する方法を知っている場合、ユーザーはエラーの発生を回避できます。2つ目は、エラーメッセージを表示するためのスペースを作成する必要がなく、フィールドのエラーハイライトのみです。

大きなエラーメッセージは、ユーザーを怖がらせたり、不快にさせたりする可能性があります。ユーザーがフォームを送信する作業に行った後で気分を害するよりも、最初にフォームの使用方法をユーザーに説明する方が良いでしょう。

3
pcridesagain

フォームエラーを表示する最悪の場所は、ページの上部または下部です。なぜですか。それは問題からメッセージ/解決を離します。エラーメッセージの目的は、ユーザーができる限り迅速にエラーを修正し、可能な限り多くの作業を維持する方法を伝えることです。問題のメッセージを問題の領域から視覚的に分離すると、ユーザーが混乱し、不満が生じます。また、単純な情報（日付、年齢、住所など）を入力するために、ユーザーが従事する必要のある精神的な作業負荷も増加します。

検証の成功やエラーメッセージを表示するのに最適な場所は、問題の近くです。メッセージがフィールドの上または横に表示されるかどうかは、主に好みの問題です。重要なことは、メッセージが正確かつ明示的に丁寧で人間が読める言語で問題があったことを示しており、通信建設的な指示この問題を解決する方法。 （ Jakon Neilsen 's "Error Message Guidelines"）から転載

要約：確立された知恵は、優れたエラーメッセージが丁寧で正確で建設的であることを示しています。 Webはいくつかの新しいガイドラインをもたらします。エラーメッセージを明確に表示し、問題を修正するために必要な作業を減らし、途中でユーザーを教育します。

2
Hynes

すべてのエラーを上部にリストして、ユーザーが簡単に確認できるようにして、クリックできるようにします。ハイパーリンクは、一致するHTMLアンカーにジャンプします。簡単なHTMLの例を次に示します。

エラー：

<h2>There was an error with your submission</h2>
<ul>
   <li><a href="#jobtitle">Enter Job Title</a></li>
   <li><a href="#emailaddress">E-mail address must be valid</a></li>
   <li><a href="#state">Select your state</a></li>
</ul>

フィールド

<a name="jobtitle"></a>
<label for="jobtitle">Job Title</label>
<input type="text" name="jobtitle" id="jobtitle" />

<a name="emailaddress"></a>
<label for="emailaddress">Email Address</label>
<input type="text" name="emailaddress" id="emailaddress" />

<a name="state"></a>
<label for="state">State</label>
<select name="state" id="state">
    <option value="AZ">Arizona</option>
    <option value="NY">New York</option>
    <option value="OH">Ohio</option>
    ...
</select>

そうすることで、エラー自体をクリックすると、ページの適切な場所に自動的にスクロールされます。

お役に立てれば！

2
CharleyDC5

フォームのレイアウトと複雑さによって最適なアプローチが変わる可能性があるため、万能な答えはありません。

優れたユーザーインターフェイス設計には、明確で明白で直感的な要素が必要です。ユーザーは、一目で、何が間違っていたのか、どこに問題があるのか​​、どのように修正するのかを知る必要があります。

不正な検証の最もイライラする個人的な例は、Sallie Maeで自分のパスワードを新しい18文字の複雑なパスワードにリセットしようとしたときでした。私は自分のパスワードを設定するために30分ほど試しましたが、このエラーメッセージが表示され続けました。

無効なパスワード。パスワードは8〜32文字で、少なくとも1つの数字と少なくとも1つの文字を含み、Wordの「パスワード」またはユーザー名を含んではなりません。

私の問題は、ソフトウェアが特殊文字を受け入れないことでしたが、提供されたメッセージからはそれを区別できませんでした。

無効なフォームフィールドの色を変更するか、その横に赤いアスタリスクを配置するだけで、なぜ無効なのかについての説明は明確ではありません。フィールドが無効である理由の説明を当てはめようとすると、フィールドの横に合わない場合があります。

いくつかのフォーム（JQueryを含むasp.net）では、検証エラーをフォームの上部に配置し、それをフラッシュして、フィールドが無効である理由を正確に伝えるメッセージを提供し、フィールドの隣にリンクを提供してそれらを戻しますフィールドに。

1
Andrew Neely