Inside you there are two wolves. That’s not to say there are just two wolves inside you; wolf packs are typically larger in number. It’s also not to say that wolves are the only things inside you. Wolves join lungs, kidneys, and pieces of undigested chewing gum to help form a fully functioning human body.
However, it is specifically these two wolves I wish to talk about in this video. In the interest of protecting their anonymity, I shall be referring to them using the assumed names Adrian... and Chris.
Adrian is a user of the World Wide Web. And as a user of the World Wide Web, they want their encounters with web interfaces to be straightforward. The less time they spend trying to understand and operate the web, the more time remains for essential activities like eating ass. And by “eating ass”, of course I mean biting into the hind quarters of larger herbivorous mammals.
Adrian’s counterpart, Chris, is a designer for the web. Their main preoccupation is with career progression and their understanding is that you only become a designer of note by doing things differently; by innovating .
The two wolves living in your guts are not on great speaking terms—and not just because wolves are fairly inarticulate. The main reason is that Chris’s attempts to be an innovative designer find him fixing a lot of things that simply aren’t f**king broken for Adrian, the web user.
Hyperlinks are a good example. By convention, hyperlinks come with underlines and it is by virtue of these underlines that everyone can tell the difference between what is a hyperlink and what isn’t. They are an important form of signification .
For Chris, convention is all too conventional. He designates these underlines “distracting, unnecessary clutter“ (I’ve actually heard someone call them that) and removes them.
Now Adrian struggles to identify which parts of the web are the connective parts that actually make it a f**king web, which is pretty bad in usability terms, in case that’s not clear. And just coloring the links doesn’t do much to make them stand out either because Adrian is a wolf, so therefore colorblind.
Here’s another common interface component intestinal wolf Chris has seen fit to tamper with. Can you guess what it is? I’ll give you 15 seconds to try and work it out.
Well, then. Those of you who guessed “text input” and not “horizontal rule” or “a border” should be commended for recalling the title of this video: “What Happened To Text Inputs?”
In this case, Chris has not just removed one, or two, but a total of three lines from the interface. It is now just 25% of its former self. This is no longer an in put because there’s nothing to f**king put anything into. This is an on put. And with onputs, there are a number of issues.
Let’s add a label. Because people tend to benefit from the kind of “distracting visual clutter” that tells them what things are for. Those familiar with the Gestalt law of proximity should see the problem straight away. Those not familiar with the Gestalt law of proximity may see the problem even sooner.
Add some more inputs, with labels, now and... what the f**k is this? Not a form as far as anyone can tell.
Chris has reached a fork in the road. He can choose to accept that his needlessly “innovative” treatment of text inputs has created problems rather than solved them. Or he can double down, contriving precarious ways of mitigating the impact of the poor design decision he now refuses to abandon.
Well I’m shocked. Well, not that shocked. So what does Chris do next? I'll give you 7.5 seconds to guess.
Why, yes. In order to increase the proximity between the input’s label and respective input element, Chris has decided to take the label and place it inside the input as a placeholder. Which—as the name suggests—is not a label at all. It’s a placeholder.
Fans of being able to actually read the f**king text on their screen will note that placeholders, by default, come in a grey color. Not interested in being scolded by the accessibility woke platoon, Chris addresses this by increasing the placeholder contrast.
Which means the placeholders now look like values and the form appears to have already been completed . Which is not entirely optimal when your one job is to get people to complete an empty form.
As Adrian bashes his head against a brick wall while simultaneously drinking several bottles of methylated spirit, we should address a further issue. Now the placeholder is being used as a label (while looking like a value) it can no longer be used for what is intended: showing users an example or template for the format of input expected from them. Chris has successfully diminished the input element’s feature set.
It may interest you to know that search engine, haberdashery, and digital advertising giant Google adopted Chris’s input design for their influential Material Design system, which is probably why we see these f**king things everywhere.
Some time after adoption, the Material Design team conducted extensive research into the usability of their inputs, publishing a key finding: “The line affordance under the text field was not clear to some users. The line was confused with a divider.”
No s**t.
So now we’re left with this and another fork in the road. Does Chris accept this entire journey has been pure vanity, resolving to put the label back in its rightful place, where it’s not going to get confused for something else or associated with the wrong input, and without it suddenly disappearing as soon as the user starts entering text? Or is he going to double down on the double down to make a double double down?
And there you have it: The floating label pattern. Disorienting, precarious, just plain bizarre, and something nobody ever asked for. The worst conceivable solution to a problem that never existed in the first place. A teetering turd on a slag heap of selfish and indefensible design decisions.
In summary:
There are, broadly speaking, three ways to design text inputs and only one of them is any good. Save time by choosing the right approach from the outset, then you can quickly move onto the important stuff. Stuff like telling people they can’t use your product or service because their name isn’t white enough for you.