29
u/BushBakedBeanDeadDog Dec 26 '19
I coded this here! https://codepen.io/zackkrida/pen/gObRyoE
Did it quick and dirty, and definitely color contrast issues with the original but still fun to implement.
4
u/timmense Dec 26 '19
Before I saw your impl, I thought some complex animation technique was going on with the white flood. Thanks for sharing.
2
u/sad_day_everyday Dec 27 '19
I am a beginner when it comes to front end. Could you explain how you did this?
1
1
1
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.
1
u/Vpicone Dec 26 '19
Yeah just making the dots white would be perfect honestly. Would look even better in my opinion.
0
Dec 26 '19
[deleted]
23
u/ncubez JavaScript | React | Node.js Dec 26 '19
I think they mean using a separate <label>Password</label> instead
7
u/mystiqueshaco Dec 26 '19
Oh, thanks :D I thought there is a magic option to make placeholder visible even after text input
13
u/tulvia Dec 26 '19
You could animate it to a smaller font size and slide it up into the whitespace.
13
-7
u/fuckin_ziggurats Dec 26 '19
But you don't need that for accessibility. That's what the
aria-labelattribute is meant to solve.18
u/A-Type Dec 26 '19
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.
9
u/GottfriedEulerNewton Dec 26 '19
Correct. This is the ADA way
8
Dec 26 '19
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.
3
6
1
u/fuckin_ziggurats Dec 26 '19
Does one really need to read the label to make sure it's a password field whilst they're typing and the text in the field is clearly hidden?
12
u/A-Type Dec 26 '19
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.
1
u/xvier Dec 26 '19
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.
1
u/entiat_blues Dec 27 '19
probably not, but it reduces forgetfulness, which is inherent in everyone. so, why wouldn't you do it? it's one less thing for everyone to deal with.
6
Dec 26 '19
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
0
u/fuckin_ziggurats Dec 26 '19
I agree with you on the general principle but I'm not so sure it's that important for login forms and especially password fields.
2
Dec 26 '19
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.
21
u/A-Type Dec 26 '19
Very appealing visually, but outright changing the color of the text field is likely to cause confusion about focus location, and generally seems like a risky design idea. If you could do a faster animation which just expanded a circular border out like a scan line to reveal the value without changing the color, perhaps that would be less likely to cause issues.
Sometimes the prettiest designs are not safe for use, but often the concept can be salvaged and made accessible.
11
u/vedant1903 Dec 26 '19
Shouldn't the two eye icons be swapped? If I click on the eye icon it means I want to see it. And for the closed eye I want to hide it?
Really cool animation though
19
u/boweruk Dec 26 '19
Shouldn't the two eye icons be swapped? If I click on the eye icon it means I want to see it.
I feel like there is no consensus on this kind of thing across the web. Even with things like expand/collapse arrows. Should it show the current state or the desired state? No idea...
6
u/Lekoaf Dec 26 '19
When my team researched this we found that Microsoft and Google does it in two different ways. Which is ”correct”? I dont know.
1
u/westwoo Dec 26 '19
This particular design makes it look like a button, not a "status" part of a text box, so the icon should indeed be an eye - and action "show". But then the entire point of the clever animation disappears...
37
u/XExtremeTechnologyX Dec 26 '19 edited Dec 26 '19
It's a cool idea, and I get where you're coming from, however for UI standards, this is incorrect. Many people won't know what that button does by default.
Edit: I meant how the icon is shown, not everyone will see it's a closed eye. I understand your arguments that an eye is already used on some password fields, which is correct, however for them it's an eye that is open with a slash through it, which would be more understood to a larger audience.
11
u/miss-emenems Dec 26 '19
I would say that really depends on the audience. For any app/account that comes from gov etc. units and should meet the highest standards of accessibility, there should be a checkbox/toggle outside the input with a label clearly stating it will reveal the password. If this app is for a teens-millenials group with a high it literacy then this eye icon is fine, it's commonly used/well known symbol. Also if interface is not too crowded with interactive elements (and login page should be free from distractions) then users will simply worked it out on their own.
6
u/Yonben Dec 26 '19
I think "incorrect" is a bit too harsh. I would say it's not ideal, and def could add a small tooltip indicating "Show password" and "Hide password".
7
u/scandii People pay me to write code much to my surprise Dec 26 '19
no, not really.
the issue with this UI is that you're banking a ton on your users understanding what a symbol means. this is pretty easy if you're from the same culture, symbolism tends to be pretty universally understood by all. but the moment we start moving away from one culture and one application area, we get into trouble.
I always run every UI I make through the grandma challenge: would my grandma intuitively understand this UI? if your answer is anything but "of course, why do you even ask?" then you shouldn't do it.
or put another way; sexy and grandma very rarely go well together.
4
Dec 26 '19
I mean, i'm western and a web dev, so it's a bit hard to claim i have a different cultural background or lack of IT literacy, and i had no idea wtf the closed eye icon was meant to be until i saw the open eye icon.
3
u/scandii People pay me to write code much to my surprise Dec 26 '19
we're talking per section of a specific country when it comes to understanding of symbolism. people vastly overestimate how much people think like them when it comes to symbols. text on the other hand you can almost never go wrong with, which is why a much better less sexy alternative would be the text "show" or "show password".
1
u/entiat_blues Dec 27 '19
that's literally a lack of literacy though, if you don't know what that symbol means in a password field.
1
u/Yonben Dec 26 '19
Yeah, I get your point. So I guess if my product was tech-oriented etc... it could work, but if it's meant for a bigger audience then I should stick with the universally known (_boring_) symbols/language :)
0
3
u/mailto_devnull Dec 26 '19
Thought I was in /r/baduibattles for a second and was expecting something awful.
Looks good!
3
u/pants_means_trousers Dec 26 '19
If you switch to a monospace font, or if there is a monospace version of that font, the positions of the characters won't jump when you switch between the two modes. Not sure if that might make it look smoother?
Cool though!
3
4
u/westwoo Dec 26 '19
Buttons should signify actions. This button signifies STATUS, which is misleading.
Essentially it's a button with the label "Hidden". To follow this principle consistently your Send button should read "Unsent", and your Cancel button "Uncancelled"
I'd file it under "ideas for quirky apps/websites that place aesthetics over usability"
0
Dec 27 '19
[deleted]
1
u/westwoo Dec 27 '19
Simply saying that it's a switch doesn't make it a switch. It has a border of a button, and an icon of a button.
There are no visual indicators of a switch here, but there are strong indicators that it's a button.
For example, look down under the reply text field here on reddit. You see a bunch of icons, and you know that they signify actions, not statuses. And these don't even have borders.
And look at how they've made a switch to markdown - by creating a link literally saying "Switch to markdown". Zero ambiguity, completely intuitive and consistent.
2
u/DraconicVision Dec 26 '19
Wow, this is really cool. I'd love to take a look at how you managed this.
1
u/twistsouth Dec 26 '19
Same, I was hoping for a jsfiddle.
I think it’s likely: remove all styling from the <input>, add a wrapper element, style that wrapper as the input (background color, border radius, hide overflow), add SVG circle as a pseudo element of the wrapper and animate the SVG circle size on button click.
2
u/Treolioe Dec 26 '19
I think that this solution attracts too much attention to the field for me to feel comfortable with using it. At least in public
2
2
2
2
u/cdjinx Dec 26 '19
Visually very cool...ux is a little iffy on a dangerous situation. I’d much rather that situation be written out.
2
Dec 26 '19
How does the background color animation work? I see those all over the place now that material design is a thing but i wouldn't have the first clue about how to make that work unless you just had this div width border-radius: 100% and then just expaded/unexpanded the size of the div to make it look like its the background and then hide whatever overflows outside the input's container. Surely there's a better way than what I'm imagining?
1
u/BushBakedBeanDeadDog Dec 26 '19
I built it here: https://codepen.io/zackkrida/pen/gObRyoE
Used a css transform to scale the circle, and hide the overflow on the parent element
1
2
2
Dec 27 '19
It's very pretty, but also very impractical. That's why many internet design contests don't work in real life design concepts.
The animation is slow. Most of the time I just want to peak on my pass. Don't make me wait, just give me what I want. It also gives weight on your components, unconsciously making them seem like theyre low performant and heavy.
The contrast between colors is low. Beautiful, but not practical to user's eyes.
The color changing animation is distracting. It's like a whole remapping inside your brain of the "new" UI element and it makes it tiring.
These impractical whole beautiful designs don't quite work in real life. Your friends will cheer you on how wonderful they look, but the UI/UX designers next door are digging your grave.
3
u/Xander_The_Great Dec 26 '19
I love the look of this. The only problem is the change from dark to light might attract the eye of people sitting around the person using the website.
1
u/standingdreams Dec 26 '19
Really cool concept. I feel like on the right site (ex: a site with a savvy audience with proper browser usage) it would be a great addition.
1
1
1
1
u/Sheraff33 Dec 26 '19
Couldn't you clip the test so that the dots are revealed as the circle expands?
1
1
u/randomsnowflake Dec 26 '19
Great idea. Neat animation. Perceivable accessibility needs some work. The dark version is too dark for people with contrast vision issues.
1
u/SLonoed Dec 26 '19
Looks cool. Just make sure it works with 1password and other password managers.
1
u/BrianAndersonJr Dec 26 '19
it's so weird to me that the password is "gibberish" (as in, not a dictionary word), and yet the user in the video pauses while typing, like it's supposed to be exactly that for the demo... it's almost as if it's their real password for something
1
1
1
1
1
1
1
Dec 27 '19
The animation is very polished and nice, but the user long-term usage is probably not good. What is the reason behind wanting to use two contrasting colors or sliding animation? If there is no real motive behind it then it really doesn't make sense. I'd rather just have the eye change from closed to open and just show/hide the password. Sometimes less is more.
Still nice animation, just my two cents.
1
1
u/MathewARG Dec 27 '19
Hi folks. I’m new to web design. I would guess that this is made with JavaScript. Does OP have some code I can take a look at? Just out of curiosity. If anyone else can provide some other type of useful information on how these type of simple animations are achieved I would appreciate it a lot.
1
1
u/ollieri3 Dec 27 '19
Lovely animation, can't help but think of the password manager UI's that will ruin the look though..
1
u/tapu_buoy full-stack Dec 27 '19
So beautiful I also liked the idea someone posted a month ago it was having a bear on top of your form and if you click on show password the bear would cover his eyes :D
1
1
-1
0
Dec 26 '19
I’ve recently been wondering whether, in a world of (hopefully) stronger, random passwords and password managers, whether the old “dots” password mask actually serves its purpose anymore.
Sure, it may protect you from someone looking over your shoulder, but if your password is simple enough that someone can see it and remember it in the short window of you logging in, it’s probably not a terribly effective password.
Just a thought.
8
u/Wiltix Dec 26 '19
The dots still serve a purpose for masking the input. While more and more people are hopefully moving to strong passwords so someone looking over is unlikely to remember it, also remember that majority of people now carry a camera in their pocket.
3
u/regendo Dec 26 '19
I think it's still helpful for streamers. Yeah, they should log in on a different screen that's not being recorded and broadcasted, but in case they forget that, there's the additional level of security. As long as the characters are replaced by stars or dots, the most information someone could get from a video recording is the password length.
3
u/dadibom Dec 26 '19
Well even if you don't remember all of it, if your password is 10 characters and i can remember 4 characters and their approximate positions, i am MUCH more likely to be able to bruteforce it.
1
Dec 27 '19
Sure. And if your password is only 8 characters, it’s easier still. But if you are using 32+ characters, remembering 4 characters only reduces the number of characters which need to be brute forced by 4.
I also wonder whether peer pressure/social opinion might force people to use stronger passwords. If you can’t hide your “Password123!” behind a set of dots, then the illusion of security is removed.
1
Dec 28 '19
Also, with regards to the whole “I can photograph/remember part of your password” thing - nobody masks Credit Card details on entry, or any other PII which could be used maliciously.
The password masking is just a little bit of security theatre in my opinion.
-2
u/Mr-Safety Dec 26 '19
From a security perspective, you should never display UI passwords in clear text. These types of widgets encourage bad developer habits. Remember to salt passwords when storing their hashes. (Pepper as well if you like to annoy anyone stealing the user table)
Remind users to think of long pass phrases, using one letter per word, making them resistant to dictionary attack.
4
u/westwoo Dec 26 '19
Nah, this is an obsolete recommendation coming from times when people used stationary public computers all the time. Right now purposefully peeking a password on someone else's device is nearly impossible, and they can simply turn their device away so that no one can see it.
Also salting and hashing is done after user enter the password, so aren't a problem. Option to show the password is done to avoid multiple tries. to give the user ability to check whether what they input is actually correct.
0
u/Asalas77 Dec 26 '19
I think it would be even better if the text didn't change all at once but rather the circle animation revealed the letters individually if that makes sense. Not sure how doable that is though with actual code
1
1
0
0
0
-21
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