: Red replacement as color convention in primarly-red websites I am working for a company, which web site uses red as its primary color, because this is the main corporate color (so, this could
I am working for a company, which web site uses red as its primary color, because this is the main corporate color (so, this could not be replaced).
The usual convention, of using red to highlight error messages, is being used, but messages are not actually being highlighted, because they seem to be other simple and conventional elements of the site.
I'm not a designer (I'm a backend developer), so I would like to have guidance from you UX/UI experts out there.
Any ideas?
More posts by @Eichhorn212
4 Comments
Sorted by latest first Latest Oldest Best
If you are talking about web forms, I'd still recommend using a red - but not a saturated red (something like E03030 is nice) and do in-line validation after field entry. Use an error symbol and mark validated fields using a green symbol but not a saturated green (30B030 is nice). Then the error fields will stand out better as the messages are directly in context with the field being edited and you don't have to worry about highlighting fields with after-submit validation.
Luke Wroblewski wrote an article called Inline Validation in Web Forms for the A List Apart website which is very useful in this respect. It describes the testing they undertook and the results found.
Keep it simple. Just use a white background for the error message with red type.
My advice is to use chrome around the error message and graphic icons to denote errors.
For example, you'll sometimes see error boxes with a black & yellow striped border, or a yellow triangle caution sign with an exclamation point, or a stop sign, etc.
Some other attention-getting color? Bright orange? Yellow with black type? I would say "neon green," but green is conventionally "go," so that's out. Magenta? Nobody ever colors anything magenta on purpose unless it's a wig.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.