Account Settings [gif]

Profile-001

1 Attachment

22 Responses

  1. Shaun Moynihan Shaun Moynihan

    Here is an updated 'Account Settings' modal for Jumpshare. It should be live in the next week!

    Non-retina users, click here for actual pixels.

    about 1 year ago

  2. Anthony Lagoon Anthony Lagoon

    Love that interaction man! But what is my new password? I'm confused… =P

    likes

    about 1 year ago

  3. Ari Ari

    This is great. Did you do it all in Photoshop?

    likes

    about 1 year ago

  4. Shaun Moynihan Shaun Moynihan

    @Underbelly (via Anthony Lagoon) Ok, kinda funny that you replied first, haha. Your password is 'ellipse'.

    likes

    about 1 year ago

  5. Avand Amiri Avand Amiri

    Looks great! Could you put focus on the password field when "Change" is clicked?

    about 1 year ago

  6. Shaun Moynihan Shaun Moynihan

    @Ari Sure did...!

    likes

    about 1 year ago

  7. Shaun Moynihan Shaun Moynihan

    @Avand Amiri Certainly, didn't want to put too much time into an animated gif. Checkout the full-size view for the focus state.

    about 1 year ago

  8. Ala Dadan Ala Dadan

    very nice

    likes

    about 1 year ago

  9. Sam Asante Sam Asante

    Stunning work, Shaun.

    likes

    about 1 year ago

  10. Kerem Suer Kerem Suer

    In general I'm not convinced with this user experience. It's just not really adding a whole lot of value to a simple interaction that could be simply displaying 2 text fields and a button. But if you had to push this forward, it would be cool if you had only one field for password and no change button at all. User clicks in the password text-field and second confirm password field shows as well as the update button. User enters the confirm password field, clicks on update button and extra field and button fades out.

    Cool animation.

    likes

    about 1 year ago

  11. Alex Pankratov Alex Pankratov

    Nice little interaction indeed, but why do you show blank Password field in the beginning? Just show the the "Change..." button.

    Also it should really be prompting for the current password too, unless it's a password *reset* form for forgotten passwords.

    likes

    about 1 year ago

  12. Shaun Moynihan Shaun Moynihan

    @Kerem Suer For the most part I agree, however having a 'Change' button is a good experience for those not savvy. The interaction for changing their email is the same way.

    @Alex Pankratov It's not a perfect example. Was primarily showing the animation for the modal. Also, the password field should have been filled from the start...saw that after upload.

    about 1 year ago

  13. Kurt Madsen Kurt Madsen

    I really like @Kerem's suggestion, but @Shaun makes a good point (one that I remind myself of nearly every day) — while new interactions can be objectively better and more intuitive, less savvy (and legacy) users have already-learned patterns of behavior and mental pathways for how they expect to complete a task. Thus, "new" stuff (e.g., changing the customary interaction pattern), thus, runs the risk of being confusing and/or off-putting.

    That said, this is pretty cool, @Shaun. Did you animate it purely in PS? Also, any thoughts on a "show password" option?

    about 1 year ago

  14. Shaun Moynihan Shaun Moynihan

    @Kurt Madsen Yea, completely in Photoshop. There will be a 'show password' and 'enter current password' field as well when resetting.

    about 1 year ago

  15. Mitchell Geere Mitchell Geere

    @Shaun Moynihan I think that you are incorrect. I agree with @Kerem Suer - I was actually heading down here to say exactly what Kerem said when I ran into his comment.

    If you are going to argue that having the button is more intuitive for un-savvy users then I will challenge you that your experience is still too complex for those users. Showing a field and a change button makes it unintuitive for savvy and un-savvy users creating a cognitive speed hump.

    Your savvy user now clicks in the text field but will be presented with a thought of "If I click change will it blank my password, should I enter a new password first then click change?!". Your un-savvy user will question much the same but then also wonder what the second field is for because it has no instruction - you assume convention of a confirm password but if you do then you forget that un-savvy users don't have that convention per se.

    I suggest perhaps making it more instructive and intuitive by simply removing the field, and on the button you say "Change Password" once clicked this reveals the two fields clearly marked as New Password and confirm with a save button and a cancel link.

    There is another technical point that you forgot about, as a malicious user if I happen to get into your profile (maybe you forgot to sign out) I can now change your password and take over your account because at no point am I required to give you my old password. (I would say you should require a password to change email as well)

    These are just my thoughts but I do feel like although your design is great and your animation smooth and cool the UX needs a bit more thinking.

    likes

    about 1 year ago

  16. Shaun Moynihan Shaun Moynihan

    @Mitchell Geere Thanks for your feedback. As for your comments about the UX (labels, verify password, etc.), these have already been addressed on the final modal. This shot was created several weeks before the final design solely to showcase the animations within the modal.

    As for the fields/buttons you mentioned, we've done extensive user testing and have found this to be the best solution.

    about 1 year ago

  17. Allison Kozma Allison Kozma

    This looks great! I like that the account settings are lightboxed. Unique approach.

    likes

    about 1 year ago

  18. Bart Ebbekink Bart Ebbekink

    This is weird, i have the same password. Other than that, it looks great! Not liking the photo though. :)

    likes

    about 1 year ago

  19. Andrey Dyadyura Andrey Dyadyura

    really nice! love it!

    likes

    about 1 year ago

  20. Natko Hasić Natko Hasić

    Looks nice but having a text field and "change" button is really confusing, @Mitchell Geere sums it up really good. Same goes for the email - do I first enter a new email and then click "change" or vice versa because at first glance "..." on the labels is not that obvious.
    Great job on the design and animation though.

    likes

    about 1 year ago

  21. Benjamin Krogh Benjamin Krogh

    Love the shot and the discussion around it. I would agree with @Kerem Suer and company, but just my $.02 worth. Good to hear the labels, etc have been addressed, because those are hella' necessary :)

    likes

    about 1 year ago

  22. Shaun Moynihan Shaun Moynihan

    @Benjamin Krogh I appreciate it! I also realize the interaction isn't the norm but it's working well in the tests we've performed.

    about 1 year ago

keyboard shortcuts: previous shot next shot L or F like