Password Strength Indicators: Make Them Useful and Accessible

So the time has come for your company or client to add a password strength indicator. How do you do this in a useful and accessible way? Here are some ideas to get you started.

1. Show a Progress Bar

Indicators that display a progress bar are visually helpful. Since requirements for what constitutes a solid password vary widely from site to site, it is helpful to have the progress bar reflect how well folks are doing. I feel like a password ninja when I hit the end of the bar.

2. Label All The Things

So having an indicator  progress bar is awesome, but for folks who are using screen readers, they’re completely useless unless you label them. Also, color coding your indicator is fun, but if your site or product is used internationally, keep in mind that colors vary widely in meaning. Give your indicator some easily understood labels. We went with Very Weak, Weak, Fair, Strong, & Very Strong, and they seem to get the job done.

3. Use Your Words

You know what is terrible? Trying to register on a website and having it tell you your password isn’t strong enough, but having absolutely no idea at all what they are looking for. Give your users a hand, and give them some examples! We call this inline UA in our products, just a little line of text to give them a boost before they fill out the form field, rather than waiting for them to hit an error or alert and get frustrated.

4. Get Rid of Cryptic Errors and Alerts

“Your password isn’t strong enough” is NOT a helpful error message. Telling that them they can’t enter sequences, or repeating numbers, or they have to have a capital letter and special character IS helpful. Fill your alerts and errors with useful applicable information!

5. Let’s Get Started!

Here’s a snazzy jQuery password strength indicator that you can play with. Enjoy! http://matoilic.github.io/jquery.pwstrength/

*Full credit goes to Sara Hardy @snh9905 for finding this gem, which was created by @matoilic and lives on @github!

Accessibility: It Applies to Me Too?!

I had the opportunity to attend and present at the Penn State Web Conference this summer. It was a great conference with some amazing sessions. Karen McGrane did a keynote (amazing) and so did Cindy Li (amazing again). I may or may not have told Karen McGrane that she is brilliant and I love her while she was signing my copy of Content Strategy For Mobile. 🙂

We’re All Just Temporarily Abled

Cindy Li focused on accessibility in her presentation, and tools you can use to test your product or site. I learned about 8 million tons of information I didn’t know beforehand, but one thing she said REALLY resonated with me. She said, “We’re all just temporarily abled.”

She mentioned her mother who has an ocular disease that is slowly blinding her over time. Then she mentioned that while she doesn’t have an ocular disease herself, she is beginning to require stronger glasses prescriptions each year.

Why am I talking about her eye health? Because she then pointed out that as designers we need to design for accessibility, not only for folks who are permanently visually impaired or have severe motor issues right now, but also for our future selves!

Design for the Future You

With each passing birthday, our vision is starting to go, eventually our hearing will start to go and so will our mobility. I will have these issues, you may have these issues, they’re just part of the aging process.

We aren’t designing accessible products and websites for an invisible subgroup of people who have permanent visual or motor issues, we need to design these sites and products for our future selves as well.

The next time you’re tempted to brush off accessibility while you’re working on a design, picture yourself in 20 or 30 years trying to use your own website or product. Adopting this mentality has given me an entirely new outlook on designing for accessibility.

Angry, Sobbing and Drunk People Will Try To Use Your Product Or Service

The last day of the conference a second session was given with a focus on accessibility. This time the presenter, Robin Smail, pointed out that every visitor who comes to your site is NOT going to be dedicating 100% of their mental energy to navigating your product or website content.

What if they just fought with a family member or coworker? They are going to be smashing their mouse around on their desk trying to get through your product or site. What if they’ve been crying? Their vision is going to be impaired. What if they’ve been drinking? (I’m sure YOU have never shopped online while slightly intoxicated, but you know… OTHER people do it.) 😉

The point of her talk was that we need to focus on accessibility and awesome UX for ALL visitors, whether they have permanent issues, or temporary ones.

Do it!

In closing, just remember that as you’re designing your products and websites, focusing on accessibility and quality UX will improve the experience for ALL of the visitors to your site!  And, it may even save you from some frustration yourself in the not too distant future! 🙂

This link contains some pretty fabulous accessibility testing tools to get you started! 🙂 https://userexperiencerocks.wordpress.com/favoritetools/

Homepage Info Sliders… Please Go Away!

So I just went to a website, I won’t mention the name, and they had a rotating info banner on their homepage. And it was the primary source of information on their product.

Argh!

Could we as an industry just agree to fill rotating banners with random bonus content that isn’t overly necessary since they are impossibly annoying to navigate? Toss some news updates or photos in there that aren’t critical to a person purchasing your product or service. Don’t put all of the most important info about your product or service in there and let it fly past your could have been customers.

Every usability study I’ve ever read about rotating info banners has stated that people generally hate them, and they find them distracting and unusable. I recently read a study about a company that took their rotating info banner away, added static content, and they saw a sizable increase in website initiated sales.  If I can find it again, I’ll add a link to the comments.

And they are terrible for accessibility! Tons of them just say, “Click here, click here.” But if a sight impaired visitor clicks enter, nothing happens!

Goodbye.

I left the aforementioned site because the rotating banner was driving me nuts and keeping me from the information I had come to find.

If you must…

If your company or your client absolutely positively HAS to have a rotating info banner on their homepage (since, you know, they hate people, and money and customers and want them all to leave) and they REALLY want to put important product info in it, then could we at least agree that they should all pause on hover and have a pause button for both desktop and mobile viewers? There is nothing more irritating than going to a site, actually being interested in a rotating piece of content, and then having it fly past before you can finish reading it!

So 90’s!

I know they are wildly popular right now, but so were scrolling Java messages in the 90’s. We laugh and roll our eyes about those now, but somehow they have reincarnated themselves in the form of rotating informational banners!

So what do you think folks, can we banish the rotating info banners to the same shameful land that we sent scrolling Java messages?