12

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:

Examples

  1. The first option does not follow our safety regulations as it tells the user which of the fields is wrong.
  2. In the second option the information is repetitive and feels like it doesn't provide the user with any helpful info.
  3. 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.

Updated design


  • 2
    talking as a user, I would like to know what is really going wrong. If my email does not exist in your database, I would like to know it, so that I can sign in. If my password is not correct, I would like to know it, so that I can try another password, or change my password in the case that I forgot it. – Dimitra Miha Jun 13 '17 at 9:25
  • yes,I agree with Dimitra – Harshith Jun 13 '17 at 9:32
  • 3
    Showing an error that your username exists but your password is wrong tells an attacker that they've got your username, and only need to work out the password. It may be slightly less user friendly, but it dramatically improves the security of your account. – dosxuk Jun 13 '17 at 10:57
  • @dosxuk, that is why I said, talking as a user – Dimitra Miha Jun 13 '17 at 12:26
  • Yes, this is what's causing some conflict in our office. Some would like to go for the less secure option and give more detailed information to the user, while me and others support the more secure options. – Sebastian S Jun 13 '17 at 13:17
6

Try using toast in material design

enter image description here

Material-UI Snackbars Docs https://material.io/guidelines/components/snackbars-toasts.html

I think this should solve your problem

If not try this other option of card

enter image description here

In this case have a error shown and show a icon, as the error text is big by clicking on the icon reveals the text. Main thing we need to show to user is there is error in a field.

Or simply show email/password entered is incorrect . please check

  • Yeah, the snackbar toast seems like a viable option. Will play around with the colors to see if we can make it work. – Sebastian S Jun 13 '17 at 13:11
  • yes , let me know if it works – Harshith Jun 13 '17 at 13:14
  • Updated the post with the new design. Using a snackbar works well. Thanks for the help! – Sebastian S Jun 13 '17 at 14:40
  • can u decrease the size – Harshith Jun 13 '17 at 16:08

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.