Learn how to prototype web and mobile apps

How to simulate a password strength meter with conditions in your interactive prototypes

In this tutorial, you will learn how to design a password strength meter in your interactive prototypes with the help of conditions.

You can download the below example here.

Password strength meter in UI prototypes - Example

All the interactions in the example are defined on the Input text field.

We will build a set of when/else interactions that, every time a key is pressed, will check what has been written in the input text field and will trigger different responses in the password meter accordingly.

Follow the next steps to reproduce the example above:

1) In a new prototype, drag the following contents onto the canvas: an Input text field and a dynamic panel, which will be the password meter.

2) Select the Input text field, go to the Properties tab and in ‘Type’ select ‘password’.

3) Select the Dynamic panel and create four panels, one for each level of password strength. Click ‘edit content’ within the dynamic panel and drag a Text widget onto each panel, write the password strength percentage in it, and change their background color in the Properties tab.

Password strength meter in prototypes: dynamic panels

4) Select the Input text field and go to the Events tab, where we’ll start defining the first level of password strength. We will basically check if the password introduced is at least 2 letters long.

5) To do so, press the ‘Add event’ button and add an ‘On key up’ + ‘Set Active Panel’ event. Select the panel with the first level of password protection and click OK to exit the events dialog. 

Password strength meter in prototypes: events

6) In the events tab, click the ‘add condition’ button and define this condition: 

Password strength meter in prototypes: conditions

We’ve built a condition to show that if the text that the user enters is shorter than 2 characters, the password strength level will be at the lowest and the corresponding panel will be shown (in our example, the red 0% one).

There are two more conditions left, which will represent the remaining levels of password strength. To build them, follow the next steps:

1) Go to the events tab and click on the ‘else’ link that appeared next to the event you created.

2) Add another ‘On key up’ + ‘Set active panel’ event, this time selecting the second panel, which represents the 30% password strength level.

3) Click OK and, once back to the canvas, click on the “Else add condition” link and define this expression:


Now, if you take a look at the events tab, you will see a new ‘case’ has been added below the first one and a new ‘else’ link has appeared at the bottom.

4) Build the last condition. Click on the ‘else’ link and add another ‘On key up’ + ‘Set active panel’ event, this time selecting the third panel, which represents the 60% password strength level.

5) Back to the canvas, click the ‘Else add condition’ button and build this condition: 

Password strength meter in prototypes: conditions

This last condition will check if there is any uppercase letter: if not, then the password strength level will be 60%.

In all other cases, i.e. when the text is longer than 5 characters and also contains an uppercase letter, the password strength level will be 100%.


Password strength meter in wireframes: events

And that’s all. Simulate it and enjoy!

Next tutorial > Conditional drop-down select lists