正しくないログインのための設計
ラベルの変更を検討しています（「ユーザー名またはパスワードが正しくありません。」）。これは現在のデザインです：
このラベルに適したデザインはありますか？
新しいラベルに今よりももっと注目してもらいたいです。
コントラストを上げます。
現在のバージョンでは、エラーメッセージに使用する色と背景色のコントラストが低くなっています。
エラーの色を明るくするか、背景色を明るくしてみてください。下記は用例です;
このツール をチェックして、色のコントラストを測定します。
まず、フィールドにラベルを使用することをお勧めします。これは非常に重要です。画面キャプチャに基づいて、インラインラベルを使用していると思います。それをしない理由を読んでください
それ以外は、エラーメッセージの色は問題ではありません。赤は、西洋のユーザーが使い慣れるためによく使用されます。これは、赤が非常に目立つ色だからです。したがって、コントラストが低いと、目的が失われます。したがって、NGFADの答えは非常に適切であり、注意する必要があります。
それでも赤が必要だと思う場合は、単にそれをエラーメッセージの背景として使用し、次にテキストに白を使用できます。このようにして、色を維持しつつ、良好なコントラストを維持します。
また、フォントサイズにも注意してください。一部の人々は、特にそのような低いコントラストで、そのようなフォントサイズでそれを見ないかもしれません。フォントサイズまたはフォントの太さを大きくしてみてください。
最後に、StackOverflowが行うことを実行できます。フィールドの下でエラーメッセージを使用する代わりに、フィールド全体でアラートを使用します。下のキャプチャを参照してください。
編集：言及するのを忘れました：にいる間、「エラーメッセージには赤は必要ありません」、この画像には、エラーメッセージではない赤いGoogleボタンが表示されています。結論は次のとおりです。色は関係ありません。重要なのは、メッセージを表示してわかりやすくすることです
メッセージは完全な文法的な文である必要があります。次に例を示します。
That username or password is incorrect.
私はThatよりもTheを好んでいます。というのは、Word Thatがユーザーが入力したユーザー名またはパスワードを参照していることがより明確だからです。 （「ユーザー名またはパスワードが正しくありません。」とはどういう意味ですか？登録の詳細がなんらかの理由で間違っているとユーザーに思わせるかもしれませんが、メッセージはユーザーが入力したものが間違っていることを示しています。）
メッセージング階層
この例のメッセージは、フィールド検証エラー「有効なメールアドレスではありません」の典型的なものです。そのスタイルはそのレベルで適切ですが、別の回答で指摘されているように、コントラストの問題があります。
サインインの失敗は重大なエラーであり、単純なフィールド検証エラーよりも強力に通知する必要があります。フォームでユーザーのフォーカスを追跡し、重大なエラーが通常どこでどのように伝えられるかを検討し、情報を見落としたり誤解したりする可能性がないことを確認します。
この例では、システムは認証エラーを通知しています。
ネガティブなエラーステートメントだけでなく、推奨される次のアクションを提供することも重要です。
フィールドエントリは技術的に有効であるため、フィールドレベルのエラーは発生しません。
エラーメッセージには赤い色が不可欠だと思います。ユーザーがテキストの赤い色を見て、それに慣れているのはエラーメッセージです。しかし、赤のさまざまな色合いを試してください。あなたが使用したものは十分に見えません。テキストを太字にすることができます。
上記の点に同意します。入力ボックスにラベルを付ける必要があります。プレースホルダーをラベルとして使用することは、正しい方法ではありません。
通常、ユーザーはデザインの手掛かりを見つけます。適切な手掛かりを適切な場所に提供したいと考えています。
間違った入力の背景色を、境界線の色の赤よりも明るい赤に設定します。 （またはその逆）次に、パスワードの場合は、前の入力を削除し、背景テキストを次のように設定します。パスワードが正しくありません。テキストは、白またはテキスト編集の背景の色にすることができます。注：フォントが切り取られているように見えるため、フォントが厚いほどうまく機能します。少しのフェードを追加して、いくつかの追加の効果を加えます。