Not using labels. Big mistake?
OK, so generally a form field without a label is a big no no. Relying only on a placeholder or a default value to portray the information required is usually a bad idea. There is a good post, ironically titled Always use a label, which gives some good detail on the issues.
So if you should always use a label why am I about to suggest a situation where labels could be dropped?
No labels
Well, it’s actually a very specific situation... a login form.
A login form is usually instantly recognisable. Given the following caveats would it be safe to drop the labels:
- Form initiated by a user action e.g. tapping a Log In button
- Form titled “Log In”
- Submit button on the form titled “Log In”
If all these caveats are met I propose the golden rule of Always use a label could be broken. But why? The answer is mainly improved layout and saved space.
Saved space
Removing labels means the username and password field can be bought closer together vertically until they are touching. But if you do that cant the labels be to the left of the field? Well, the answer to that again is space. Letting the fields expand more or less full width, on a phone screen width for example, means long usernames are easier to read as more characters can fit on the screen.
Saved clutter
Also, if labels are removed there are less words on the screen. Less words means less information the user has to process and less distraction from the task of actually entering the data. This sounds crazy as labels usually help in achieving the task of entering the data, but remember I am only suggesting this, so far anyway, for login forms. A more visually appealing interface might make the login process slightly more enjoyable too and therefore more chance of being used and users signing in!
Exaggeration? I don’t know, I would love to see some A/B testing on this.
If no labels then what?
So what can be added to aid entry? Well a placeholder could probably stand alone to give the required information to the user as to which field is which (although its pretty intuitive that the username is normally the first field and password second).
On top of this, iconography could be added to further emphasise that it is a login form. Either a single user esq icon covering both fields (like iCloud see below) or a user icon beside the username field and a password (key?) icon beside the password field (like my design see belower).
iCloud login form
I noticed that Apple dropped labels from their iCloud login form on the iOS9 update. Was this due to space issues?
When labels are to the left of a field on a phone width it really doesn’t leave much space for the actual data entry to the right. Also is it so important to keep the username and password fields touching vertically that they couldn’t simply move the labels above the fields? If anyone knows the answers to these questions and to why Apple redesigned their iCloud login form please comment.
My login form
So this is the design I have gone for on my applications login form. It’s simple and well structured visually. But it’s lacking form labels! Have I made an accessibility and usability blunder or have I broken the golden rule of form design with good reason?
