Applies to: GUI Design Studio Professional only (all versions)
You have a web form to let users change or create a new password for their account and want to provide a real-time indicator of password strength, and reject invalid passwords.
Of course, you could just document this in an annotation but sometimes it's useful to test it out for real to see if your design has the necessary impact in user testing.
A password strength indicator is a good example of real-time form validation and the solution presented here can be adapted for any similar type of validation.
As a starting point, we'll create a web form component design with two input boxes: one to enter the new password and a second box to confirm the password (always a good idea with password creation). As the user types into the boxes, indicators will show validity:
Creating the design
(1) Create a new design file for the form. This will be used as a Component design, embedded within another web page design. The modular approach helps to maintain the project, swap variations in and out and reuse the same component on more than one page, if required.
(2) Add a Web Page Part element as the background, then add the Edit Boxes and Text Labels, leaving room for the indicators:
I've used a light grey background here on the Web Page Part to help it show up in this article. You would more likely want to set it to be white or transparent.
If you want the Edit Boxes to hide what's being typed in then set their Type property to be "Password". However, you'll find it much easier to test the design and your algorithms if you just leave them as visible "Text"!
(3) Using the Prototype tab of the property editor, assign the variables "NewPassword" and "ConfirmPassword" to the Edit Boxes, as appropriate. Use whatever variable names you like, of course.
(4) For the indicators, we need to add Conditional Content Panels. These can be found on the Storyboard panel. Although the actual size of them is not critical, the top-left corner placement is and it helps to get them to about the right size:
(5) Now add Conditions to the Conditional Content Panels and elements to represent the indicators. In this case, I've just used simple, coloured Text. Hook up the indicator elements to the conditions:
(6) Finally, if you haven't already done so, enter your indicator algorithms into the Conditional Content Panels, using the data variables you set up in step 3. The "#" symbol will then appear against each condition, as shown above.
Note: Because the conditions are evaluated top-down until one evaluates as true, your algorithms can take advantage of this since each subsequent condition acts as an 'else' case. If you reverse the order of your conditions, i.e. from "Strong" - "Invalid" to "Invalid" - "Strong", you will likely need different algorithms.
You'll want to use your own algorithms but this is what I came up with for the purposes of this article...
New Password Indicator:
- Strong: LENGTH(NewPassword) > 8 AND COUNTLOWER(NewPassword) > 0 AND COUNTUPPER(NewPassword) > 0 AND COUNTDIGITS(NewPassword) > 0
- Medium: LENGTH(NewPassword) > 8 OR (LENGTH(NewPassword) > 6 AND (COUNTLOWER(NewPassword) > 0 OR COUNTUPPER(NewPassword) > 0) AND COUNTDIGITS(NewPassword) > 0)
- Weak: LENGTH(NewPassword) >= 4
- Invalid: NewPassword != ""
If the "Invalid" case had no condition then it would act as a catch-all if none of the other conditions were met. While this makes sense, it's a bit mean to chide the user before they've had a chance to enter anything yet.
So, the "Invalid" indicator is only shown if the password is not blank. If no conditions are met, a Conditional Content Panel will show nothing!
Confirm Password Indicator:
- Blank: ConfirmPassword = ""
- Matched: ConfirmPassword == NewPassword
- Unmatched: ConfirmPassword !== NewPassword
Again, a check is made for no input to avoid displaying a "Not Matched" indicator before the user has had a chance to type anything.
Note the double "==" conditions when comparing the passwords. This forces a case-sensitive check, which is necessary for passwords where mixed cases are part of a password's strength. In other situations, a single "=" only may be needed.
Also, the Unmatched condition is probably redundant as it becomes the default if the other conditions are not met.
Using The Design
Now that we have our New Password design component, we can drag and drop it to insert it within our web page design, where we can further make use of the data.
Here's a very simple example (again, I've coloured the background slightly to help it show up in this article):
Even though the password data variables are within the component, they are available to use on the containing design.
For example, we can set an Enabled Condition on the "Submit" button so it only becomes available if the new password is valid and confirmed:
LENGTH(NewPassword) >= 4 AND ConfirmPassword == NewPassword
Here's the page in operation...
1. This password won't do:
2. This one's good but the confirmation's not right:
3. All correct, and able to submit:
Have Fun With The Design!
You can expand and change this design in many ways to suit your needs. Try changing the algorithms or creating some more stylish indicators with coloured bar charts to indicate password strength.
You can also do a few more funky things with Conditional Content Panels like attaching additional actions to the conditions that fire when the condition is met. Be careful with this but one use would be to set additional 'Valid' data variables that could be used to simplify the "Submit" button condition and be used for other purposes. It's beyond the scope of this article, though.
If you've found this article useful, please click the "Me Too!" button below!
And please feel free to post comments, too.
The two design files featured in this article are attached below: