Background images in input boxes

Question

I have been experimenting with right aligned background image treatments in input boxes for the web lately. Are there any rules of thumb for this type of implementation?

Is it considered great contextual feedback or a distraction?

Examples:

|_____________| <--intial state

|__________ X_| <--bad feedback

|__________ ✔_| <--good feedback

Answer 1

So would it be an X until it becomes good feedback?

If so, I would change that part. Don't show anything until it is recognized as good feedback then when the focus is taken off check for bad feedback.

People don't like negative while they are still working on the answer. Its like a nagging mother.

Answer 2

It's good to provide feedback - it confirms for the user that they are making progress and that the system is still alive.

I'd move it out of the field and to the right (sorry Benny). I'm assuming it's an English language website when I say this - we read from left to right. Putting the feedback to the left of the field is drawing my attention backwards, not helping me with the natural reading flow - that puts an unnecessary hurdle in the path.

See the Twitter signup for a good example. https://twitter.com/signup

Answer 3

I've applied an 'invalid' style to fields as a person blurs out of the field. The style I used was a bolder, red outline to the field and a '!' icon on the right edge.

It's nice to reward people as they fill out a form, but having each and every field change state might get a bit distracting. The primary goal is to let people catch invalid fields before submitting, so I'd maybe limit it to the errors.

I'd avoid an 'x' only because some browsers now offer an 'x' icon as a clickable interaction to clear search fields.

Answer 4

I think you should place the feedback to the right of the input box instead of in it. And I think you should have different feedback on different input text boxes. On password boxes, it's always nice to see how strong your password is as you type. On social security numbers (which is often difficult) I think some feedback for not correct input is useful when the user stops typing (timeout 1 second perhaps) - but when it is correct it should directly and clearly state it's right. On other text inputs, wait for validation on out of focus, as @jonshariat says.