Design a password strength meter

With Justinmind, you can design a password strength meter with the help of conditions. This is defined using the 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 the following widgets to the canvas: an Input Text Field and a Dynamic Panel.
  2. Select the Input Text Field, go to the Properties palette and in from 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.
    • 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
  4. 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 introduced is at least 2 letters long.
    • To do so, click the “Add Event” button and add an “On Key Up” + “Set Active Panel” event. 
    • Select Panel 1 and click “OK” to exit the events dialog. 
    • Password strength meter in prototypes: events
  5. Back in the Events palette, click the “add condition” button. The Condition builder will appear. Here, build the following condition:
    • Drag the “Count” function to the term in the conditional expression.
    • Then, drag the Input Text Field to the next term.
    • Drag the “Less or equals” function next.
    • Finally, write ‘2’ in the last term.
    • Click “OK”.
    • Password strength meter in prototypes: conditions
    • This 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).
  6. There are three additional conditions to build, which will represent the remaining levels of password strength. To build them, follow the next steps:
    • In the Events palette, click on the “else” link on the right of 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.
    • Click “OK” .
  7. Back in the Events palette, click the “Else add condition” link.
    • In the Conditional builder, drag the “Count” function to the term in the conditional expression.
    • Then, drag the Input Text Field to the next term.
    • Drag the “Less or equals” function next.
    • Finally, write ‘4’ in the last term.
    • Click “OK”.
    • password-strength-meter-in-UI-wireframes-conditions
    • This condition ensures that if the text that the user introduced is less than 4 characters long, the password strength level will correspond to the color in Panel 2 (in our example, orange).
    • To build the third condition, click on the “else” link after the second event and add another On Key Up” + “Set Active Panel” event.
      • Select Panel 3, which represents the 60% password strength level.
      • Click “OK”.
  8. Back in the Events palette, click the “Else add condition” link.
    • In the Conditional builder, drag the “Count” function to the term in the conditional expression.
    • Then, drag the Input Text Field to the next term.
    • Drag the “Less or equals” function next.
    • Finally, write ‘6’ in the last term.
    • Click “OK”.
    • Password strength meter in prototypes: conditions
    • This condition ensures that if the text that the user introduced is less than 6 characters long, the password strength level will correspond to the color in Panel 3 (in our example, yellow).
  9. To build the last condition, click on the “else” link after the third event and add another On Key Up” + “Set Active Panel” event.
    • Select Panel 4, which represents the 100% password strength level.
    • Click “OK”.
  10. Back in the Events palette, click the “Else add condition” link.
    • In the Conditional builder, drag the “Count” function to the term in the conditional expression.
    • Then, drag the Input Text Field to the next term.
    • Drag the “Less or equals” function next.
    • Finally, write ‘8’ in the last term.
    • Click “OK”.
    • Password strength meter in UI prototypes: conditions and events
    • This condition ensures that if the text that the user introduced is at lesat 8 characters long, the password strength level will correspond to the color in Panel 4 (in our example, green).

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

You can download our example here.