Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on a mobile website for a client whose main brand color is red. The website header and headings are all red. CTA buttons are red too. How can I effectively separate errors (mostly in form processes) from the content?

share|improve this question
add comment

6 Answers 6

up vote 41 down vote accepted

Just because your brand color is red doesn't make the use of red for errors obsolete, it's just a matter of extent.

Take the Viaplay signup form for example:

enter image description here

Viaplay has red as their main accent color, which is used throughout the website for actions buttons, icons, header, graphic elements etc.. however, in the form they do tone down the use. They don't let the background be red, or having the labels for the input red either for that matter. So in the context the red error messages still stands out.

To put it short, it's a matter of context even within a context. When it comes to user input, eg. a signup form, simply avoid extensive use of red and the typical in-line error messages will still pop against the background.

share|improve this answer
1  
I'm going to reiterate @RoddyoftheFrozenPeas' comment on my answer here: [For accessibility] Color should be a secondary indicator used in conjunction with other indicators such as symbols, icons, or special fonts. –  norabora Apr 26 '13 at 18:54
    
@norabora that's no news to me. I've been practising interaction design since 2005, so that solely depending on a colour to convey a state being a bad idea is nothing new to me. However, the OP stressed the issue he saw in using red for error messages in a red predominant context. So I gave my two cents on that specific question, but left out the accessibility aspect (even though the image clearly depict it). I thought your answer that clearly stressed the importance of accessibility was a good one, which was why I +1'd it. Can't help that the majority liked mine better though. –  AndroidHustle Apr 27 '13 at 10:50
1  
This comment was more for those who come to look at this answer, since it is the accepted answer, to make sure that anyone who doesn't have 8 years design experience and doesn't know about the pitfalls of using color to solely display state will learn it. I'm not trying to take over your answer, just provide more information for other users. –  norabora Apr 28 '13 at 4:13
add comment

In general, using only color to indicate information is bad for accessibility reasons. Red/green colorblindness is the most common and occurs in 8% of males. Using an icon, like an X or warning sign, is the best way to go.

If you must differentiate color for business reasons (i.e. people at the top think it should be a different color), then pick one that is different from the rest of your color scheme but use an icon as the primary indicator. Make sure the color has a high enough contrast with your default text color that the difference is apparent even if a user can't tell what color it is.

share|improve this answer
5  
+1 for mentioning color blindness. Generally speaking, color should be a secondary indicator used in conjunction with other indicators such as symbols, icons, or special fonts. –  Roddy of the Frozen Peas Apr 22 '13 at 19:05
add comment

Instead of using colors, draw visual emphasis through other means, such as using danger icons, font weight, and/or jagged outlines.

Here's a an example, excessively using all three of these cues: enter image description here

EDIT: The comments below suggest that I didn't make it clear enough in my original post that using all three of these cues together would be excessive. (I'd thought that my boldfacing of the word "excessively" would be enough to show this.) I'll clarify: using any one of these three cues should be sufficient to draw attention to an error message that appears next to where the user is typing. (If you rely upon any of the above as the primary cue, then color will then become no more than a secondary cue, which can draw further attention, but which is not necessary to notice the message.) I put all three cues in one example quickly to demonstrate the powerful effect of such modifications, and I'm sorry if placing them together has confused people.

share|improve this answer
13  
You're missing fire, smoke and sound effects, then it'd be an excessive example. –  Matt Apr 22 '13 at 19:27
18  
You're forgetting <blink> –  mob Apr 22 '13 at 21:34
5  
and put it in <marque> so it can move from left to right –  mkk Apr 23 '13 at 7:55
2  
Yes, <blink> and it should flicker between italic and normal style font –  Adam Lynch Apr 25 '13 at 19:26
2  
@unor +1 - Yes!, if quoted like this: "abc@abc"@example.com, or "abc\@abc"@example.com. but it's hard (impossible) to find an email provider to let you do that. And also hard to find a web-form that will let you enter that. I frequently find web-forms that won't let you enter +plus addressed email addresses like abc+def@example.com. –  Kevin Fegan May 4 '13 at 0:48
show 3 more comments

You can use a yellow border.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
9  
Just beware that a yellow border is also used, by Chrome for example, to denote the input field having focus. –  Marjan Venema Apr 22 '13 at 17:54
2  
Interesting. I really have a brownish yellow overhere almost identical to the one in your mockup. Using Chrome "bare metal" fashion: no customisations. Could that have some influence? –  Marjan Venema Apr 22 '13 at 18:14
2  
Also, in Opera (depending on skin and theme), a yellow border means you have a saved login/form entry for that field. –  Steven Noto Apr 23 '13 at 1:24
1  
This calls for a standardization! :D –  rk. Apr 23 '13 at 11:59
2  
Just for the record, WebKit—including Chrome for now—implements focusRingColor based on platform. On the Mac, it's rgb(125, 173, 217) (light blue) and by default on Windows and Linux it's rgb(229, 151, 0) (gold). –  Kit Grose May 6 '13 at 5:35
show 5 more comments

It would depend on what other colour you are using on the site. Are the fonts black?

Some options that you have are: - Displaying a white background box with an icon in red. i.e. exclamation mark - Dark red border - white border dotted line

If you get a good icon - noticeable border - contrast colour and it's consistent and clear that is an error it should be obvious to the user that it is an error.

share|improve this answer
add comment

@AndroidHustle stated it perfectly in his answer. Context is the key in everything, if a user is filling out a form and they try to submit it and you give them errors telling them exactly what is wrong then they will have no problem understanding that the red lines that just appeared next to the form are validation messages.

Try not to break the mold by using different colors for validation error messages. Red has a lot of meanings but one thing that red does do is catch our attention so using colors like yellow may not attract as much attention as red.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.