13

I'm considering changing my label ('The username or password incorrect.). This is the current design:

enter image description here

Any good design for this label?
I want the new label to get more attention than it used to be right now.

  • 20
    I'd at least increase the size, looks like you have plenty of space no need to limit the error to what looks like 10pt font. – DasBeasto Jul 24 '17 at 14:01
  • 10
    Where are the labels? – DarrylGodden Jul 24 '17 at 14:17
  • 1
    No the labels for those fields... – DarrylGodden Jul 24 '17 at 14:53
  • 5
    Can an attacker learn if a username exists via some other means (e.g. signup, password reset or a userlist)? If yes, using separate error messages for non existent users and wrong passwords improve usability while not hurting security. Alternatively pluck all those leaks. – CodesInChaos Jul 24 '17 at 16:51
  • 57
    A verb would nice in this sentence – vijrox Jul 24 '17 at 17:33
34

Increase contrast.

In your current version the contrast between the color you use for your error message and the background color is low.

Try either a brighter error color or a lighter background color. Here are some examples;

enter image description here

Check out this tool to measure color contrast.

  • are you sure that yellow will be good for error code?(problem) I need help to match good contrast to the current design... changing the background color is not an option. – nivhanin Jul 24 '17 at 13:58
  • 11
    The yellow I chose is an example. Try and find a color that has good contrast (4.5:1 or more) that also fits your branding. – Nick Groeneveld Jul 24 '17 at 14:18
  • 8
    It's not just the color you have to worry about. You would also need to worry about the font size in that color. – Igorek Jul 24 '17 at 15:28
  • ... and also make it color-blind friendly. – user56701 Jul 25 '17 at 9:21
  • 3
    @stanri That is the point of setting good contrast ratio - to make it colour-blind friendly. – JonW Jul 25 '17 at 10:26
20

First of all, I'd suggest you use labels for the fields, it's of paramount importance. Based on your screen capture, I assume you're using inline labels. Read reasons why NOT to do it at

Other than that, color is not an issue in error messages. Red is used often for familiarity for western users, and it comes because red is a very visible color. So if it has a low contrast, it loses its purpose. So NGFAD's answer is very sound and you should pay attention to it.

If you still think you want that red, you could simply use it as background for the error message, then use white for the text. This way you'll keep the color and still have good contrast.

Also, be aware of font sizes. Some people may not see it at such font size, specially with such low contrast. Try either increasing the font size or the font weight.

Finally, you can do what StackOverflow does: instead of using an error message below the field, it uses an alert OVER the field, see capture below:

enter image description here

EDIT: Forgot to mention: while we are at "red is not needed for error messages", you can see in this image the red Google button which obviously isn't an error message. Bottom line is: color doesn't matter, the important thing is to make the message visible and understandable

  • Please include a summary/TLDR version of the links to inline labels articles – User528491 Jul 25 '17 at 6:18
  • "color doesn't matter" is overstating the facts. Poor color decisions (like Google's domination-by-saturation palette) can be overcome, but proper color decisions can make messaging more self-evident. Color is definitely an important psychological trigger. – plainclothes Jul 26 '17 at 19:57
  • of course it's an overstatement based on the context of the question. That red is so important that around 35-40% of world population will scan it as "everything is cool to go" and 8-10% of males will see it as brown or golden. But well, the bottom line is that for the purposes of the OP question, it doesn't matter, even if an overstatement – Devin Jul 26 '17 at 20:42
9

The message should be a complete grammatical sentence, for example:

That username or password is incorrect.

I prefer That to The, because it is clearer that the word That refers to the username or password which the user typed. (What does "The username or password is incorrect." mean? It might give the user the idea that their registration details are somehow incorrect, whereas the message should indicate that what the user typed is incorrect.)

  • Syntax based on various sites includes StackOverflow – nivhanin Jul 24 '17 at 16:57
  • 7
    @nivhanin , I have never seen this on any site, but I'm 100% sure StackOverflow uses a complete sentence, I'm just seeing it right now and it literally says "The email or password is incorrect". – Devin Jul 24 '17 at 17:12
  • 7
    I would go further with the same idea, and be even more direct: The username or password you entered is incorrect. Please try again." It tells them something they did needs fixing, and the action they need to do, to fix it. – Stilez Jul 24 '17 at 18:41
  • I have never seen That used either. I would use Stilez suggestion – Anders Aug 4 '17 at 12:32
7

Messaging hierarchy

The messaging in your example is typical for a field validation error, "Not a valid email address". That style is appropriate at that level, though you do have a contrast problem as pointed out in another answer.

A failed sign-in is a critical error and should be communicated more forcefully than a simple field validation error. Follow the user's focus in the form and consider how and where critical errors are usually communicated and make sure there is no chance of missing or misunderstanding the information.

In this example the system is communicating an authentication error.
It's also important to provide suggested next actions, not just a negative error statement.
The field entries are technically valid so there is no field-level error.

Sign-in panel with normal and auth error states

2

I think, the color red is essential for error message... We as a users are used to it by seeing the red color in text is a error message. But try different shades of red. What you have used is not visible enough. You can make the text bolder.

I agree with some point in the above. You need to give labels to the input boxes. Using placeholders as a label is not right way of doing.

Generally user will find the clues in the design. We want to give the right clues at the right places.

0

Set the background color of the wrong input to a brighter red than the red of the border color. (Or the other way around) Then, if its the password, delete the previous input and set the background text to something like: The password is incorrect. The text can be white or the color in the background behind the text edit. Note: Works better with thicker fonts because it looks like its cut out. Maybe add a small fade to it for some extra effects.

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.