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

views:

answers:

+5 Q:

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

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?

+2 A:

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.

Peter Hosey 2010-08-10 12:44:20

What about people with vision difficulties?

Joe 2010-08-10 12:54:45

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.

Peter Hosey 2010-08-10 14:09:59

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

Lothar 2010-08-10 22:19:45

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

Peter Hosey 2010-08-11 05:12:05

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

Lothar 2010-08-11 09:07:18

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.

Joe 2010-08-11 10:38:14

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.

Joe 2010-08-11 10:39:32

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.

Peter Hosey 2010-08-11 11:15:47

@Lothar - 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.

Joe 2010-08-11 20:04:31

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.

Saurabh Sharan 2010-08-10 18:22:06

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

andyvn22 2010-08-10 18:32:08

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.

Lothar 2010-08-10 22:22:41

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.

Peter Hosey 2010-08-11 01:29:34

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

Lothar 2010-08-11 09:09:31

ansaurus

tags:

views:

answers:

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

related questions