16

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

Improve this question
6
  • 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, 2017 at 9:25
  • yes,I agree with Dimitra
    – Harshith
    Jun 13, 2017 at 9:32
  • 6
    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, 2017 at 10:57
  • @dosxuk, that is why I said, talking as a user
    – Dimitra Miha
    Jun 13, 2017 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, 2017 at 13:17

2 Answers 2

Reset to default
8

Try using a toast in material design:

At the bottom of the screen "No internet connection!" in yellow and "RETRY" in red

Material-UI Snackbars Docs

I think this should solve your problem. If not try cards:

icon next to the first name input, with popup error underneath

In this case, clicking on the icon reveals the error text. The main thing we need to show to the user is that there is error in a field.

Or simply show "email/password entered is incorrect. Please check."

Improve this answer
4
  • 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, 2017 at 13:11
  • yes , let me know if it works
    – Harshith
    Jun 13, 2017 at 13:14
  • Updated the post with the new design. Using a snackbar works well. Thanks for the help!
    – Sebastian S
    Jun 13, 2017 at 14:40
  • can u decrease the size
    – Harshith
    Jun 13, 2017 at 16:08
0

You can also use MUI Alerts - https://mui.com/components/alert/#main-content

IMO, the placement of the Snackbar (bottom fo the screen) seems not where you would expect an error message to be.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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