Articles
RSS FeedAugust 27, 2008
Interface bits: Evernote sign in error
This is pretty clever, and it’s so simple that I never even thought of doing this. Besides giving a helpful textual error (Username and password do not match) this form marks the label red instead of adding a background color or red border to the field.
There main problem with adding a background color to an input field is that you have to use a lighter version of red to keep the text inside the input field legible. The lighter version of red is pink, which often messes with the overall looks of your application, and pink doesn’t feel like an error anymore.
The problem with adding a border is that [after the error] the input field doesn’t look like it’s supposed to look: that text field that had a little shaded border before (depending on browser/OS), is nothing but a white rectangle with a red border now. Adding borders to input fields also breaks standard browser behavior like the focus ring in Safari and Opera.
Background colors and borders are attributes you can’t safely add to input fields without making them look entirely different. I’m all for leaving form elements unstyled, so this Evernote solution is superb. This looks like it could even become standard behaviour in our CMS.
So, you’ve re-enabled comments then, ey? ;)
What I wanted to share, was that you can circumvent the “problem” you were talking about in a quick and easy manner: you can change the background colour to red and add a :focus state on the input element, which changes the background colour back to white. Changing the colour on the label text is a nice addition though!
August 28th, 2008 at 2:19 ∞… which would require an additional script that adds :focus-support to Internet Explorer 6. This is cleaner.
August 28th, 2008 at 2:51 ∞Ahhh yes, the almighty Internet Explorer 6. Frankly, and boldly put, I don’t care enough for that browser (or its users for that matter) anymore. You can simply add the script via conditional comments, so any other user isn’t bothered by the extra download. And it just comes in handy. These days it is one of the “standard” scripts I include in websites meant for real world use. At least I am able to code the biggest part of the CSS with :focus (.focus) selectors. Sure makes things a lot easier for me. And since mobile users won’t be using IE anyway, the extra 402 bytes probably won’t harm anyone.
Besides: who ever said you couldn’t use both techniques at the same time? Colouring the background of an input field sure adds an extra visual signal. Hmmm. Come to think of it, I’d like to see this tested:”what would be the best way to mark an error on an input form?”
August 28th, 2008 at 3:28 ∞True, but what you’re saying involves extra work without any real gains. And I sure wouldn’t want to encounter a [big] textarea marked with a red background when filling out a form. It’s a valid solution, of course. But this one from Evernote, I like.
August 28th, 2008 at 3:43 ∞Hmm, maybe you’re right. I’d also like to see what the psychological effects would be if we’d use a pale shade of yellow (say #ffc) as a background colour in stead of the rather harsh red. Would it come off as more friendly, or would the message not be clear anymore. Experimenting with text weights for the labels is also a valid option, I think. Then again, according to Nielsen you should only change one property at a time for marking different parts of interaction (eg: links in blue/purple).
Not an easy one, this.
August 29th, 2008 at 5:47 ∞Nielsen isn’t colorblind.
August 30th, 2008 at 2:40 ∞Definitely one to remember! I also like this approach more than changing the background or stroke of the input element.
The combo of the red label and red warning text attracts just enough attention without being overly intrusive.
On a side-note: Evernote is a killer application for a synchronised notetaking on a Mac(s) + iPhone setup.
September 26th, 2008 at 12:09 ∞