0

I have a page where the user can edit their settings using inline editing.

enter image description here

https://jsfiddle.net/ahw97j7r/3/embedded/result/

Useless stuff just updates the database, but Password and Email are a bit different.

Password requires the user to enter their newly desired password, but in addition, requires them to re-enter their newly desired new password to make sure they spelled it correctly, and provide their old password to ensure they are the correct user.

Email requires them to enter the newly desired email and also enter their password.

How would you recomment the user interface?

2 Answers 2

1

Prior to my mock-up of how I think this could work, I'd like to say I'm not really a fan of in-line overlaid prompts such as this. They are stylish but they have a restrictive user base (i.e. generally web/mobile confident users).

Older/less confident technology users may be confused by changing elements. Furthermore, I think you should consider people who use screen readers and those with JavaScript disabled.

That said, here's my wireframe flow.

In-line Password Change Sequence

2
  • Thanks Darryl, I acknowledge the concerns but are already going this route. Could you explain the workflow? User clicks "Change", and inline input appears or a dialog? If inline input, how is the prompt displayed? Is there an okay/cancel button? Apr 24, 2015 at 14:04
  • I'm using watermarks and responding to enter button clicks, but there's no reaosn you couldn't supply a physical button. Apr 24, 2015 at 15:13
0

Not sure if it is any good, but for it's worth, this is what I came up with. https://jsfiddle.net/qqqkzkx1/embedded/result/

If you have any scripting recommendations or constructive criticism, please post it https://codereview.stackexchange.com/questions/87980/inline-editing-for-modifying-field-that-requires-supplementary-inputs-such-as-p.

Thank you

Your Answer

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

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