Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Do people know what it means when there is a coloured bar that shows up below their password as they type? The users that will be using this form will be from all over the world and most likely different demographics.

Password Strength indicator without text

Will anybody be confused by what this is? Do I need to add text/an explanation as they type? Will just a tooltip do?

share|improve this question
    
Is there a reason you don't want to add text to the visual indicator? –  Mark Bubel Mar 25 at 18:42
    
It might become more intuitive if you add a colour gradient from red via yellow to green and maybe add a padlock and/or shield symbol somewhere. –  TheUser1024 Mar 25 at 18:48
1  
@MarkBubel I would rather avoid adding text because it would have to be translated. –  alanj Mar 25 at 18:49
    
@TheUser1024 I do have it showing red for bad password and there is a gradient to green for the strongest password. The screen shot is just an example. –  alanj Mar 25 at 18:51
    
@alanj: I think you could vastly benefit from defining your target audience more precisely. I personally know people who would be confused by this or rather "would not even notice it" (i guess), they are from "all over the world" and belong to "different" demographics. That does not really answer your question though. It only answers "will anybody be confused by this?" :-) –  TheUser1024 Mar 25 at 19:03

2 Answers 2

up vote 11 down vote accepted

There are three concerns here.

  • Relying on color alone is an accessibility violation as someone with monochromatic vision will struggle to figure out the level of color and understand if his password is weak or strong. To quote the WCAG site

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

  • Your labels will help screenreaders provide additional inputs to their users : To quote this article

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.

  • Symbolism of color : Since you are using this form for users from around the world,you need to remember colors have different meanings worldwide and what might a suitable color scheme might not work somewhere else and hence relying on color alone will not serve the purpose.

Here are some examples of how password indicators can be styled

enter image description here

enter image description here

share|improve this answer
2  
"Relying on color alone is an accessibility violation" that answered my question right there. –  alanj Mar 25 at 19:09
    
Good answer. :) –  Pdxd Mar 25 at 19:23

The best experience is with text where you tell the user what's happening.

Google does their strength indicator with text: gmail strength indicator

Another example I've seen is with suggested or required criteria to force the user to generate a more secure password: password example

If you are debating about whether or not it's a good idea to use text or not, here's a great article: http://edwardsanchez.me/blog/13589712

Part of it depends on how tech savvy your users are and if they are able to recognize what the colour bar means. Without knowing who your audience is, all of our answers will be a shot in the dark but Google has a pretty widespread reach, so I feel that's a more appropriate example.

EDIT: I'm sure that Google has all the translations you need for this if you just use the language setting on the password page.

share|improve this answer
    
The popup in the second example given here is quite far away (visual angle-wise) from where you are typing and looking. The first one is likewise not quite where the user is looking. It's probably better to have anything you want people to notice sit hard left on the page, so it's closer to the label and where the user is actually typing. –  finiteattention Jun 3 at 10:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.