Should the search box be on the left or the right side

Question

In a web app with a search box in the header - where should the search go, on the left or the right side of the header? What considerations should be taken into account when making this decision?

In terms of what the others do, here's a brief overview of some of the more popular webapps:

Search box on the right

• Dropbox
• Alto mail
• LinkedIn
• Vimeo
• Dribble
• Twitter
• Behance
• Last.fm
• Flickr

Search box on the left

• Gmail
• Grooveshark
• Outlook.com
• Yahoo Mail
• Facebook
• Ohmytracks
• Youtube
• Pinterest
• Outlook Web Access
• Salesforce
• Tumblr
• Evernote
• Delicious

Search box in the middle

• Box.net

Answer 1

I recommend looking at this article bye Jared spool on UIE where he evaluates the positioning of content and how that affects user use based upon a paper Where's the Search? Re-examining User Expectations of Web Objects.

To quote the article

Our experience is a well-designed page trumps user expectations every time.

17% of participants said they expected the upper right corner for the search box.

His final analysis on basis of the paper is given below

Just because users expect the search box to be in the upper right (at least 27% of the time), doesn’t mean that they can’t adjust to finding it in other places. After all, we humans are exceptionally adaptable to our surroundings.

This article by smashing magazine has this to say about the positioning of the searc

Where to place the search box?

There are many possibilities, but only a couple of right ones. The most convenient spot for users would be the top left or top right of every page on your website, where users could easily find it using the common F-shaped scanning pattern. However, some blogs tend to place the search box in the bottom of the (left or right) sidebar. That’s probably not a good idea but is likely done because of advertising considerations.

Looking at the examples you gave of the sites which use search on the left or partially left aligned, a couple of common themes appear :

1. The search is technically not completely to the left but only placed after the logo and is in continuation of the logo to lead the user on to using the search

2. Most of these sites rely heavily on search for their functioning

Search is critical in Google's email since it ties in multiple services together

The search here is important for searching for music is often the first starting point for users

Search is critical to Youtube since it serves as the primary entry point for accessing Youtube's vast database.

However taking an example of sites which have site on their right, a common theme is that though these sites do need to use search its not a critical part or a main driving point for their site and hence its not prominently placed but placed in a location where users would expect it as shown below

Answer 2

In 2010 Wikipedia moved their search box from the left of the page (directly below their navigation box), to the top right of the page. They posted a detailed explanation for doing so, including references to a number of research articles and results from their own research.

I'll quote some extracts, but recommend that you read the whole article:

Another factor that may have influenced user expectations is the common placement of search engine features in the top right corner of the web browser window. There are practical advantages of positioning the search in the top right...

...several usability studies have pointed out a key advantage of navigational elements being placed on the right: it gives immediate access to the browser scrollbar. This is particularly valuable when a) scrolling up and down a list of search results, b) scrolling up and down an article you’ve just called up for information.

In addition, they were specifically interested in how the size of the search box influenced where it could be placed on the page.

The old search box is approximately 20 characters wide, the new search box accommodates 24 characters. More importantly, due to the placement of the old search box in the sidebar of the layout, widening the search was impossible without either relocating it or widening the sidebar.

The search box placement in the top right allows us to maintain a fixed standard width from one page to the next, while giving us maximum flexibility as to what that width should be.

As for non-English languages:

...we didn’t test the English Wikipedia against other languages which had placed the search box directly below the logo, and we recognize that this alternative placement is already an improvement to match user expectations. However, based on the cited research above, as well as the design reasons for moving the search box to the top right, we still believe that the overall case for moving the search is compelling even for those languages, if slightly less so.

Lastly, a summary:

In sum, we moved the search box to a) match web practices and user expectations, b) make it possible to widen it consistent with common usability recommendations, c) in response to actual observed problems of test subjects when using the old search.

We also recognize that millions of Wikipedia users had adjusted to the old placement, and will now have to re-adjust to the new placement. However, Wikipedia’s global audience grows by tens of millions of users every year (it is currently at 375 million unique visitors/month world-wide), and we hope to grow it by hundreds of millions in this decade. That will require that we adapt to common user expectations, rather than expecting every new user to adapt to us. This will unfortunately inconvenience those who have adapted to the old placement. Do we absolutely know that to be the correct decision? No, but the fact that existing users are temporarily inconvenienced by it is not at all indicative that it is not.

Answer 3

According to me, search box on the left means searching a specific entity like searching for a specific movie on boxofficemojo.com, and search box on the right means searching for a specific feature or section on a portal. Search box should be in the middle if 'Search' is the central feature (like search engines) of the app.

If you hadn't posted these names for 'Search box on left' my default reaction would have been that Search Box should be on the right side since I am quite used to seeing search box on the right-top section of a site. Most of these Search box are part of header and independent of the content section, for example this website.

I wouldn't say that Youtube, Facebook and Gmail is on left, they are more in the middle. An example of Search box on left would be BoxOfficeMojo

Answer 4

One vote up for this question because of the importance of standard locations for common parts of the UI!

This study published on eye tracking of common web objects - including search - found fewer fixations and shorter search times when search was in a typical location. For the search field, the strongest effect of movement away from the typical location was on ecommerce sites compared to news or company sites.

Their locations were based on the research in Mental Models for Web Objects.

They surveyed 136 people regarding the location of common web objects, including a search box, on ecommerce sites, news sites, and company sites. The expected location of search depended on the type of site.

In the second part of the study, 516 participants constructed a web application UI by placing the web objects on the screen.

You can see the results by going to the link above. 'Trending toward the upper right' is my description of the results for the search box location.

Wichita State's SURL published a similar type of study in 2002 for a 'typical e-commerce web page'. Figure 5 shows the expected location of search. In this study, the location was the upper center of the page. [They followed this up in 2006 with another] study(http://psychology.wichita.edu/surl/usabilitynews/81/webobjects.asp). Expections of some web objects changed between 2002 and 2006. The location of search moved away from the center and toward the upper right.