- read

Easy Show & Hide Passwords Plugin

Beau Beauchamp 27

Exceptional User Experiences

Easy Show & Hide Passwords Plugin

Use this Pure-JS drop-in jQuery plugin to add a show / hide icon on all your password fields.

Beau Beauchamp
JavaScript in Plain English
7 min read1 day ago


Image by NewAfrica via DepositPhotos

Creating Rock Star User Experiences

Creating a rock star User Experience (UX) doesn’t just happen by accident. It is literally through attention to a myriad of small details within the User Interface (UI) that determines whether or not end users will love you (which means they don’t notice the ease of use you are giving them) or hate you so much that they call your boss and ask to have you fired.

In my experience, bad UX is mostly borne of 1) laziness, 2) too little time given by the stakeholders to build the UI properly, 3) inexperience, or 4) ignorance of thinking that just because the UI will have a small audience, it doesn’t need to be a great User Experience.

I ran into these issues and attitudes a lot while working for major enterprises, even within companies like Dell and Disney who you would think should know better. But not everyone does (or wants to) and it becomes our responsibility to try to instill within the junior developers and our stakeholders that it’s the small things that really do make for a UI that users never complain about.

Adding Conveniences That Make Users Happy

One of these tiny little conveniences that has popped up in the past few years is the wondrous Show / Hide Password icon. I want to offer a big high-five to the developers who add this into their UI because it does a number of things that most devs don’t really pay much attention to.

First, it reduces the number of fields on the signup form. Less fields equates to more signups. It does. Users today hate having too many fields to fill out to signup; and one of the more unnecessary fields is the infamous “Re-type Password” field, mostly because you cannot see what the hell you’re typing in two of the fields! This is never a good idea.

Second, the Show / Hide Password icon eliminates just one more field you need to validate in both your frontend and backend code.