Design a password strength meter

With Justinmind, you can design a password strength meter using conditions and Input Text Fields.Password strength meter in UI prototypes - Example
To create a password strength meter in your prototype, follow the steps below:

  1. Create a new web prototype and drag an Input Text Field and a Dynamic Panel to the Canvas.
  2. Select the Input Text Field, go to the Properties palette and in ‘type’ field, select “password”.
  3. Select the Dynamic Panel and create three additional panels (by selecting the ‘+’ icon at the top of the Dynamic Panel). You’ll need a panel for each level of password strength.
  4. Double click on the Dynamic Panel to edit its contents and drag a Text widget into each panel. In each instance, write the password strength percentage inside the Text box, and change its background color in the Properties palette.Password strength meter in prototypes: dynamic panels
  5. Select the Input Text Field and go to the Events palette. Here we’ll define the first level of password strength by checking to see whether the password is at least 2 characters long. To do so, click the “Add Event” button and add an “On Key Up” + “Set Active Panel” event. Select Panel 1 to be set as active.Password strength meter in prototypes: events
  6. Back in the Events palette, click the “add condition” text next to the event you just created. You’ll see the Conditional Expression builder appear. Follow these steps to create the condition:
    1. Drag the “Count” function to open space in the expression.
    2. Drag the Input Text Field to open space that appears.
    3. Drag the “Less than or equal to” function next to the Input Text Field so that it’s outside the “Count” function brackets.
    4. Type in ‘2’ in the last space.Password strength meter in prototypes: conditionsThis condition ensures that if the text that the user introduced is less than 2 characters long, the password strength level will be at the lowest and the corresponding panel in the Dynamic Panel will be shown (in our example, red).
  7. There are three additional conditions to build, which will represent the remaining levels of password strength. Back in the Events palette, click on the “else” text next to the event you’ve created. Add another “On Key Up” + “Set Active Panel” event, this time selecting Panel 2, which represents the 30% password strength level to be set as active.
  8. Back in the Events palette, click the “Else add condition” link. In the Conditional Expression builder, create the same expression as in Step 6, but type in ‘4’ in the space in the expression.password-strength-meter-in-UI-wireframes-conditions
  9. To build the third condition, click on the “else” link after the second event and add another “On Key Up” + “Set Active Panel” event, selecting Panel 3 as active, which represents the 60% password strength level.
  10. Back in the Events palette, click the “Else add condition” text. Build the same condition again, but type in ‘6’ in the last space.Password strength meter in prototypes: conditions
  11. In the Events palette, click on the “else” text after the third event and add another “On Key Up” + “Set Active Panel” event, selecting Panel 4, which represents the 100% password strength level.
  12. Click the “Else add condition” text and build the same condition, but write ‘8’ in the last space.Password strength meter in UI prototypes: conditions and events

And that’s all. Click “Simulate” to test out your prototype.

You can download our example here.