web-dev-qa-db-ja.com

赤はフォーム検証エラーに本当に適切ですか?

赤色はエラーを強調するのに適切であると当然のように思われます。深刻なシステムエラーの場合、私は同意します。しかし、フォームの検証など、ユーザーが生成したエラーに適切な選択肢であるかどうか疑問に思っています。

次のようなものがよく見られます。

Red colored error message

私にとって、これはユーザーを非難したり叫んだりすることと同じです。代わりに私はこのようなものを考えました:

Yellow colored error message

言葉は同じですが、優しい口調のメッセージのようです。

私の意見:ユーザーはfeel -theyのように「エラー」を発生させる必要はなく、フォームはすでに、特に間違いを犯した場合には、十分に迷惑です。 1つまたは2つ(結局のところ、ユーザーが意図的に無効な電子メールを渡すことは試行ではないため)それは単なる小さな修正可能な誤りであり、ショーストッパーではありません。

システムエラーは別の問題です。システムエラーは必ずしもユーザーの責任ではなく、何かが壊れているか、ユーザーが制御できないことを意味します。ユーザーが生成したエラーを赤にする必要がある(または赤にするべきではない)理由はありますか?

注:メッセージのテキストやアイコンではなく、色を気にします。

38
Wesley Murch

このコンテキストでは赤がほとんどの慣習であるため、フォームに移動/送信する前に修正する必要があるエラーには赤を使用する必要があります。黄色は一般的に警告用です(たとえば、ユーザーはおそらく何かを改善する必要がある/できますが、続行を止めません)。 Yellowは、たとえば、パスワードの強度がbarに示されているパスワードの強度の高いものの1つで使用できます。弱いパスワードまたは非常に一般的なパスワードを提供したときにユーザーに警告します。

慣習に従うべきです(非常に強い理由がない限り)。言い換えると ヤコブのWebユーザーエクスペリエンスの法則 :ほとんどの時間は、ユーザーのWebサイト以外の場所で費やされます。

理解しておくべき重要な点の1つは、エラーに従来の色を使用すると、エラーがより目立つようになるため重要です。エラーメッセージの色に悩まされているユーザーは、ユーザーがエラーに気付かなかったためにフォームに入力できなかった場合よりも、問題はほとんどありません。少なくともほとんどの場合。

29
Illotus

エラーメッセージの赤、および重要な注意を喚起する何かへの警告は、西洋社会ではかなり標準的です。

WindowsやOSXなどのオペレーティングシステムでよく使用され、エラーには赤、警告には黄色、成功メッセージには緑を使用します。これは、赤い「X」または緑のチェックマークがあるだけのように微妙かもしれませんが、メッセージのステータスを伝えます。以下に、色の使用に関するWindows開発者向けガイドラインをいくつか示します。 http://msdn.Microsoft.com/en-us/library/windows/desktop/aa511283.aspx#meaning

あなたも私たちの道路でこれを見つけるでしょう。赤、黄、緑の信号機。赤い停止標識と進入禁止の標識。これは私たちが慣れ親しんでいる文化的な参考資料です。

Stop sign

実際、最近のユーザビリティテストでは、いくつかのメッセージが誤って赤く表示されるはずの警告として色分けされていました。ユーザーからのフィードバックは、これらをより明確にして、エラーメッセージのようにする必要があるというものでした。場合によっては、赤を指定することが優先されました。

赤のコンテキストが必要な場合、ユーザーは通常、怒鳴られたり、見栄えが悪いように感じられたりしません。

エラーメッセージに赤を使用しないという十分な理由がない限り、文化的な習慣や慣習に準拠する必要があります。別のものを使用することにした場合は、それが機能することを確認するために必ずテストしてください。

これがお役に立てば幸いです。

14
DigiKev

重要なユースケースを見落としていると思います。一部の企業のブランドカラーは赤/オレンジ/ピンクであり、多くの場合、ブランドカラーをエラーに関連付けることはお勧めできません。

色は設計ツールの1つにすぎません。この場合は、赤ではない警告/エラーアイコン(黄色/紫-コントラストが比較的強いもの)を使用することをお勧めします。

2
jared

私の経験では、「赤」はほとんどのユーザーがエラーと関連付ける色のようです。ほとんどのユーザー環境では、警告に赤を使用して対応しています。ただし、背景やテキストのコントラストが不十分な場合は、別の色を使用することもできます。

0
Matt Lynch