Reset Password Page UX

[erichmond]

I very often get users confused about the Reset Password page, users say they copy the suggested password and neglect to click the "Reset Password" link assuming it has already been reset. Users do not understand that the password is a suggested password and should be saved by clicking "Reset Password"
I usually send them a screen shot with instructions explaining what they should do on this page.

[magicroundabout]

Welcome, Elliott. Didn't realise this was your first ticket.

For others, I spotted Elliott tweet this and thought it was a really good piece of user feedback worth logging.

Now it's been pointed out I can totally see how:

a) It looks like the user is being given a new password with no further action required
b) The "Reset Password" button could be interpreted as "This is the button you press to get a new password different to the one you've been given above", not "This is the button you press to set the password above"

@erichmond Do you have suggestions for improving the dialog?

[magicroundabout]

@erichmond Do you not get the instruction above the form:

[erichmond]

I'm guessing that this is a general hook for the login form, wouldn't it be better to include it on the actaul "reset password" form?

Replying to magicroundabout:

@erichmond Do you not get the instruction above the form:

[erichmond]

crude reset password

[lukecavanagh]

@erichmond

I am for making it clearer that the password is just suggested and not the actual password that will be used when a password is reset.

[knutsp]

Yes, please. The current UX causes trouble.
But I think this tick et is a duplicate. Can't find the other one.

[erichmond]

Partly my fault here but, it turns out that the action hook "login_message" function takes a parameter ($message) that can be changed to make it more obvious to the user, it happened to be missing in my case. Thank you to @magicroundabout for pointing this out to me, simply changing this might be all the UX that is needed unless it's worth keeping this ticket open for any other reason?

[magicroundabout]

I'd like to improve it further if I can. I made this as a mock up of what you could do:

but there's still a possibility here that someone could navigate away without clicking a button.

Could we add a JavaScript check when the user navigates away to make sure that some action is taken?

@erichmond Because this change could involve commits to core code (that's why I encouraged you to raise it on trac rather than just make a plugin), we aren't limited to what hooks are available. So we can propose all sorts of fancy stuff!

[lukecavanagh]

@magicroundabout

I agree a function to remind the user if they navigate away before the password reset is set.

Something similar to say

​http://jsfiddle.net/3zR5r/2/

[tinodidriksen]

The password reset form definitely needs an overhaul. We also have several users be completely unable to use the form, eventually requiring manual intervention.

• The pre-filled password is assumed to be already set, so people just copy it and try to log in with it directly. This could be alleviated by renaming the "Reset Password" button to simply "Set Password", and making the page block navigating away from it without hitting the button.

• The pre-filled password box doesn't look or feel like an editable textbox, so users don't know how to change what is in it. Thus the hint of "Enter your new password below" is useless, as there seemingly is nowhere to enter it.

• Users click the "Reset Password" button without noting the suggested password, because they didn't have any active role in filling in that box. I suggest leaving the box empty with a "Generate Password" button next to it that fills it on demand. Also, put input focus in the box on page load.

[nico_martin]

I just had the same problem twice this day. Different Projects and completely different Users. How about just removing the suggested password? That would ensure the User HAS to set a Password and its way clearer further actions are required.

[markhowellsmead]

Just as it's a legal requirement in e-commerce to clearly and definitely define the text of the button, which must state what happens when you click on it, so this button should be more clearly marked. The automatically-generated “good“ password is a must, but the user direction could be improved by better labelling. I personally like a combination of the suggestions in comments comment:8 and comment:9.

[nico_martin]

As soon as the user sees a new Password there is a big chance he missunderstands it as his new password.

Better labeling would might help a little bit, but it would not solve the problem. Honestly, who reads those instructions? Most users need to have it self-explained.

What if the input would be empty, but there is a possibility to generate a strong PW (maybe one the bottom left? The strength indicator is of course a must).
That would ensure the user takes action.

[kara.mcnair]

display_password_new_user

[kara.mcnair]

I'm also new & ended up here from a link from #40605 that I was thinking of trying to tackle. [Hi Eric!]

A few thoughts.

"As soon as the user sees a new Password there is a big chance he missunderstands it as his new password."

This is definitely made more likely by the fact that the label above the text box actually says "New password" :) That really implies that the change has already occurred. @magicroundabout's suggested prompt gets away from that but I worry that it might be too long and people won't read it. Also, if people DO replace the text, then the name 'New password' makes sense to them again.

That said, that really is the new password field - as @tinodidriksen said - it doesn't look editable. The UX that is on the page for creating a new user and you show the password the system:
a) puts the keyboard focus in the text box
b) highlights the text in the text box
c) has some sort of glow outline on the text box making it clear that it's the active field

Would just implementing that make this clearer for users?

It still might make sense to change "Reset password" to "Save password" but I wonder if this might be enough.

[PS, guidance on how to properly insert images would be most welcome :) ]

[e_baker]

Why not write the suggested password upon creation, then if the user creates a new password, they can overwrite it?

That way, the users who navigate after seeing the suggested password would be right, and those who create a new password would be right.

I'd be happy to take this one on, just need a consensus on what should happen.

[nico_martin]

Hmm.. @e_baker: Not the worst Idea. But that would mean the action takes place before the user does anything. I don't think you expect something to happen only by entering a site.

[e_baker]

Great point @nico_martin. However, the user will have done something. They will have clicked on the link in their email to reset their password. I definitely don't think it should be done until that point.

[e_baker]

I do think @kara.mcnair might have the simplest way: just change the button value to "Save New Password"

[jaymanpandya]

Reset Password UX improvement

[jaymanpandya]

I was thinking of something like the above attached image...

[pixelverbieger]

Here's another person having this issue regularly; twice a month or so we have to explain this to customers struggling with the process of setting the first password.

Screenshot for reply # 20 is almost 100% what I would have suggested, too; instead of "Reset" I would prefer to write "Save".

[estelaris]

reset password proposal with password generator

[estelaris]

After reading all the comments, I love the way my hosting company does it. There is a button for PASSWORD GENERATOR, that brings a small box with an automated password or it can be overwritten (if chosen). The USE PASSWORD button is enabled after checking the box in the sentence that says "I have copied this password in a safe place". That action should be helpful to users.

Also, the RESET PASSWORD button should say SAVE PASSWORD. See attachment above for better illustration. Would have to be tested for accessibility

[souri_wpaustria]

I second this attempt:
https://core.trac.wordpress.org/attachment/ticket/39638/reset-password.jpg

The password reset page and wording is just horrible UX.
Beside the bad wording, which I tried to clarify with the german translation, the look and feel doesn't work, doesn't seem to be conceived by the users..

[megabyterose]

Replying to estelaris:

After reading all the comments, I love the way my hosting company does it. There is a button for PASSWORD GENERATOR, that brings a small box with an automated password or it can be overwritten (if chosen). The USE PASSWORD button is enabled after checking the box in the sentence that says "I have copied this password in a safe place". That action should be helpful to users.

Also, the RESET PASSWORD button should say SAVE PASSWORD. See attachment above for better illustration. Would have to be tested for accessibility

I agree. Hosting companies, cPanel, and Plesk are all very clear with a generate button with options. This type of layout gives a two really distinct choices to the user. (Though for some reason "Update" sounds better to me than "Save," but I'm not sure why. Maybe because Update is used more often throughout the rest of the WP UI?)

Just a general note on this ticket, the password generation on the user edit screen really confused my users (site admins) as well. It wasn't obvious that the password that was generated could be replaced (though the generated password being highlighted when you click Generate Password helps). Plus the button says "Generate Password," which wasn't intuitive for admins looking to change a user's password to something specific. I know there was a lot of old discussion on this UX in #24633, but I feel like whatever changes are made on the password reset page should also be made in the other locations listed here: https://core.trac.wordpress.org/ticket/24633#comment:76

(If this has been discussed elsewhere, can someone point me in the right direction?)

[audrasjb]

Moving for 5.7 consideration

[hedgefield]

I'd love to see this get shipped, I too have often been confused by this form!

https://core.trac.wordpress.org/attachment/ticket/39638/reset-password.jpg is a great step in the right direction. What I would tweak is:

• remove "Click to" from the "Click to generate password" button - it's a button, that's how it works.
• rename "Reset" to "Save new password". Because even with all the other improvements, and reading through this ticket, seeing that button still triggered the idea in me that that button resets what I entered in the password field... The whole process this form is a part of is 'resetting your password', the specific action you take by pressing that button is 'saving your new password'.

With those changes I'd say design and UX-wise this feels ready for a patch.

[xkon]

39638.diff​ is a first pass based on comment 28. I went for "Save Password" instead of "Save New Password" as mentioned just to keep the buttons within the width limits. Preview of patch as showin in 39638_preview.gif​ .

Since the form is using the existing user-profile.js that also handles the Profile edit a couple of simple additions did the trick but I'm not sure at all if we should nopriv the generate-password as is so a 2nd pair of eyes would be lovely as always (I'm not seeing anything wrong in doing it).

[hedgefield]

That looks awesome, thanks for making the changes! From a design point of view I'd say it's ready to ship.

[pixelverbieger]

I wonder if we should change the notice to

Enter your new password below or generate one.

or

Enter your new password below or have one generated.

The rest is perfect!

[poena]

Hi

I need a clarification -is the page we are testing the page we receive a link to via email after using the lost password link?
wp-login.php?action=rp&key=blah&login=blahblah?

[xkon]

Yes @poena exactly it's the wp-login.php?action=rp one :) .

@pixelverbieger I do agree with Enter your new password below or generate one. good point!

[audrasjb]

@whyisjake @peterwilsoncc
Pinging security team so we can have a greenlight on ticket:39638#comment:29

[audrasjb]

Patch refreshed to change the notice wording.

[audrasjb]

Thanks @xkon, I tested the last patch and it works great :)
39638.1.diff refreshes the patch to replace "Enter your new password below" with "Enter your new password below or generate one" (see comment 31).

[whyisjake]

Looks great, awesome work.

[SergeyBiryukov]

In 50153:

Login and Registration: Improve the UX of the Reset Password screen.

Previously, it was unclear that the displayed password is only being suggested and should be saved by clicking the Reset Password button.

This adds separate Generate Password and Save Password buttons, for clarity.

Props xkon, estelaris, jaymanpandya, hedgefield, audrasjb, erichmond, magicroundabout, lukecavanagh, knutsp, tinodidriksen, nico_martin, markhowellsmead, kara.mcnair, e_baker, pixelverbieger, souri_wpaustria, megabyterose, poena, whyisjake.
Fixes #39638.

[pixelverbieger]

I am really happy to see this issue fixed!

Could someone check and take a look at the CSS code for the box? At least when translated to German, there is not enough space for the buttons to align correctly.
Might apply to other languages, too, I guess.

[audrasjb]

Hi @pixelverbieger,

Would you mind opening a new ticket for this issue?
I can reproduce it as well, and I'm working on a patch in the meantime :)