web-dev-qa-db-ja.com

明るい赤がブランドのメインカラーである場合、どうすればエラーを強調できますか?

メインのブランドの色が赤であるクライアントのモバイルWebサイトに取り組んでいます。ウェブサイトのヘッダーと見出しはすべて赤です。 CTAボタンも赤です。エラーを(主にフォームプロセスで)コンテンツから効果的に分離するにはどうすればよいですか?

46
bernk

ブランドの色が赤であるからといって、エラーに赤を使用しなくなったわけではなく、それは単なる問題です。

Viaplayサインアップフォームを例に取ってください

enter image description here

Viaplayの主なアクセントカラーは赤で、ウェブサイト全体でアクションボタン、アイコン、ヘッダー、グラフィック要素などに使用されています。それらは、背景を赤にしたり、入力赤のラベルを付けたりすることはできません。したがって、コンテキスト内では、赤いエラーメッセージが目立ちます。

簡単に言えば、コンテキスト内でもコンテキストの問題です。ユーザー入力になると、サインアップフォームでは、単に赤を多用しないでください。通常のインラインエラーメッセージが背景に表示されます。

44
AndroidHustle

一般に、情報を示すために色のみを使用することは、アクセシビリティの理由から悪いことです。赤/緑の色覚異常が最も一般的であり、男性の8%で発生します。 Xや警告サインなどのアイコンを使用するのが最善の方法です。

ビジネス上の理由で色を区別する必要がある場合(つまり、上位の人々は別の色であると考えている場合)、他の配色とは異なるが、アイコンを主なインジケータとして使用する色を選択します。色がデフォルトのテキストの色と十分に高いコントラストを持っていることを確認してください。ユーザーがそれがどの色であるかわからなくても、違いは明らかです。

26
elemjay19

色を使用する代わりに、危険アイコン、フォントの太さ、ギザギザの輪郭など、他の方法で視覚的に強調します。

以下に例を示します過度にこれら3つのキューすべてを使用: enter image description here

編集:以下のコメントは、これらの3つの手がかりをすべて一緒に使用するのは過度であることを、元の投稿では十分に明確にしていないことを示唆しています。 (私は、単語を「過度に」太字で書いてもこれを示すのに十分だと思いました。)私は明確にします:これら3つの手掛かりのいずれかを使用することで十分ですエラーに注意を引くユーザーが入力している場所の横に表示されるメッセージ。 (上記のいずれかに依存する場合プライマリキューとして、色はセカンダリキュー以下になり、さらに注意を引くことができます。メッセージに気づく必要はありません。)3つのキューすべてを1つの例にすばやく入れて、そのような変更の強力な効果を実証します。それらを一緒に配置することで人々が混乱した場合は残念です。

14
Graham Herrli

黄色のボーダーを使用できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

3
rk.

それはあなたがサイトで使用している他の色に依存します。フォントは黒ですか?

あなたが持っているいくつかのオプションは次のとおりです。-赤いアイコンで白い背景ボックスを表示します。つまり、感嘆符-濃い赤の境界-白い境界の点線

良いアイコン-目立つ境界-コントラスト色が表示され、それが一貫していて、それがエラーである場合、それがエラーであることはユーザーには明らかです。

2
Rosie

@AndroidHustleは彼の回答でそれを完全に述べました。ユーザーがフォームに記入して送信しようとすると、何が問題なのかを正確に伝えるエラーが発生した場合、コンテキストがすべての鍵となります。フォームの横に表示されたばかりの赤い線を理解しても問題はありません。検証メッセージです。

検証エラーメッセージに異なる色を使用して、型を壊さないようにしてください。赤には多くの意味がありますが、赤が行うことの1つは注意を引くことです。そのため、黄色などの色を使用しても、赤ほど注意を引くことはありません。

0
Jason Frade