There’s something that’s been bothering me lately. It seems to be some kind of form interface trend where the labels for text inputs are placed inside the fields themselves.
There might be some pros
Admittedly, this makes an interface slicker. It saves space where you’d usually have a label, then some padding, then the input field and probably a load of padding around the lot.
But what you’re gaining in a clean look, you’re completely losing through a total lack of usability.
So, I’m an interface idiot
You know the lowest common denominator, idiot users that we design easy interfaces for? The ones that need to be led by the hand, step by step, across your design to get to the call-to-action?
That’s me, that is. I am an incredibly naïve user. I skim read, I’m forgetful, I barely pay attention and when I do I’m easily confused.
This is what I see
Here’s an example from a site that is otherwise a shimmering beacon of awesomeness over the wasteland that is the web:
As part of Project Noah, you upload photos of nature. The aim is to identify the creature or plant in your photo, and part of that is providing the relevant links to that species’ page on Wikipedia and the Encyclopedia of Life.
It’s a beautiful interface, but I have an issue. I’ll go and paste in a URL, then I’ll select the other text box:
Then I have this thought:
Did I put the URL in the right box? Is Encyclopedia of Life the top input or the bottom input? How do I find out?!
It seems pedantic, but I genuinely do get this sense of panic that I’m entering it wrong and there’s no way to check that I’m doing it right. I have to click back outside the input box, so it no longer has focus, to check what the label was again.
Another example from an interface that I use on a regular basis and generally love. In the 2.8 redesign of the WordPress admin, which is generally a huge amount better than before, the post editor title lost it’s label.
The problem is that the first input box you’ll click into is the top title input. It actually auto-focuses, and some clever script means that it puts the label back in after the auto-focus, but then the second you start typing you’ve lost that label. If you start typing, then backspace because you made a mistake, you’ve lost that label:
Designers often make assumptions
It’s all very well to assume that the user will remember that the title belongs in that box, but what if it’s somebody has cognitive difficulties? What if it’s someone that’s just an idiot like me who clicks into boxes without paying attention to the label first?
It started as an example
Originally we used pre-entered text in an input field as an example, to help users understand the input required. WordPress itself has a great example of this on the Writing Settings page in the WordPress admin:
These fantastic triggers mean that users who aren’t necessary technically minded can see the type of input that’s required to set up post via email, match that to the information they have and easily enter it into the boxes.
When did these useful triggers become a way to hinder users, instead of help them?
The rise of the HTML5 placeholder leaves room for abuse
Edit: “*name*” should actually be “*id*” here in the text input, I always get those two mixed up! (Thanks Mike, for the heads up)
But it’s not the same thing!
A label tells you what a form input requires, a placeholder gives you an example of the input required.
I’m no accessibility expert, but I can imagine the loss of a label isn’t going to help with screen readers. Forgetful people and people with cognitive disabilities will also struggle.
Please think of daft people like me
It might beautify your interface and make you look modern and cool, but a label isn’t the same as a prompt. We need to keep our forms as clear as possible and not let cool technology take over the understanding of basic user behaviour.
I don’t know if I’m alone in struggling with using these inputs, but I’d love to know everybody else’s opinions.