Login: username error x design flaws
A novice user approached me saying they tried to log into WME, but their password wasn't working.
They said they reset the password several times, but nothing worked...
They sent me a screenshot. See if you guys can figure out the problem.
https://i.imgur.com/JwfFoRz.jpeg
Reasons to blame the user:
1) As soon as the user accesses the page, the phrase "Enter your username and password" appears.
2) As soon as the user accesses the page, the placeholder "Username" appears in the text entry field.
However, the user entered their email in place of the username. It's the user's fault!
Reasons to blame Waze:
1) Once the user clicks on the text entry field, the "Username" placeholder disappears.
2) After the user submits the form, the phrase "Enter your username and password" is located too far from the text entry fields (above the red bar).
3) The red bar is very vague (and still not fully translated to pt-br).
4) The green bar brings outdated and conflicting information compared to the red bar.
5) The persistence of the message related to the QR code at the top only contributes to increasing the noise in understanding the messages.
Solutions:
1) Duplicate the text "Username" and "Password" right above their respective text entry fields (below the green bar).
2) Adopt a resilient solution for the "Username" field, which could be one of the following:
a) Ideally, the field should accept both email or username indiscriminately.
b) If the architecture makes the first option difficult, a specific message should appear if the user types an "@" in this field (in JavaScript, during typing, and redundantly after form submission).
3) Prevent the display of the outdated green bar.
4) Adjust the message of the red bar, to suggest which login information is incorrect (I understand that obscuring the user can be intentional, but in this case, the simple indication that an email was entered instead of a username does not pose a security risk).
5) If the user has already opted for login with username and password, the error screen on login should make the option to log in with the QR code more discreet, in order to prioritize the already started flow.