You’ve seen this truc before: most sites avoid labels altogether in intuitive, small forms (login forms are a premier example), placing the label contents into the text fields itself, using a pale class to denote that it’s “help text”.
The text is then reset when user focuses on the field, without him doing anything apart from clicking on it. All is good. Sun is shining. Users are happy, we are happy. Or are we?
Oh come on, you know you always have something in the back of your head that keeps nagging you: what if the user – God forbid – actually forgets what the helpful pale text is about? What does he do? Focus on another field to reset the value and get a brief glimpse of it?
Pfffft! Lame.
So what does Apple do? Setting the standards*, again.
I’m referring to the spiffy login form of me.com.
The Apple design robots use two states to make sure the user never, ever forgets: one, is the well known and abused classic pale class (color: #808080).
However, when a user focuses on the field but does not proceed into writing, the label is still there, a bit paler (opacity: 0.42) but still there. So the user starts writing without ever losing the field from sight.
Clever! Will use this approach in future projects.
* Online MobileMe sucks though, Apple. Fix it plz, kthnxbai.
3 comments on this post
ultragreen #1
05.Dec.08
One of my buddies is always talking about your blog at work – finally came and checked it out today, nice work! I’m subscribing to your rss feed – keep on posting!
Svelon #2
05.Dec.08
Well, what happens if the user forgets what’s she’s writing while she’s typing? Endless loop, huh?
I don’t find it a good idea anyway, since most users tend to manually delete the contents of a field before they start writing something in it..
Sugar #3
05.Dec.08
@Svelon
It’s much more difficult to lose the mental image of the help text if it keeps being there after you focus.
Plus, you missed the point, the user never has to “manually delete” anything in the first place, the help text is automatically erased when she starts writing.