WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 months ago

#36010 new enhancement

New password reset styling changes are confusing to casual users

Reported by: dcavins Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 4.4
Component: Login and Registration Keywords: has-screenshots ux-feedback
Focuses: ui Cc:

Description

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.

Attachments (12)

wp-login.png (6.4 KB) - added by dcavins 2 years ago.
Input styling on wp-login.php.
reset-password.png (18.7 KB) - added by dcavins 2 years ago.
Reset password inputs are styled differently.
reset-password-standard.png (20.2 KB) - added by dcavins 2 years ago.
Resetting the styling of the password input.
login-after-new-password-set.png (9.3 KB) - added by dcavins 2 years ago.
Offering guidance after the new password is set.
36010.vis-styling.01.patch (845 bytes) - added by dcavins 2 years ago.
Minimize styling of the password reset inputs.
wp-admin-password-reset.png (27.0 KB) - added by dcavins 2 years ago.
Screenshot of the wp-admin password reset form after patch 36010.vis-styling.01.patch.
wp-login-password-reset.png (26.5 KB) - added by dcavins 2 years ago.
Screenshot of the wp-login form after 36010.vis-styling.01.patch.
progress_indicator.png (77.2 KB) - added by wgroenewold 20 months ago.
Step indicator
36010.hide-hint-text.01.diff (1.1 KB) - added by dcavins 5 months ago.
Only show password hint text when it's needed.
36010.labels-plus-new-step.01.diff (3.2 KB) - added by dcavins 5 months ago.
Change labels to improve clarity (I hope) and add new step with more helper text,
password-reset-flow-20171002.png (125.2 KB) - added by dcavins 5 months ago.
Password reset process flow showing proposed changes.
36010-testing.1.diff (5.1 KB) - added by dcavins 5 months ago.
A combined patch for testing. This includes the changes in the three patches already submitted. Thanks for testing!

Download all attachments as: .zip

Change History (30)

@dcavins
2 years ago

Input styling on wp-login.php.

@dcavins
2 years ago

Reset password inputs are styled differently.

@dcavins
2 years ago

Resetting the styling of the password input.

@dcavins
2 years ago

Offering guidance after the new password is set.

#1 @DrewAPicture
2 years ago

  • Keywords has-screenshots added

#2 @SergeyBiryukov
2 years ago

  • Component changed from Users to Login and Registration

#3 @johnbillion
2 years ago

  • Keywords ux-feedback added

#4 @melchoyce
2 years ago

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..." ?

#5 @dcavins
2 years ago

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.

#6 @melchoyce
2 years ago

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
2 years ago

Minimize styling of the password reset inputs.

@dcavins
2 years ago

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

@dcavins
2 years ago

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

#7 @dcavins
2 years ago

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.

This ticket was mentioned in Slack in #design by wgroenewold2. View the logs.


20 months ago

#9 @wgroenewold
20 months ago

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
20 months ago

Step indicator

#10 @markcbain
18 months ago

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?

#11 @DrewAPicture
18 months ago

#16318 was marked as a duplicate.

#12 @DrewAPicture
18 months ago

#37872 was marked as a duplicate.

#13 @davidbourguignon
18 months ago

(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.

#14 @knutsp
18 months ago

  • Severity changed from normal to major
  • Summary changed from New password reset styling changes are confusing to casual users. to New password reset styling changes are confusing to casual users
  • Version changed from 4.4.2 to 4.4

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 months ago

#16 @melchoyce
5 months ago

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

#17 @dcavins
5 months ago

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
5 months ago

Only show password hint text when it's needed.

@dcavins
5 months ago

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

#18 @dcavins
5 months ago

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."
  1. Check email step - /wp-login.php?checkemail=confirm
  • No changes
  1. 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.
  1. 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.
  1. 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
5 months ago

Password reset process flow showing proposed changes.

@dcavins
5 months ago

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

Note: See TracTickets for help on using tickets.