Show Password

Learn more about show password interactions

In this short guide we discuss the advantages of using the Show Password function when prototyping in Framer.

How passwords usually work when logging in

Sign-up screens and login forms are essential to many website and app flows.

One of those is an input type password HTML field, which displays an obfuscated password entry field so that onlookers can’t see the password as it’s being typed in. This usually takes the form of asterisks or circular bullets which replace the numbers as you type.

Disadvantages of password input forms

Unfortunately, some entry points can be a lot more welcoming than others. And this element of app design is frequently overlooked; not only at the prototyping stage but even in final iterations. Making login a less than optimal experience for many users.

It’s important to note that these kinds of hidden password inputs don’t apply encryption when the data is actually sent, so users shouldn’t presume that password fields will actually keep their data secure.

While the sign-in window might not be the most exciting part of your app, it’s nonetheless very important, as it provides the entry point for all users.

Thankfully, there are many ways in which you can improve your login screen so that users find the process a lot smoother.

What is a show password interaction?

One such optimization that we often recommend making is that, instead of dots, hidden characters, or passwords concealed behind asterisks, you can set up the login window so that users actually get to see their password as they enter it.

This way users are able to make certain that they have typed their password correctly before continuing, therefore reducing the risk of error. We call this optimization a Show Password interaction or the Show Password function.

Simply put, a show password function (whether it be a Javascript or CSS or HTML password input) allows users to reveal their password as they type it. While it doesn’t remove the hidden password function altogether, it gives users the option to review their password entry to make sure they’ve entered it correctly.

Why include display password functionality during login?

For added protection, most apps require users to step through ever more complex security hurdles before logging in. And all it takes is to mess up a few times with a fat-fingered mistake, and a user may find themselves locked out of their own account. That's never a fun experience.

Because of this, many people find typing a password into an input field without being able to see what they are doing quite frustrating - stressful even. For this reason it can be good to include an option to display passwords as text while typing.

Including added UX improvements of this kind at the prototyping stage will make the prototype experience feel more authentic. As a result, the ability to make passwords visible can help with both user testing and with the validation of ideas.

You can build show hidden password functions for Android, iOS, or any host of other apps or platforms. It’s a common feature of many sites and apps that require logins, from Gmail to Google Chrome and beyond.

How to make a show password interaction in Framer

To create this interaction in Framer, you will need to use a bit of code to make sure the values of the input fields stay in sync with each other. We will do this through two Code Overrides and a Data object.

In the canvas, you will need to create two screens that have the same layout and inputs; the only difference is that one will have a show password icon, and one will have a hide password icon. You can then create a link between the two screens using the icons as the hotspot.

Now for the code.

As you see in the example, there are two Code Overrides that save the value entered into the input and allow you to see the same value when you change between show password and hide password. Make sure these overrides are applied to both of your inputs - show password and hide password - and you will be ready to go!