I'm considering changing my label ('The username or password incorrect.). This is the current design:
Any good design for this label?
I want the new label to get more attention than it used to be right now.
-
20I'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.– DasBeastoCommented Jul 24, 2017 at 14:01
-
10Where are the labels?– DarrylGoddenCommented Jul 24, 2017 at 14:17
-
1No the labels for those fields...– DarrylGoddenCommented Jul 24, 2017 at 14:53
-
5Can 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.– CodesInChaosCommented Jul 24, 2017 at 16:51
-
57A verb would nice in this sentence– vijroxCommented Jul 24, 2017 at 17:33
|
Show 4 more comments
6 Answers
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;
Check out this tool to measure color contrast.
answered Jul 24, 2017 at 13:45
-
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.– nivhaninCommented Jul 24, 2017 at 13:58
-
11The 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. Commented Jul 24, 2017 at 14:18
-
8It's not just the color you have to worry about. You would also need to worry about the font size in that color.– IgorekCommented Jul 24, 2017 at 15:28
-
... and also make it color-blind friendly.– user56701Commented Jul 25, 2017 at 9:21
-
3@stanri That is the point of setting good contrast ratio - to make it colour-blind friendly.– JonW ♦Commented Jul 25, 2017 at 10:26
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:
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 Commented Jul 25, 2017 at 6:18
-
1"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. Commented Jul 26, 2017 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– DevinCommented Jul 26, 2017 at 20:42
-
This pointer is pointing at the "email", but it's referring to both of the fields. I would put that error message up top.– M BoCommented Dec 13, 2021 at 20:11
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.)
-
-
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".– DevinCommented Jul 24, 2017 at 17:12
-
7I 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.– StilezCommented Jul 24, 2017 at 18:41 -
I have never seen That used either. I would use Stilez suggestion– AndersCommented Aug 4, 2017 at 12:32
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.
answered Jul 25, 2017 at 17:31
-
I agree with this. In the original example, it looks like the error message is only pertaining to the password since it's located under the password field, but it's really pertaining to both, so must therefore be at the very top.– M BoCommented Dec 13, 2021 at 20:10
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.
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.
