position of lens icon in auto suggest field

Question

Can some one suggest which is the best place for keeping lens icon for auto suggest/ auto complete field from usability point of view? I have seen most of the sites keeping it on the right side of the text field.

See attached are screen shots of different icon positions:

Answer 1

Do you mean the loading icon (spinner) shown while results are being fetched?

I think it depends on two major factors:

1. The width of the field and visual attention of the icon.
2. The reading direction of your audience.

When the field is small enough it could be on the reverse position of the reading start position (so on the right side of the field for LTR-reading audiences). However, as the field gets wider the icon gets harder to spot, at which point it makes sense to put it on the left, where the user is focusing her eyes.

You should reverse this practice for RTL-reading audiences.

Answer 2

It looks like you are referring to the magnifying glass icon in those screenshots.

If you are going to make the magnifying glass a button, it would be strange to have a button come before the field you are typing into. For this reason, I would put the magnifying glass on the right. To emphasize even more that it's a button you could put the icon in a box, and give it a gradient like below.

If you are using the magnifying glass as a label (e.g. to let users know this is in fact a search field), I would place it to the left as the user is more likely to see the icon when they look at the field when compared to the icon being on the right. Apple utilizes this pattern (see below).