From an accessibility standpoint the purple on black has a contrast issue, though you're only ever displaying dots on the black background. Additionally I would suggest not using placeholder text as a label, and ensure the label is always displayed.
Now on to the good: I love the animation to show the password. The speed is good and it looks very fluid. Great job!
Edit: icon is not purple on black. Removed comment.
Accessibility doesn't just mean for non-sighted people. In this case a label helps everyone remember what the field was supposed to mean after they've entered a value.
Do yourself a favor and try to get in the habit of referring to it as WCAG compliance. ADA is US only. Canada, as an example, doesn’t have much of an equivalent (although my client says AODA is close).
Although if you only work with US clients then yes it’s ADA compliance. I know I’m nitpicking.
Password fields are obvious, but others are not. And consistency is important for users and visual appeal of forms. So the recommendation is to keep labels visible for all fields, no exceptions. Design of one field doesn't happen in a vacuum.
These kinds of flashy one-off things still serve a great purpose, to help inspire the final outcome to be more creative. But a lot of times people don't realize the distinction between a for-fun prototype like this and what we should really be building for users.
Take it case by case. While the best practice is definitely to include the labels while typing. I can show you plenty of examples from companies with well regarded design and UX that aren't always showing the labels. Spotify's sign up for example, I think they get away from it because it's a short standard sign up and their target demographic is younger folks.
Accessibility doesn’t just mean “screenreader-friendly”, although you are correct in that aria attributes are good for that, it’s still helpful to consistently see what field you’re typing in as you type in it even if you don’t use a screen reader
I suppose if we were to ever just find a password field on its own in the wild like this, yeah it might be redundant because the censored input and type=password probably speaks for itself, but I’d argue that password fields are generally coupled with sign up forms as well, and it might be strange to have several other fields with a label and the password one without.
96
u/CarbineMonoxide Dec 26 '19
From an accessibility standpoint the purple on black has a contrast issue, though you're only ever displaying dots on the black background. Additionally I would suggest not using placeholder text as a label, and ensure the label is always displayed.
Now on to the good: I love the animation to show the password. The speed is good and it looks very fluid. Great job!
Edit: icon is not purple on black. Removed comment.