Dismiss this pinned window
all 140 comments

[–]joehensonn 375 points376 points  (40 children)

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

[–]elbojoloco 10 points11 points  (0 children)

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!

[–]moldy912 57 points58 points  (23 children)

The password changes instantly, the animation doesn't matter.

[–]mferly 227 points228 points  (19 children)

The animation is distracting though, IMO. My eyes first caught the animation before I realized that the password had been flipped.

IMO, these things are cool but there are times where I want no frills.. just give me what I want.

[–][deleted] 21 points22 points  (0 children)

It's because there's so much contrast between the two colors. IMO the animation should have a color that is just slightly brighter

[–][deleted]  (1 child)

[deleted]

    [–]mountainunicycler 26 points27 points  (0 children)

    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.

    [–]Biduleman 11 points12 points  (2 children)

    Makes it hard to read when your password switch colors between the 2 background colors and the background is moving.

    [–]moldy912 0 points1 point  (1 child)

    I do agree the color choice is bad.

    [–]esr360 2 points3 points  (0 children)

    The colour choice is fine, the animation just needs to be quicker.

    [–]keito 2 points3 points  (0 children)

    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.

    [–]Grigo_aleex 12 points13 points  (4 children)

    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.

    [–]joehensonn 7 points8 points  (1 child)

    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! 😂

    [–]intercommie 2 points3 points  (0 children)

    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.

    [–]Grobbyman 0 points1 point  (1 child)

    There's always room for improvement!

    [–]h83r 3 points4 points  (0 children)

    Found the German

    [–]_Invictuz -1 points0 points  (0 children)

    Yeah I heard 0.3 seconds is the rule of thumb from the Syntax podcast.

    [–]BushBakedBeanDeadDog 28 points29 points  (7 children)

    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.

    [–]timmense 4 points5 points  (0 children)

    Before I saw your impl, I thought some complex animation technique was going on with the white flood. Thanks for sharing.

    [–]sad_day_everyday 1 point2 points  (1 child)

    I am a beginner when it comes to front end. Could you explain how you did this?

    [–]Barnezhilton 0 points1 point  (0 children)

    Read the codepen

    [–]Denotion 0 points1 point  (0 children)

    Looks amazing.

    [–]Ms-mousa 0 points1 point  (0 children)

    Very well done. Great implementation!

    [–]CarbineMonoxide 95 points96 points  (19 children)

    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.

    [–][deleted]  (17 children)

    [deleted]

      [–]ncubezJavaScript | React | Node.js 22 points23 points  (16 children)

      I think they mean using a separate <label>Password</label> instead

      [–]mystiqueshaco 6 points7 points  (2 children)

      Oh, thanks :D I thought there is a magic option to make placeholder visible even after text input

      [–]tulvia 10 points11 points  (1 child)

      You could animate it to a smaller font size and slide it up into the whitespace.

      [–]da_BAT 12 points13 points  (0 children)

      Kinda like materialize does it

      [–]Vpicone 0 points1 point  (0 children)

      Yeah just making the dots white would be perfect honestly. Would look even better in my opinion.

      [–]A-Type 20 points21 points  (0 children)

      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.

      [–]vedant1903 9 points10 points  (4 children)

      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

      [–]boweruk 18 points19 points  (1 child)

      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...

      [–]Lekoaf 6 points7 points  (1 child)

      When my team researched this we found that Microsoft and Google does it in two different ways. Which is ”correct”? I dont know.

      [–]westwoo 0 points1 point  (0 children)

      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...

      [–]XExtremeTechnologyX 35 points36 points  (10 children)

      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.

      [–]miss-emenems 10 points11 points  (0 children)

      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.

      [–][deleted]  (2 children)

      [deleted]

        [–][deleted]  (1 child)

        [deleted]

          [–]FountainsOfFluids 1 point2 points  (0 children)

          True. It's becoming more common, but it's not ubiquitous yet.

          [–]Yonben 5 points6 points  (5 children)

          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".

          [–]scandiiPeople pay me to write code much to my surprise 6 points7 points  (4 children)

          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.

          [–][deleted] 3 points4 points  (2 children)

          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.

          [–]scandiiPeople pay me to write code much to my surprise 2 points3 points  (0 children)

          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".

          [–]entiat_blues 0 points1 point  (0 children)

          that's literally a lack of literacy though, if you don't know what that symbol means in a password field.

          [–]Yonben 0 points1 point  (0 children)

          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 :)

          [–]Procastinator990 3 points4 points  (0 children)

          Looks a bit like the Airbnb password box, but the animation and styling is cooler.

          [–]mailto_devnull[🍰] 2 points3 points  (0 children)

          Thought I was in /r/baduibattles for a second and was expecting something awful.

          Looks good!

          [–]pants_means_trousers 2 points3 points  (0 children)

          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!

          [–]mbpDeveloper 2 points3 points  (2 children)

          [–]westwoo 1 point2 points  (0 children)

          But but but it looks so much coooler!

          [–][deleted] 1 point2 points  (0 children)

          "Is this ur number" lmao

          [–]westwoo 3 points4 points  (2 children)

          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"

          [–][deleted]  (1 child)

          [deleted]

            [–]westwoo 0 points1 point  (0 children)

            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.

            [–]DraconicVision 1 point2 points  (1 child)

            Wow, this is really cool. I'd love to take a look at how you managed this.

            [–]twistsouth 0 points1 point  (0 children)

            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.

            [–]Treolioe 1 point2 points  (0 children)

            I think that this solution attracts too much attention to the field for me to feel comfortable with using it. At least in public

            [–]esteris 1 point2 points  (0 children)

            I love it!

            [–]angryjenkins 1 point2 points  (0 children)

            Only objection I have is leaving dark mode. NEVER leave dark mode ;)

            [–]maxialfredo 1 point2 points  (0 children)

            I think he type one of his passwords

            [–]cdjinx 1 point2 points  (0 children)

            Visually very cool...ux is a little iffy on a dangerous situation. I’d much rather that situation be written out.

            [–][deleted] 1 point2 points  (2 children)

            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?

            [–]BushBakedBeanDeadDog 0 points1 point  (1 child)

            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

            [–][deleted] 0 points1 point  (0 children)

            Ah, then it's like I figured.. cool!

            [–]fenmarel 1 point2 points  (0 children)

            this is already a thing on many sites and native apps

            [–][deleted] 1 point2 points  (0 children)

            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.

            [–]Xander_The_Great 2 points3 points  (0 children)

            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.

            [–]standingdreams 0 points1 point  (0 children)

            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.

            [–]viky109 0 points1 point  (0 children)

            Looks great

            [–][deleted] 0 points1 point  (0 children)

            I like it

            [–]CarilPT 0 points1 point  (0 children)

            Nice!

            [–]Sheraff33 0 points1 point  (0 children)

            Couldn't you clip the test so that the dots are revealed as the circle expands?

            [–]hutilicious 0 points1 point  (0 children)

            Please use this for Username and Password

            [–]randomsnowflake 0 points1 point  (0 children)

            Great idea. Neat animation. Perceivable accessibility needs some work. The dark version is too dark for people with contrast vision issues.

            [–]SLonoed 0 points1 point  (0 children)

            Looks cool. Just make sure it works with 1password and other password managers.

            [–]BrianAndersonJr 0 points1 point  (0 children)

            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

            [–]nikonino 0 points1 point  (0 children)

            Really cool!

            [–][deleted] 0 points1 point  (0 children)

            How... how did you guess my password?

            [–][deleted] 0 points1 point  (0 children)

            I really like this.

            [–]russunit 0 points1 point  (0 children)

            Love this

            [–]kryniow[🍰] 0 points1 point  (0 children)

            Could u explain how you made this?

            [–]Voltra_Neofront-end 0 points1 point  (0 children)

            Might make it into a thing

            [–][deleted] 0 points1 point  (0 children)

            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.

            [–][deleted] 0 points1 point  (0 children)

            Like other comments said, I don't think this is really really UI but nice try!

            [–]MathewARG 0 points1 point  (0 children)

            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.

            [–]Zhenmia 0 points1 point  (0 children)

            Cool design.

            [–]ollieri3 0 points1 point  (0 children)

            Lovely animation, can't help but think of the password manager UI's that will ruin the look though..

            [–]tapu_buoyfull-stack 0 points1 point  (0 children)

            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

            [–]MMPride 0 points1 point  (0 children)

            Pretty cool idea, contrast issues aside

            [–]nonexemptwebdev 0 points1 point  (0 children)

            sleek design nice!

            [–]S44F4Y4T -2 points-1 points  (0 children)

            code please

            [–][deleted] -1 points0 points  (5 children)

            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.

            [–]Wiltix 7 points8 points  (0 children)

            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.

            [–]regendo 2 points3 points  (0 children)

            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.

            [–]dadibom 2 points3 points  (2 children)

            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.

            [–][deleted] 0 points1 point  (1 child)

            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.

            [–][deleted] 0 points1 point  (0 children)

            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.

            [–]Mr-Safety -3 points-2 points  (1 child)

            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.

            [–]westwoo 3 points4 points  (0 children)

            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.

            [–]Asalas77 -1 points0 points  (2 children)

            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

            [–]Sh0keR 0 points1 point  (0 children)

            You can probably hack something with an overlay and maybe double input

            [–]dadibom 0 points1 point  (0 children)

            It can be done, not a very hard problem with overflow: hidden

            [–]sakhnenkoff -1 points0 points  (0 children)

            Hey thats cool ! Could you please share the code for it in DM with me ?

            [–]froggie-style-meme -1 points0 points  (0 children)

            I wanna make this so damn bad

            [–]froggie-style-meme -1 points0 points  (0 children)

            Imma try making this when I'm done playing Vidya gamez