31

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?

1

5 Answers 5

43

This article by NNGroup actually covers this exact topic.

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

To summarize:

WORST:

enter image description here

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:

enter image description here

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: enter image description here

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.

4
  • 2
    But forms that don't fit on a single page are harder to fill in, the 2nd page may also be missed. So doing what is best for a single field, may not be best for the complete form.
    – Ian
    Sep 25, 2015 at 20:13
  • 3
    If your form has so many fields that you need a second page the problem isn't the extra line that a label takes up, it's that there are too many fields.
    – DasBeasto
    Sep 25, 2015 at 20:16
  • 3
    The NNG article makes some great points, but this certainly isn't a 1-sz-for-all solution. There is a place for complex forms in the world. In those circumstances placeholder text is a viable solution for extra cues without creating a sprawling page of noise. Sep 25, 2015 at 21:38
  • 1
    I completely disagree with the "BETTER" option. That's semantically wrong. Sep 26, 2015 at 17:46
8

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. :)

6
  • 3
    "Sometimes consistency for the sake of consistency is a bad thing" = yes!
    – DA01
    Sep 25, 2015 at 19:30
  • Not sure how you divined that there's a "security risk" here. Otherwise, spot on. Sep 26, 2015 at 17:47
  • @LightnessRacesinOrbit Talking about the actual login password field. E.g. Password must be 8 characters long. There's no point in brute force guessing anything less than 8 characters now is there?
    – nightning
    Sep 27, 2015 at 2:16
  • @nightning: So you were referring to one of the specific texts suggested by the OP? I'm still not seeing the "security risk". Even if you were to remove all trace of the password scheme from the login page, an attacker could go to the registration page to figure out whether they could omit brute force attacks on 1-, 2-, 3-, 4-, 5-, 6-, 7-character passwords. Omitting that information from the login page isn't really increasing "security". Sep 27, 2015 at 11:36
  • @LightnessRacesinOrbit This is true assuming there's open registration. True for majority of the sites and apps out there, but not all of them. I work for a B2B web app for staff usage without open registration.
    – nightning
    Sep 28, 2015 at 15:25
5

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.

2

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.

3
  • 1
    4-word passwords are actually terrible, because everyone uses table, and no one uses impignorate (so the corpus is not the 100,000 words in a good dictionnary, but rather the ~1000 that most people use every day (or even the 100 from simple writer: xkcd.com/simplewriter ))
    – njzk2
    Sep 26, 2015 at 23:08
  • Hmm.. That's a good point. It would certainly be bad to require 4-word passwords, and while I think you've illuminated a solid concern. I believe it is still worth considering that human readable phrases, or random words, can be better than traditional passwords; especially if you are aware of common pitfalls (like the one you mentioned). Sep 28, 2015 at 17:01
  • I agree. Also I think the pitfalls in using traditionnal passwords are usually worst than with 4-words password.
    – njzk2
    Sep 28, 2015 at 17:02
-1

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: Trello Login Dialog

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

8
  • 9
    How is ••••••• helpful to the user? Sep 25, 2015 at 21:43
  • It gives an indication of length - it's clearly more than 8 characters. And it's funny. Sep 25, 2015 at 21:46
  • 1
    As far as indicating length, it would be much better to say "8 characters or more". As for the joke, it doesn't do it for me. Sep 25, 2015 at 22:09
  • 1
    There are two categories of people in this case: people who know what passwords are and derive no benefit from that "joke" (didnt even occur to me that it was one), and people who are signing up for their first form ever somehow -- who would DEFINITELY be confused by that. So, IMO, it offers nothing but potential confusion.
    – HC_
    Sep 25, 2015 at 23:59
  • 1
    If not ********, why not hunter2?
    – bitten
    Sep 9, 2016 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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