keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
113,160,457,863 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
22 Responses
Pro
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.
3 months ago
Pro
Underbelly (via Anthony La...
Love that interaction man! But what is my new password? I'm confused… =P
3 months ago
This is great. Did you do it all in Photoshop?
3 months ago
Pro
Shaun Moynihan
@Underbelly (via Anthony Lagoon) Ok, kinda funny that you replied first, haha. Your password is 'ellipse'.
3 months ago
Looks great! Could you put focus on the password field when "Change" is clicked?
3 months ago
Pro
Shaun Moynihan
@Ari Sure did...!
3 months ago
Pro
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.
3 months ago
Pro
Ala Dadan
very nice
3 months ago
Pro
Sam Asante
Stunning work, Shaun.
3 months ago
Pro
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.
3 months ago
Pro
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.
3 months ago
Pro
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.
3 months ago
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?
3 months ago
Pro
Shaun Moynihan
@Kurt Madsen Yea, completely in Photoshop. There will be a 'show password' and 'enter current password' field as well when resetting.
3 months ago
Pro
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.
3 months ago
Pro
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.
3 months ago
Pro
Allison Kozma
This looks great! I like that the account settings are lightboxed. Unique approach.
3 months ago
Pro
Bart Ebbekink
This is weird, i have the same password. Other than that, it looks great! Not liking the photo though. :)
3 months ago
really nice! love it!
3 months ago
Pro
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.
3 months ago
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 :)
3 months ago
Pro
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.
3 months ago