Make WordPress Core

Opened 7 years ago

Closed 3 years ago

Last modified 3 years ago

#39638 closed enhancement (fixed)

Reset Password Page UX

Reported by: erichmond's profile erichmond Owned by: audrasjb's profile audrasjb
Milestone: 5.7 Priority: normal
Severity: normal Version: 4.7.1
Component: Login and Registration Keywords: has-patch has-screenshots
Focuses: ui, css Cc:

Description

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.

Attachments (10)

passwordreset.png (66.8 KB) - added by erichmond 7 years ago.
crude WordPress reset password.png (51.2 KB) - added by erichmond 7 years ago.
crude reset password
Screen Shot 2017-01-19 at 23.19.36.png (45.1 KB) - added by erichmond 7 years ago.
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?
creating_new_user.png (33.9 KB) - added by kara.mcnair 7 years ago.
display_password_new_user
reset-password.jpg (38.5 KB) - added by jaymanpandya 7 years ago.
Reset Password UX improvement
wp reset password proposal.jpg (170.1 KB) - added by estelaris 6 years ago.
reset password proposal with password generator
39638.diff (2.8 KB) - added by xkon 3 years ago.
39638_preview.gif (100.7 KB) - added by xkon 3 years ago.
39638.1.diff (3.5 KB) - added by audrasjb 3 years ago.
Patch refreshed to change the notice wording.
zu-schmal.jpg (136.2 KB) - added by pixelverbieger 3 years ago.

Download all attachments as: .zip

Change History (49)

#1 @magicroundabout
7 years ago

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?

This ticket was mentioned in Slack in #core-flow by magicroundabout. View the logs.


7 years ago

#3 follow-up: @magicroundabout
7 years ago

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

https://cldup.com/R_sxOUFkLj.png

#4 in reply to: ↑ 3 @erichmond
7 years ago

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:

https://cldup.com/R_sxOUFkLj.png

#5 @erichmond
7 years ago

Last edited 7 years ago by erichmond (previous) (diff)

@erichmond
7 years ago

crude reset password

#6 @lukecavanagh
7 years ago

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

#7 @knutsp
7 years ago

  • Component changed from Users to Login and Registration

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

@erichmond
7 years ago

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?

#8 @magicroundabout
7 years ago

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

https://cldup.com/tL8DA2RWci.png

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!

#9 @lukecavanagh
7 years ago

@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/

#10 @tinodidriksen
7 years ago

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.

#11 @swissspidy
7 years ago

  • Keywords ux-feedback ui-feedback added

#12 @nico_martin
7 years ago

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.

#13 @markhowellsmead
7 years ago

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.

Last edited 7 years ago by markhowellsmead (previous) (diff)

#14 @nico_martin
7 years ago

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

display_password_new_user

#15 @kara.mcnair
7 years ago

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

https://core.trac.wordpress.org/attachment/ticket/39638/creating_new_user.png

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 :) ]

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

#16 @e_baker
7 years ago

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.

#17 @nico_martin
7 years ago

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.

#18 @e_baker
7 years ago

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.

#19 @e_baker
7 years ago

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

@jaymanpandya
7 years ago

Reset Password UX improvement

#20 @jaymanpandya
7 years ago

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

#21 @pixelverbieger
7 years ago

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.

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

Version 0, edited 7 years ago by pixelverbieger (next)

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


6 years ago

@estelaris
6 years ago

reset password proposal with password generator

#23 follow-up: @estelaris
6 years ago

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

Last edited 6 years ago by estelaris (previous) (diff)

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


6 years ago

#25 @souri_wpaustria
6 years ago

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

#26 in reply to: ↑ 23 @megabyterose
5 years ago

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?)

#27 @audrasjb
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.7
  • Owner set to audrasjb
  • Status changed from new to assigned

Moving for 5.7 consideration

#28 @hedgefield
3 years ago

  • Keywords ux-feedback ui-feedback removed

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

@xkon
3 years ago

#29 @xkon
3 years ago

  • Keywords has-patch dev-feedback has-screenshots added; needs-patch removed

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

#30 @hedgefield
3 years ago

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

#31 @pixelverbieger
3 years ago

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!

#32 @poena
3 years ago

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?

#33 @xkon
3 years ago

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!

#34 @audrasjb
3 years ago

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

@audrasjb
3 years ago

Patch refreshed to change the notice wording.

#35 @audrasjb
3 years ago

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

#36 @whyisjake
3 years ago

  • Keywords commit added; dev-feedback removed

Looks great, awesome work.

#37 @SergeyBiryukov
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#38 @pixelverbieger
3 years ago

  • Focuses css added

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.

#39 @audrasjb
3 years ago

  • Keywords commit removed

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 :)

Note: See TracTickets for help on using tickets.