Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When considering eye-tracking and the cognitive processes of identifying what an interface element is for, is it better for the button that activates the (often unlabelled) search operation to be on the left or the right of the search field?

share|improve this question
add comment

7 Answers

up vote 34 down vote accepted

I think the processes are like those. Best interaction requires less cognitive load, assuming left-to-right reading and acting pattern.
enter image description here

share|improve this answer
5  
The image says it all. –  kontur Oct 13 '13 at 19:51
add comment

I think the previous answers are correct in pointing out that for left to right reading languages the familiar UI pattern is to provide the search button on the right to continue with eye tracking that will follow the search text to the search button.

To complete this discussion, let's consider mobile UI patterns which offer consistency because of the keyboard. The search button acts similar to the "return" or "enter" button on a desktop, which is to the right. Also, note that each search field is preceded by a search icon to identify the input field regardless of a placeholder. These screenshots are from iOS6, iOS7, and android and shows this pattern is device agnostic.

One thing to consider is the "cancel" button. Although not apparent in these shots, the positioning is not consistent across apps. Some place it to the left, likely to signify going backwards, and others keep it to the right to remain in line with tracking.

facebook ui pattern ios7mashable ui pattern ios6 android - google ui pattern

share|improve this answer
    
Not being an iOS user, I would hit the Cancel button several times and wonder why my search wasn't working, before finding the Search button on the keypad. I'm bad about going with button shapes and positions and not actually reading the text. Wonder how many others are like that? –  DocSalvage Oct 18 '13 at 19:52
2  
I can see how you would think that, but in practice it actually makes a lot of sense - press input field, type, and then search takes the place of return and feels quite natural because you press another keyboard button instead of leaving the typing field for the top of the screen to press search. Cancel is harder to get to which builds in some certainty before pressing it. –  glilley Oct 19 '13 at 1:53
add comment

I think for people whose language reads left to right will also interact with elements on a website in a similar fashion, plus as gurvinder points out, this has become the norm and is now what the vast majority of people will expect from a search bar or any kind of input which requires an action after.

share|improve this answer
add comment

If the search rewrites requires a button, then the button should be after the query input control, enabling a flow forward and also enabling use of the tab button to proceed forwards in the search flow.

(The tab button is useful when you have a lot of input to fill in and don't want to keep switching between keyboard and mouse.)

share|improve this answer
add comment

Update: Search button should be on the right side of the input box (Didn't explicitly mentioned it in the original answer).

Yes, simply because that is how it has always been and this is what people has been used to.

Unless, the button is auto-suggest (like google search) where upon selection of the suggested items search is suppose to trigger by itself. But there also, an explicit search button is required for more conservative users.

share|improve this answer
    
Question was "is it better for the button to be on the left or the right of the search field". Where have you answered that? –  Mohit Oct 14 '13 at 10:16
    
@Mohit My bad. I have edited the answer now. –  gurvinder372 Oct 15 '13 at 3:25
add comment

You may want to assess the default width of the search text entry area as well. This could expand on click but be a little smaller by default so that at a standard distance, the field and button can be seen in the field of view at the same time with less eye movement. Eye movement is really fast, but really you are creating a "word" element where the user can quickly identify the object as a whole (field + action button) and only have to do a quick recognition rather than have to read and interpret more deeply.

share|improve this answer
add comment

As it is written up, search button is now replace by enter keyboard action.

A specific search button is not mandatory at right in mono criteria search. But it is in multi criteria search.

In this case the right place is free for cancel cross icon and so the magify search icon is naturally place at the opposite of the cancel cross ah left.

This pattern also is used in url area of lots of internet browsers which naturally calls internet search engines when the user doesn't tape an URL web site but he tapes one or more words as it is a search field.

Don't forget writting the "search" word within the input area if you dont display thé search button.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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