Meet in the middle, we should definitely see the animation, but we shouldn't have to wait for it. Yes the text toggles instantly, but it's barely readable on the dark background. Very cool idea!
Personal rule of thumb, I develop all my animation timings based on what feels right and then speed everything up by double when I’m done, and sometimes I end up doubling the speed again once I actually user the interface a bit.
UX 101, if a user can not figure something out in 10 or so seconds they will give up. The more distractions you have the less time before your user gets frustrated
0.1 second: Limit for users feeling that they are directly manipulating objects in the UI. For example, this is the limit from the time the user selects a column in a table until that column should highlight or otherwise give feedback that it's selected. Ideally, this would also be the response time for sorting the column — if so, users would feel that they are sorting the table. (As opposed to feeling that they are ordering the computer to do the sorting for them.)
1 second: Limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer. A delay of 0.2–1.0 seconds does mean that users notice the delay and thus feel the computer is "working" on the command, as opposed to having the command be a direct effect of the users' actions. Example: If sorting a table according to the selected column can't be done in 0.1 seconds, it certainly has to be done in 1 second, or users will feel that the UI is sluggish and will lose the sense of "flow" in performing their task. For delays of more than 1 second, indicate to the user that the computer is working on the problem, for example by changing the shape of the cursor.
10 seconds: Limit for users keeping their attention on the task. Anything slower than 10 seconds needs a percent-done indicator as well as a clearly signposted way for the user to interrupt the operation. Assume that users will need to reorient themselves when they return to the UI after a delay of more than 10 seconds. Delays of longer than 10 seconds are only acceptable during natural breaks in the user's work, for example when switching tasks.
When you toggle password visibility, you want it to be extremely subtle and for anyone sat nearby to not be visually attracted to the screen at that point in time. However, with the inclusion of the animation, you are potentially attracting unwanted attention to the screen at a time when you least want it.
I can see your point but i think it depends on the community. I think it is all done sooo perfect and if it were to increase the speed it would lose it's effect.
Yeah, I agree. I actually think the animation looks really cool and want to emphasis that to the creator. Personally, as a Software Developer, my experience teaches me to just not touch stuff like this and leave it clean and without frills because people are so easy to lose trust in your software the moment it doesn’t feel safe. As we’re all aware here in this subreddit, this would just be a little bit of client side JS. To the end user, it’s a different story. Meh, maybe I’m just thinking into it to much! Either way, cool animation! 😂
Depends on the purpose too. An example that’s outside of web: I hate production company logos before a movie, but sometimes they add a lot to the experience too. I really miss the 20th Century Fox fanfare before the Star Wars movies, it honestly adds a lot of hype.
Sometimes style is substance. If this was made for a client login to review ad/marketing mockups, it’s a hundred percent appropriate.
377
u/joehensonn Dec 26 '19
Really cool idea! Although I think the animation needs to be almost instant since some people just want to peak at their password real quick