2

I have a page with the user data, such as name, age, address, e-mail and password. On this page, the data can be edited with an inline edit form and then click on a "save" button. The e-mail and the password can't be updated within the form, because it's used for the login, so the e-mail needs a confirmation before changing. Currently, both the e-mail and password, needs the current password before being updated.

My question is: Should I use a modal window to ask for the new E-mail/Password with the current Password confirmation? Or should I use a 'slide down' div to show the option for each of them?

The modal option seems a little better, because it will block the other options, making the user focus on just this task. But I also noticed some trends on avoiding modal, especially if it's to update user data.

Improve this question

1 Answer 1

Reset to default
1

If you use a modal dialog, you'll break the focus of the user. This is a good thing in some contexts, an excessive one in others. It takes time for users to switch their attention to the new, disruptive window, which is likely to partly cover the UI elements on which the user was focusing. It also makes it more costly to just cancel the edit, so to speak.

The issue you're facing is that you want to bring to the attention of users that they need to type their current password before editing their email or password. This is easily achieved by having a "Current Password" input field before input fields for those two attributes. You can naturally achieve this goal without breaking the focus of the user or preemptively asking them for their current password even though they might not need to edit their email/password.

Whether you want to keep the 4 fields (Email, Current Password, New Password, Repeat New Password) on the same form as other fields, along with a label indicating that they can be left blank if they do not need updating, or on a separate page dubbed "Account settings" or "Email / security settings" or something of the like is up to you. Note that the second option allows you to implement a modal "Re-type your password" page in order to indicate the requirement to confirm your password, without disturbing the user in the more general case of filling one's profile.

Improve this answer
2
  • Yes, I was thinking about that. The problem is my main form has the email field, but with readonly attr and the password is not even there, just a button to request a password change and other button to request email change. Currently the user page is divided by tab menu (material design), and I was thinking of doing what you said, an exclusive page for these updates. What do you think?
    – CelsomTrindade
    Commented Jan 11, 2016 at 0:17
  • It's hard to comment without seeing the UI and understand what preexisting technical constraints cannot be worked around. But I would say that you can put it all together if the resulting form is short, and you should separate to avoid clutter. On mobile UIs clutter would come faster so I would separate profile editing from account settings.
    – Steve Dodier-Lazaro
    Commented Jan 11, 2016 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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