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?


|_____________| <--intial state

|__________ X_| <--bad feedback

|__________ ✔_| <--good feedback

4 Answers 4


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.

  • Updated question with initial state. May 5, 2011 at 19:03

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

  • Your absolutely right. It should be to the right of the box. My bad (need to tell the difference of left¦right) I'll change my answer. May 6, 2011 at 5:52

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.

  • While focus is still on the field, I would never provide feedback as an error (about the difficult social security number), but in a guiding way: grayish background and a hint to the right format. Only show an error, or maybe even more friendly - a notice, when focus is on the next fields.
    – Lode
    May 6, 2011 at 6:21
  • That's even better. Thanx, I'll think of that in my next design. BR May 6, 2011 at 7:03

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.