Association Triggering

The human brain grows up with a lot of mental models. Some of the earliest ones we learn aren't even verbal. We learn non-verbal associations first before we even learn to speak. We learn to associate a bottle with the act of drinking, a spoon with the act of eating, and a head shake with the act of saying "no".

I want to focus on that last one, because it is especially interesting in the realm of password fields.

Try typing something into this field and hitting the enter key. It'll shake it's "head" no!

We learn to associate a head shake with the act of saying "no", so when we see a password box shake on the X-axis, our brains quickly emotionally register it as a "no". The movement bypasses the language processing center of our brains and goes straight to the recognition center.

This association between shaking and "bad" is strengthened by the fact that the shake looks like a "visual vibration", much like a phone shaking when you enter the wrong PIN. Shaking is a powerful association trigger in part because it is redundant across these mediums.

Not to mention that it's language agnostic. A user speaking English, Spanish, French, or Japanese will all understand the association between shaking and "no". Instead of relying on colors, which are typically culturally specific, shaking is a universal negative signal. It also caters to users with colorblindness who have trouble distinguishing between red colors (the reason the red dot effect has so many redundancies).

So leverage these brain associations to your advantage! Anthropromorphizing your UI is a powerful tool in your toolkit. If you can find a way to make your UI feel more "human", whether it be through elastic animations or cute avatars, you'll be able to make your users feel more connected to your product on an emotional level.