https://uxdesign.cc/stop-using-placeholders-3b9f362a50d8
Photo by Will Porada on Unsplash
!assets/0CJHhBDGQ3udkk9T0 Private or broken link
The page you're looking for is either not available or private!
Placeholders are not labels
Accessibility advocates have been saying this for a very long time.
But that hasn’t stopped developers from using placeholders as visual labels. Even Facebook’s home page does this:
Facebook home page. It has text boxes for Email/phone number and Password. Both use placeholders for labels.
!assets/1imhrPYPFc93iweUAy_l6Bg.png Private or broken link
The page you're looking for is either not available or private!
As does YouTube:
Placeholders are not labels.
There are so many problems with placeholders from a usability and accessibility standpoint, I don’t think they should ever be used.
What’s the problem with placeholders?
Problem #1: Placeholders disappear upon input
You are forcing the user to remember the text of the placeholder. Now that they’ve started typing, the placeholder is gone. The only way to get it back is to remove the text from the text box.
Screen record of a text box with the placeholder value “I am important information!” The user begins to type the text “Oh, well!” which removes the placeholder.
!assets/14wgp6DJgrRyRDco0Tu3X-w.gif Private or broken link
The page you're looking for is either not available or private!
In other words, you are forcing the user to remember the text you decided to hide from them.
Doesn’t it make sense to provide important, relevant information so that it’s always available? Isn’t that more of a priority than your aesthetic sensibilities?
Don’t just make your content easy on the eyes — make it easy on the brain.
Problem #2: Placeholders can appear as pre-populated data
Not everyone uses a web form like you do. Perhaps you read every label, field, and set of instructions. Not everyone does.
Some people are just trying to get through to the next step without the hassle of tediously filling out a form. Therefore, when they see that some fields appear to have text in them (in the form of a placeholder), they’ll skip that control.