2

I am using this behavior to make user change password:

When a user clicks on the change password button, 3 text fields appear and the button changes into a "cancel" button.

Do I have to separate the change the password section from the above fields? Or is it clear enough

change password behavior

  • This seems a little confusing. What is saved when the user clicks the "save" button in the first screen? Is that the same as what is saved when the user clicks "save" in the second screen? How does the user save the change of password? You appear to have two distinct sets of functionality but only one "save". – Andrew Martin Apr 20 '16 at 12:40
  • you mean we need to make the Save button dimmed when no change is done ? i see that many website make the save button active even if there is no change made – Basem Apr 20 '16 at 12:44
  • No, I meant that the save button appears to be for the first part of the form. Then you add the "Change password" functionality on top of that - When the user clicks save are they saving just the password change or the whole form - that's the confusing bit. – Andrew Martin Apr 20 '16 at 13:13
1

I think the way you've displayed it will work properly and people will understand it. However, I would suggest to remove the save button, because there won't be anything to save in the first image. Make this button the "change information" button, and once a person clicks this button, you change it to "save changes".

Not every user might notice the fact that the button has changed, since the button is going to change at the same moment the fields change, and they will be focusing on the change in fields, since this is what they are going to use next.

Grouping elements which do roughly the same will also improve user experience and usability, if you want to know more about this you should lookup the Gestalt principles.

  • Nice , but is it okay to disappear a button when clicked ? I mean when user hit change password it will disappear and a cancel button will appear in the bottom . and vise versa – Basem Apr 20 '16 at 12:43
  • Well, this isn't based on any data, but I assume that when a user presses the button "change password", he or she expects the page to change. I'd say, remove the save button, because there won't be anything to save in the first image. Make this button the "change information" or what ever button, and once a person clicks this button, you change it to "save changes". – MJB Apr 20 '16 at 12:57
0

I'd add one or more of these changes to make it more clear:

  • make the three new textfields and the button appear in the rightmost part of the screen, just where the button "Change Password" disappeared;

  • add a "Save New Password" button, just above "Cancel";

  • deactivate the "Save" button after the user clicked on "Change Password". Reactivate it again once the user entered (twice) the new password.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.