54

I have a big website with some forms. There are four background-colours for the form components. One of them is pink/red.

Here the image and the error message:

Enter image description here

I can't change the form background-color, but I'm free to change the message style (background-color, text-color, etc.).

What do you think? I don't like it the red with white text. The error message is not very visible, because the background is red. I've been trying for a few days with other red styles, and some oranges, but it looks weird.

Blue or green backgrounds are really visibles, but it could be confusing. (success = green, error = red)

How can I improve this form?

I mean, I should change the error message and don't touch the select components.

Some options, inspired by your answers:

form-errors

  • 1 is current.
  • 2 looks nice
  • 3 weird
  • 4 (darker) and 5 (lighter), similar, but the shadow is different

Thanks you all for the feedback!!

  • 6
    Why can you not change the form background? Its a bit harsh on the eyes. Anyways a white background message with red text/warning icon could work. – DasBeasto May 19 '16 at 14:26
  • 13
    #2 - It's your best bet, Your already way off with that background, at least #2 is readable, and the yellow draws attention. There's no rule that errors have to be red, they just usually are cause it really stands out. In this case yellow stands out. – coteyr May 19 '16 at 17:17
  • 1
    Seré infantil, pero un poco me saca una sonrisa ver software en español por acá – mgarciaisaia May 19 '16 at 17:53
  • 22
    Just use red on red. Users ignore error messages anyway, might as well make it easier for them to do so. – SQB May 19 '16 at 18:05
  • 4
    I know you've already accepted an answer but I recommend this slight modification. Suggested improvment – MonkeyZeus May 20 '16 at 13:26
77

I'd go with a color that'll always retain stark contrast. I'd also avoid venturing too far outside of the styles that that users are generally familiar with. Because you're working in an atypical style, if you deviate and use unfamiliar elements you may risk confusing a percentage of your users. Here's what i think i'd recommend. enter image description here

  • Thanks, that's the solution i'm working atm. Some red mark and a white/black message bgcolor. A set of solutions by your answers. I'm going to study this, because it's really a pain in the *ss. – jBaumann May 19 '16 at 15:44
  • 4
    Maybe a black border round the whole box too, so that the red stripe stands out a bit more ... agree that it's best to stick with standard colours and try to find a solution using those ... must be an absolute nightmare with that background, though. – Algy Taylor May 20 '16 at 9:43
  • 6
  • 2
    @AlgyTaylor I'd go with white. I made quick samples: Black border - White border – Ave May 21 '16 at 10:46
  • @ardaozkal I like your quick samples; I just feel bad that my paint skills aren't up to the same level as yours :( – MonkeyZeus May 23 '16 at 12:42
67

I would go with something in the shade of the background, but have a more red text in the alert. You can add a border in the shade of the text to make it stand out as an error more, as well.

Picking a lighter shade of the background

43

A bright yellow background with black text would work well.

Fits the colour scheme of a warning sign.

yellow/black warning image

  • 1
    This implementation looks a bit harsh but I like how the OP has used it. – Andrew Martin May 19 '16 at 15:28
  • Yes, I like more my yellow example than this one, but inspiration came from here. – jBaumann May 19 '16 at 17:05
  • 5
    @Mayo No, it should be an answer. Comments aren't for answers. Even if it's 1 line, it can always be expanded (as this was, providing an image). – Insane May 20 '16 at 9:08
  • 3
    Yellow always strikes me more as a warning rather than error. – Joshpbarron May 20 '16 at 9:57
23

The standard color for error messages is red, see this question :

One important point to understand is that using conventional colors for errors is important because they make the errors more noticeable. User being annoyed by the color of error message is lot less of a problem than user not being able to complete the form because they didn't notice the error. At least in most cases.

Since red will be lost in your background, the next best thing is to use yellow with a red error symbol.

The yellow attracts attention and also has a very good contrast with the background. The red error symbol conveys to the user that this is an error message, since this is a well accepted standard symbol.

enter image description here

  • Thanks, that what I said in a comment. Great explanation, I agree with you. Im going to improve the error's styles in the next release of the app. – jBaumann May 20 '16 at 9:17
21

You might try adding a white border, then play with the background color.

The one color that communicates 'something is wrong' louder than red is the color of death, black.

Dark red with white border, black with white border

  • Was going to propose this. The latter (white on black with border) is the best for a classic design, but this feels more modern. Asker should pick between either this or that. – Ave May 21 '16 at 10:45
17

That's an accessibility nightmare!

Try reversing your error message styles: Red text on a white background.

enter image description here

  • 1
    Hmmm, I'm going to try, but there are a lot of white elements in the form, I think it is going to be confusing – jBaumann May 19 '16 at 14:32
  • a) how many of the other white elements have red text? and b) these new elements will not normally be present but will 'appear' when there is a problem - It's not ideal and by no means perfect but you already have a form that's going to be impossible to read for some people. – Andrew Martin May 19 '16 at 14:37
  • I got inspired by your idea, I'm going to update my question with a new image. – jBaumann May 19 '16 at 15:01
  • 1
    @Baumann - I improved the image - now it's more inline with your situation – Andrew Martin May 19 '16 at 15:22
  • 1
    I see, I think it looks nice. I'm thinking in put some danger/warning icon in your solution and maybe some shadow. – jBaumann May 19 '16 at 15:26
9

Building off of several other answers: enter image description here

Never only rely on color. Adding an icon or text or texture not only helps colorblind people, but also makes things a bit easier for regular-seeing people.

Using a dark grey or black bar gives a strong contrast with the background. It's also color neutral so you can put other kinds/colors of notifications in those boxes.

Using an orange or yellow instead of red avoids looking too close to the background. And it still has useful connotation from warning signs.

3

The question actually provided a lot of the alternate options available, but for clarity I thought it would be good to summarize some of the answers provided:

  • Find a complementary colour to use that will stand out - there are plenty of tools for this, and you can also consult the branding guidelines as a secondary check; this could be for the UI, the font colour or a combination of both.
  • Create a different layer to bring the focus to the user - the best example is the use of shadows to make the message component 'pop' out from the rest of the interface, so creating a 3d effect in a flat design space
  • Customize the message component in a way that creates focus in a different way to the rest of the interface; the example given in the answer with the minimal striping on the left-hand side with black background is a nice implementation of the idea
  • Apply an interaction or behavioural pattern - this one is different from the rest as it is not about visual styling but behavioural or pattern design, so an example would be an animation for the message component that lasts a little bit longer so it is easier to notice, or create a persistent component that the user has to close, etc.
  • Tĥe effort of summarizing all the comments is well worth it. – Pierre Arlaud May 20 '16 at 7:54
-1

You could also try a light red background for the alert: enter image description here

  • That's what im doing now. Check my updated image – jBaumann May 19 '16 at 15:19
  • 3
    The background of the error message should be contrast to the background color of screen. Error message should pull user's attention. – Aditya Durgude May 20 '16 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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