WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 6 months ago

#39638 new enhancement

Reset Password Page UX

Reported by: erichmond Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.1
Component: Login and Registration Keywords: ux-feedback ui-feedback
Focuses: ui Cc:
PR Number:

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 (6)

passwordreset.png (66.8 KB) - added by erichmond 3 years ago.
crude WordPress reset password.png (51.2 KB) - added by erichmond 3 years ago.
crude reset password
Screen Shot 2017-01-19 at 23.19.36.png (45.1 KB) - added by erichmond 3 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 2 years ago.
display_password_new_user
reset-password.jpg (38.5 KB) - added by jaymanpandya 2 years ago.
Reset Password UX improvement
wp reset password proposal.jpg (170.1 KB) - added by estelaris 15 months ago.
reset password proposal with password generator

Download all attachments as: .zip

Change History (32)

#1 @magicroundabout
3 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.


3 years ago

#3 follow-up: @magicroundabout
3 years ago

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

https://cldup.com/R_sxOUFkLj.png

#4 in reply to: ↑ 3 @erichmond
3 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
3 years ago

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

@erichmond
3 years ago

crude reset password

#6 @lukecavanagh
3 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
3 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
3 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
3 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
3 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
3 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
2 years ago

  • Keywords ux-feedback ui-feedback added

#12 @nico_martin
2 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
2 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 2 years ago by markhowellsmead (previous) (diff)

#14 @nico_martin
2 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
2 years ago

display_password_new_user

#15 @kara.mcnair
2 years ago

I'm also new & ended up here from a link from https://core.trac.wordpress.org/ticket/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 2 years ago by kara.mcnair (previous) (diff)

#16 @e_baker
2 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
2 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
2 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
2 years ago

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

@jaymanpandya
2 years ago

Reset Password UX improvement

#20 @jaymanpandya
2 years ago

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

#21 @pixelverbieger
2 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.

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

Last edited 2 years ago by pixelverbieger (previous) (diff)

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


15 months ago

@estelaris
15 months ago

reset password proposal with password generator

#23 follow-up: @estelaris
15 months 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 15 months ago by estelaris (previous) (diff)

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


14 months ago

#25 @souri_wpaustria
13 months 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
6 months 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?)

Note: See TracTickets for help on using tickets.