What is the best practice for password field placeholders?

Question

It seems like the accepted best practice for email fields is to have a label and an example email address. Assuming you want a consistent style, the label will make it clear that it's a password field. What is the equivalent placeholder to put in the password field? "Password" seems redundant. "P455w0rd" seems confusing and bad practice. "••••••••" as a placeholder seems confusing.

The questions linked are obviously not definitive answers, and don't take password fields into account. If removing the labels on both is helpful, I'm open to that. Is there an established best practice?

Answer 1

This article by NNGroup actually covers this exact topic.

http://www.nngroup.com/articles/form-design-placeholders/

To summarize:

WORST:

Using a placeholder that says "Password" with no additional label is the worst way to go about it, there are many reasons presented in the article as to why but primarily

• Disappearing placeholder text strains users’ short-term memory.
• Without labels, users cannot check their work before submitting a form.
• Users may mistake a placeholder for data that was automatically filled in.

BETTER:

You can use the placeholder as a way to provide supplemental information. This is better because you have the permanant label outside to avoid the issues listed above and in the article, however your supplemental information now suffers from the placeholder issues.

BEST:

Therefore, your best bet is to remove the placeholder altogether, it is shown not to help the user (and can hurt instead). Provide your label and any supplemental information outside of the input so the user will not strain to remember what was in the box before typing.

also:

Fields with stuff in them are less noticeable.

Eyetracking studies show that users’ eyes are drawn to empty fields. At the minimum, users will spend more time locating a non-empty field — a nuisance. At the worst, they will overlook the field completely—a potential business-killing disaster.

Answer 2

Sometimes consistency for the sake of consistency is a bad thing. Consistency is a UX principal only in the sense it helps the user understand info on the screen. In this example, it's leading to clutter as oppose to assisting the user.

A placeholder should act as a prompt to help users provide the correct info/format into the field. By its nature, a password is something that only the user should know. Any "help" by the system is akin to a security risk. A generic placeholder that says "Password" or "****" doesn't help convey any new info and like you said, clutters the form and can lead to confusion.

So don't put in placeholders for passwords. A clean input field is OK to have. :)

Answer 3

It seems like the accepted best practice for email fields is to have a label and an example email address.

I don't agree with that at all.

Placeholders are there to assist if the data being entered is in some way formatted in a unique or complex way.

"Email address" is self explanatory. We know what format email addresses are in. Placeholder text is just cluttering the UI for that type of field.

As such, I would say:

Placeholder text should not be used for every field. Only use it when absolutely necessary. Most of the time, you shouldn't have any placeholder text.

For the password field, there shouldn't be any placeholder text.

Answer 4

Hmm.. This is a good question.

Passwords and password strength are a heavily debated topic. I think before we can determine a good UX, we should better understand what we're trying to accomplish: solid, secure passwords.

How we might encourage our users to create better passwords?

Most websites enforce password policies like:

• Minimum of 8 characters
• At least one capital letter
• At least one special character

Or they won't require them, and instead will show a strength indicator to abstract away the "qualities of a good password", hoping that the indicator will encourage good/strong passwords.

However, many argue that passwords generated with these requirements are hard for humans to remember (bad UX), and relatively easy for brute force attempts and other hacking methods to crack. The alternative being "4 word passwords" (easy to remember, hard to hack), and backing up authentication with something like 2-factor authentication

But I'm digressing. My answer:

1. Determine what kind of passwords make the most sense for your users, and the application
2. Decide how strictly to enforce your guidelines/rules
3. Use placeholder text as an example quality password: "e.g. HorseWhistleIndianKiss"
4. Consider other options for encouraging higher quality passwords

Food for thought: Do we event want our users to have password?

The argument used to be: Why force our users to have another set of credentials to remember for our website? Don't they already have enough? MailChimp has a really good blog post on this very topic. They found that more than 60,000 users a month forgot their passwords.

Answer 5

Personally, I'm a huge fan of the way Trello does it. They use greyed out text in the email and password section, but they use e.g., [email protected], and e.g., ***********

Like so:

^{They also use a random selection of email addresses, which is super fun :)}