Material Design – How to display a log in error
Problem
I am trying to create a log in page that follows the material design guidelines, but I don't know how to handle when the user inputs the wrong email or password.
In the material design guidelines they recommend showing an error text right below the incorrect input field, but for security reasons we cannot tell the user whether the email or password is wrong. We can only tell the user that one or both fields are wrong (but not which one).
Our current error message on a failed log in reads:
We dont recognize this e-mail or password. Double-check your information and try again.
Example
When trying to transfer this to our material design, we end up with options looking like this:
- The first option does not follow our safety regulations as it tells the user which of the fields is wrong.
- In the second option the information is repetitive and feels like it doesn't provide the user with any helpful info.
- The third option deviates from the material design guidelines.
We have thought about splitting the log in up into two pages, but that is something we want to avoid.
What's our best option?
Edit
Added a snackbar toast based on advice by @Harshith.
