4

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:enter image description here

  • Can you provide a screenshot of what you are looking at? – Mervin Jan 22 '13 at 18:25
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.

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.

enter image description here


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).

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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