WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 8 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:

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

passwordreset.png (66.8 KB) - added by erichmond 16 months ago.
crude WordPress reset password.png (51.2 KB) - added by erichmond 16 months ago.
crude reset password
Screen Shot 2017-01-19 at 23.19.36.png (45.1 KB) - added by erichmond 16 months 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 13 months ago.
display_password_new_user
reset-password.jpg (38.5 KB) - added by jaymanpandya 11 months ago.
Reset Password UX improvement

Download all attachments as: .zip

Change History (26)

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


16 months ago

#3 follow-up: @magicroundabout
16 months ago

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

https://cldup.com/R_sxOUFkLj.png

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

Last edited 16 months ago by erichmond (previous) (diff)

@erichmond
16 months ago

crude reset password

#6 @lukecavanagh
16 months 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
16 months 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
16 months 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
16 months 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
16 months 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
16 months 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
13 months ago

  • Keywords ux-feedback ui-feedback added

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

#14 @nico_martin
13 months 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
13 months ago

display_password_new_user

#15 @kara.mcnair
13 months 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 13 months ago by kara.mcnair (previous) (diff)

#16 @e_baker
13 months 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
13 months 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
13 months 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
13 months ago

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

@jaymanpandya
11 months ago

Reset Password UX improvement

#20 @jaymanpandya
11 months ago

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

#21 @pixelverbieger
8 months 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 8 months ago by pixelverbieger (previous) (diff)
Note: See TracTickets for help on using tickets.