New password reset styling changes are confusing to casual users

[dcavins]

I've noticed an uptick in how many of my users have been confused by the password reset process recently. In talking a few of them through the process, I realized that there are two spots where they are unsure of what to do:

• On the password reset screen, the "New password" input doesn't look like the other inputs they've encountered, like at wp-login.php.
• Once they click "Reset password," they're expecting to receive an email containing the new password (and aren't realizing that the characters in the "new password" box are the new password). So, when they're redirected to a standard login screen, they're doubtful.

About the first issue, I'm attaching mockups of the reset password screen with less styling. It's less visually interesting to advanced users, but maybe less is more for less experienced users.

To help with the second issue, adding an instructional banner might help. For instance, if we were to redirect on submission of the "reset password" form to wp-login/?newpass=true or similar, then we could offer some guidance. See attached images.

Thanks for your consideration.

[dcavins]

Input styling on wp-login.php.

[dcavins]

Reset password inputs are styled differently.

[dcavins]

Resetting the styling of the password input.

[dcavins]

Offering guidance after the new password is set.

[melchoyce]

Just want to clarify: the change being made here is separating the "Strong" indicator from the input so the input retains its regular styling, and adding the additional notice about "using your new password..." ?

[dcavins]

Hi @melchoyce: Yes, this ticket started out about the visual styling on the "new password" input which was updated in https://core.trac.wordpress.org/changeset/33023
There was a lot of discussion (but not really about the visual styling) in the associated ticket: https://core.trac.wordpress.org/ticket/32589
I'm happy to simply change the reset styling on my installation, but wanted to send the feedback back to the WP contributor team for your consideration.

I included the second issue because the same users were confused in both places. The second issue seems to be mostly a language problem coupled with an uncertainty about where in the reset process the user is. Another thought on the second point: The button that starts the password reset process says "Get new password" which might contribute to the idea that the password will be sent via email?

Thanks for taking a look; the password reset process is hard to make easy for everyone.

[melchoyce]

Cool, I think that makes sense. Once someone makes a patch with these changes, it would be neat if you could test it out with some of your users and see how they do.

[dcavins]

Minimize styling of the password reset inputs.

[dcavins]

Screenshot of the wp-admin password reset form after patch 36010.vis-styling.01.patch.

[dcavins]

Screenshot of the wp-login form after 36010.vis-styling.01.patch.

[dcavins]

I've attached a patch changing the visual styling of the password reset form inputs and screenshots of the screens after the patch.

Because it looks like @markjaquith made the changes in r33023, I'm putting his name right here, because I'd like his thoughts on my changes. My suggestion is sort of a revert, and I don't love being the one suggesting a revert.

I'll add a patch about my second issue later today.

Thanks for your feedback and questions.

[wgroenewold]

Had a little thought on this. Since it's a two step process for signing in when you lost your password I feel there has to be something like a step indicator to indicate the amount of steps for the process. I couldn't find one in the current asset list of Wordpress, so I made a quick mockup of the idea.

[wgroenewold]

Step indicator

[markcbain]

Hi there

We're testing a site with users, and the registration flow is causing a great deal of confusion.

• it's not clear that the pre-filled password needs to be accepted (or changed to something else). Users seem to think that it's already their new password. They don't know that they need to click anything.
• the wording of the label on the button compounds this: when registering for the first time, they are not resetting anything, so it seems irrelevant to them.

This is actually more confusing than when someone is resetting, due to the label. Maybe a new ticket is required?

[DrewAPicture]

#16318 was marked as a duplicate.

[DrewAPicture]

#37872 was marked as a duplicate.

[davidbourguignon]

(This is a copy-paste of #37872 following the instructions of @DrewAPicture.)

Many subscribers are confused by the instructions on password reinit page.

Here are three suggestions for improving instructions wording (I am not using the English version of WordPress, so original wordings may be incorrect):

1) "Please enter your new password below."
-> "Please consider using the generated password or enter a new password below"

2) "New password"
-> "Your password"

3) "Hint: <How to choose a good password...>"
-> Remove it by default. Only display this hint when there is a red warning sign due to the detection of a "Weak" or "Very weak" password.

[knutsp]

This ticket is important. There is a lot of confusion out there. I have quite a few of support request about this.

[melchoyce]

@dcavins Hey, were you interested in creating a patch for this, or do you need someone else to do that part?

[dcavins]

Hi @melchoyce-

Yes, I'd be happy to take a run at the other pieces mentioned in this conversation above. I'll add them as separate patches.

Thanks,

-David

[dcavins]

Only show password hint text when it's needed.

[dcavins]

Change labels to improve clarity (I hope) and add new step with more helper text,

[dcavins]

I've attempted to incorporate useful feedback from others in this thread and have made these changes in three patches:
36010.vis-styling.01.patch
36010.hide-hint-text.01.diff
36010.labels-plus-new-step.01.diff

Here are the changes described (see flow image below for screenshots).

1. Begin reset password process - /wp-login.php?action=lostpassword

• Changed button text to "Start Password Reset" to make it clear there's more to do. Other providers mostly do it all in one process, and use this language: Microsoft says "Next," Apple says "Continue," Twitter says "Continue."

2. Check email step - /wp-login.php?checkemail=confirm

• No changes

3. Set new password step - /wp-login.php?action=rp

• Changed button text to "Confirm Password Change" in attempt to make it clearer that user action is required. (Could be "Confirm Password" if that would make more sense for new registrations.)
• Hint is not shown unless the password strength is poor.

4. Save new password step - /wp-login.php?action=resetpass

• I think more could happen here. This step saves the password and supplies a link to the log in form.

5. Log in using new password - /wp-login.php?reset-pass=success

• This is a new step that helps the user know they're still in the reset process. A help message is added above the login form. I think that this could be done as part of 4 above by changing the banner message and adding in the log in form, but there's probably some history there with the "rp" and "resetpass" actions sharing the same switch case. If we're ok with splitting those cases, I'd be happy to do more work on this (using the "rp" action for the reset form step and the "resetpass" action for the save password & log in step).

Thanks for taking a look at these changes and for your feedback.

-David

[dcavins]

Password reset process flow showing proposed changes.

[dcavins]

A combined patch for testing. This includes the changes in the three patches already submitted. Thanks for testing!

[estelaris]

Had used the new password reset process twice and it is not confusing at all. I think that what we have at WP 4.9.8 is easy enough to understand

[bookdude13]

Refreshed patch. Tested, looks good!

[bookdude13]

I agree with @estelaris that the current process isn't very confusing, but I do like the improvements given by @dcavins. I refreshed the patch (the js file moved into _enqueues folder) and tested out the flow. It looks good to me!