Password Strength

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

This is an interaction found in the "Create Account" screen, that gives real-time feedback to the user regarding their password strength using emoji.

🤲 How does this interaction or solution work?

When the user starts typing the desired password a small circular affordance shows up to the right of the password. This affordance provides feedback to the user in three different ways:

1) A circular progress bar that when gets filled indicates the optimal strength in terms of security.

2) Colors (red, yellow and green) that change based on the amount of progress displayed in the circular bar.

3) Four emojis that reflect an emotional response to the entered password strength.

🙌 How does this interaction or solution work?

Feedback Loop.

Unlike other password feedback interaction techniques, this one provides information through a very minimalistic and relatable feedback model. (No text and instant feedback).

The colors and the visual fill are strong mental models that map well to the feedback that this service wants to provide to the user.

The emoji is a delightful way to encapsulate and give emotional tone to the feedback. However, there's a potential issue with older audiences who might not be familiar with emojis.

That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.