What's the most Cocoaish way to show that a text field is invalid?

Question

I have a text field which is validated whenever it loses focus. I want to be able to indicate that the value invalid during input so the user has the opportunity to correct their mistake before explicitly moving focus away from the box and triggering validation.

I have seen various implementations, including placing a red border round the field, a little icon that comes up for invalid input, or a bit of warning text.

What is the best way to do this in a way that complies with the conventions of Cocoa and the Apple Human Interface Guidelines?

Templas

+1 Interesting question. I'll have to think about it. – Upsilon

Answer 1

Set its background to light red. This is what Adium does when you go over the message length limit in a Twitter tab.

The specific color Adium uses is:

• Hue: 0.983
• Saturation: 0.43
• Brightness: 0.99
• Alpha: 1.0

as a calibrated (Generic RGB) color.

Pogue

What about people with vision difficulties? – Templas

That's why Adium uses a light red, in order to keep contrast up. For completely-blind users, you could probably include a prefix such as “value too long: ” via the accessibility protocol, though I don't think Adium does this. – Pogue

You should also display some text message. A programmer might know about length limit a user get a WTF user experience. – Meow

Lothar: Adium also shows a numeric counter, which goes negative at the same time the inputline goes light-red. – Pogue

But the question is about validating, this can be much more complicated then just message length. So you forgot to mention the error text message somewhere, then it doesn't seem so easy anymore – Meow

In this case there are a few factors involved (including length and invalid characters). The idea is that with continual feedback the user will be able to deduce what they did wrong. – Templas

And by vision difficulties, I meant people who might not be able to see the difference. For example, you can change a setting in the System Preferences to display the interface in monochrome. – Templas

Joe: Even with the UI in monochrome, light red will still be different from (darker than) white. If you want to accommodate users who are completely blind (certainly a respectable goal), that would require a spoken or otherwise auditory solution, but the rest of us would probably prefer something visual, particularly when the computer is muted. (And don't forget deaf users, who would need a visual solution.) I have nothing to suggest for being more specific about the problem, except perhaps to add a black dotted underline (like the misspelled-word underline) under the invalid characters. – Pogue

@Meow - the validation happens in any case when the text field loses focus. A full message can happen then. This question is about validation as the user is typing. – Templas

Answer 2

What about shaking the text field while making it slightly red? It may or may not work well in practice, but its used in the login field for both MobileMe and user switching on OS X.

Chud

That seems distracting if the field is automatically validated. If it's a login sort of situation, I'd agree. – Togo

Answer 3

I like the Windows solution and implemented a small tooltip popup myself.

I don't think that just changing colors doesn't will work. A textual explaination is often required too. Unfortunately MacOSX removed the balloon tips from old MacOS.

Meow

Balloon Help would require the user to have turned it on, or to turn it on. Tooltips always work, and are natively supported by NSView. – Pogue

I was only thinking about the shaped windows for the balloons. Turn on/off would be based on getting/loosing first responder status. – Meow