Usability: Why Did We Move The Search Box?

Translate this post
On May 13th, we changed the default appearance of the English Wikipedia to use the new look developed as part of the Wikimedia Usability Initiative. On June 9th, we unveiled the new look in the remaining top 9 languages (by access volume). Other languages will follow in the coming weeks.
The key elements of the new design had been in public beta testing for many months, and hundreds of thousands of users had already adopted the new look. But, nothing compares to the real thing, and we tried to make the switch as painless as possible — by offering a quick way back to the old layout, by explaining our reasoning, observing and listening to comments carefully, fixing bugs and implementing changes quickly.
The single most frequently expressed concern about the changes we’ve made is the relocation of the search box from the left sidebar to the top right corner. This blog post will give an extended explanation of why we made the change, the other changes we made to the search, and what we’re planning to do next.
The old search box location

The default location of the search box in MediaWiki, the software used by Wikipedia, is below the “navigation” box in the top left corner. This was also the location in the English language Wikipedia, as well as many other language editions. Some language editions, including the German one, had customized the location of the search box, and moved it directly below the logo.

What do we know about search usability?
There are essentially three factors that influenced our decision to relocate the search box:
  • common user expectations regarding the placement of the search box on web pages, as determined by the preexisting body of usability research;
  • usability research regarding ideal search box width, and implications for the search box placement in our layout;
  • ability of our test subjects to locate and use the Wikipedia search box, as determined by Wikimedia usability tests in a research lab.

There are several scientific studies that have examined the ideal placement of common objects on web pages. One early study by Michael Bernard conducted in 2001 by surveying participants regarding the expected placement of web objects such as internal links, external links, and search found that both new and experienced web users “generally expected internal search engines to be located in the upper and bottom-center of a web page. A smaller number expected it to be located at the top right of the page.”
This study was followed up five years later by A. Dawn Shaikh and Keisi Lenz (”Where’s the Search? Re-examining User Expectations of Web Objects”) in a survey of 142 participants. The study found that expectations had changed significantly, especially regarding the placement of the site search engine. The figure below illustrates the areas where participants expected the search to be found:

Image (3) search.gif for post 3820
Expected location of site search engine

As the authors speculate and as seems intuitively plausible, early expectations of the placement of the search box were likely driven by the fact that search was commonly associated only with search engines of the time like AltaVista, not with site-specific searches. As more and more sites developed internal search functions, those were increasingly placed in slightly less exclusive screen real estate than the top center, shifting users’ expectations to look for search features in the top right corner.
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. As summarized in this research paper, 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.
Search box width, and placement implications
 

A separate body of research examines the question what width makes a search box user-friendly. A search box that is too narrow obscures the user’s query while typing, inhibiting their ability to complete their search quickly. Usability luminary Jakob Nielsen recommends an ideal width of 27 characters.

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. To make it even easier for users, we are experimenting with an expandable search, which is currently deployed in our sandbox 3. When you click the box, it will expand significantly to the left.  We may or may not end up deploying this feature as we continue to look at ways to make search more accessible and user-friendly.


Our own research
In the course of the usability and user experience work since last year, we have so far completed a total of three usability studies, all of which are documented on the usability wiki:

These studies included both remote and San Francisco based participants. While the primary focus of our studies were obstacles people encountered when editing, finding search in the navigation was clearly one of them, and our test subjects tended to resort to common web search engines to navigate Wikipedia instead of using the site’s own search. With the new search box placement, users’ ability to find and use the site search was markedly improved.  One user intuitively used the search box in its new location and then consciously realized that it had been moved.  To see videos of the other subjects finding and using the search box with ease, please see here.
For those unfamiliar with usability testing, it’s important to note that small samples and agile, iterative tests are commonly understood to be an effective method for discovering most key user interface issues. Our sample sizes were actually larger than strictly necessary, and more diverse than typical due to our use of remote testing methods.
With that said, 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.
So .. why did you move the search box? I liked it where it was!
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.
Other search changes we made
It’s worth noting that the search box placement isn’t the only thing we changed about the search function. Perhaps most notably, the old search had two buttons (”Go” and “Search” in English). If you asked even an experienced user what the difference between those buttons was, you would get wildly different answers, and bug 577 had been open since 2004 because of this.
To answer the mystery: the “Go” button attempts to find an article with the same title as the entered search term and, if it fails, runs a full-text search of all articles.  “Search” will always run the full-text search.  “Search” is necessary where you want to search for a word instead of displaying the article of that title (say, you want to search for instances of “George W. Bush” all across Wikipedia).
In the new design, the less common case (search all across Wikipedia for a phrase, regardless of exact match) can be accessed using the “containing …” option in the drop-down menu. We believe this is both a more discoverable implementation, and it reduces overall clutter and complexity of the search.
Measures and coming changes
We are monitoring overall search volume. In the first week since the deployment, we have observed neither a statistically significant increase nor a decrease in search volume, but it’s too early to draw conclusions. There are also confounding variables. As noted above, the search box has changed not just in placement, but also in appearance and behavior. Finally, search volume isn’t the only interesting metric: search convenience (how long does it take users to, on average, find the search) is another one.
We’ll try to get our hands on solid metrics, but we’ll also continue to look for ways to make search more user-friendly (such as the auto-expansion), fix bugs, and so forth. In continuing our efforts to improve the user experience of all our projects, both for new and experienced users,  we’ll try to share our thoughts with you frequently, and work with you to figure out the right answer. And, if you just can’t get used to the new search — you can always switch back to the old layout, which will continue to be there for you.
Warmly,
The User Experience Team

Archive notice: This is an archived post from blog.wikimedia.org, which operated under different editorial and content guidelines than Diff.

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?

40 Comments
Inline Feedbacks
View all comments

No we can not switch back, as you try to force us to create a login for changing back to monobook! What a shame! And how did you get the feeling that it is right to make a “study” in USA and use it for europeans as well? Never thought a minute, that US-citicens are working a “little bit” different? Simply confess, that you fucked up the search (and many other things) and move it back quickly where it belongs! Below the Logo at the left (in countries where you read from left to the right). Such statements will not… Read more »

@Franz Cheers! It’s a very simple process to create an account, if you really liked the monobook theme. As the American and European cultures are quite similar it shouldn’t be a problem to do this kind of usability study across both. If it’s valid for other cultures is a bit more questionable. So it’d be interesting to see studies with Asian, Latin American and African participants as well! Being European myself, I can say I love the new search position: it makes sense to me, it didn’t take me any time at all to find, even though I was quite… Read more »

During the many months of beta testing, did anyone try the new skin on a mobile phone browser in portrait mode, where the new search box location causes the Article/Discussion/Edit/History tabs to overlap? On my G1 Android, some of the tabs are completely unavailable because of this.

* search convenience *
The one single most cruxial measure for improving search convenience would be to locate the editing cursor by default in the search box (right upon loading of the page)!!
This saves the time & effort to hit the search box with the mouse and makes all the difference in the world for quick searches!!
See http://dict.leo.org for comparison

Wow as usual users are complaining about changes… If I were you I wouldn’t have bothered to do this kind of explanation (well I find it interesting but I already knew these conclusions).
People like Franz will continue to whine until you say “we won’t come back” once and for all. An interesting article by Techcrunch: http://techcrunch.com/2010/05/12/diggs-biggest-problem-are-its-users-and-their-constant-opinions-on-things/
Still I’m afraid you will listen to users’ complaints. Wikimedia would do that, I think. I don’t see it as a good thing for ergonomics.
So, please don’t listen to you users (ahah I suspect I will be laughed at for this)

I’m an experienced user and I think the new search box location is the single best improvement in Vector. The Monobook one was too narrow, and search suggestions by the browser or the AJAX search overlapped the “Search” and “Go” buttons, making full-text-search almost unusable. Besides, the navigation bar on the left used to be too long. Now all these things are fixed – thank you!

So rather than listening to the huge volume of complaints and seeing if there’s any way to accomodate the wishes of those who dislike the new placement (perhaps by making the new layout opt-in), your answer is to say “no, you’re wrong, and here’s why”.
What unbelievable arrogance.

A long-time editor of Wikpedia-fr, I am more than happy with the Vector skin, and especially the new location and behaviour of the search bar. I am sure the accessibility team is aware of that, but I’d like to remind them that unhappy people complain, and satisfied users more seldom write messages of support. Thus, I strongly encourage them not to pay much attention to comments that amount to no more than “I liked the older version better”.

OK I understand, the problem with the width of the search bar. But maybe thats not tooo important. The most time you spent to explain about the “common user expectations”. And in this point we need to make a difference between usual websites with site-specific searches and an online encyclopedia. In Wikipedia the search bar IS the main navigation. On the other hand in “normal” websites you CAN use it, if you cannot find your information by the navigation through categories. Wikipedia is different. You can not compare. So why did you pay so much attention to the user expectations.… Read more »

Moving the search box was dumb. Forcing users change their daily search habits and in-grained muscle memory just because 7% more people look at the top right vs the top left is beyond my comprehension.
Obviously those now in charge of wikipedia aren’t open for input on this and it’s a done deal. But that doesn’t make the change any less needless and dumb.

Honestly, I don’t care about the location of the search field. People will get used to it anyway. However, stating that “search[ing] all across Wikipedia for a phrase, regardless of exact match” is “the less common case” is quite presomptuous. Personnally I use it probably twice more often than the exact match search. This is a huge step backward IMO. Moreover it assumes that the user will read the drop-down menu. I would bet my hand that most users don’t. I use to zap drop-down menus, and it took me several hours to figure it out, as I found some… Read more »

The Foundation got a grant to improve the site. Those hired will want to change things, whether things need changing or not, and the changers will have an interest in defending the changes.
What I want to hear from are the users. Have they been listened to? If not, I want to hear from the Foundation. Not the hirelings.

Wait, what is this drop-down menu? I don’t see any drop-down menu. How am I supposed to do a full-text search?

142 people for the survey, how awesome o_O

While I support the change, I don’t agree that the width of the edit box is constrained by the width of the sidebar. Nothing wrong with making the search box pop out extra wide when focused, then retreating when the focus moves on.

Sorry, but the location of the search engine is a joke. Now I have to scroll up the whole article for it. I don’t care about studies from 2006, that’s almost 4 years ago! And 142 is a very small number of people if you imagine how many people visit wiki every day!

I’m a software/web developer and never understood that so many want the search box on the top right. If this web sites all used this very deep study with 142 people (LOL) as base, I know why they are all wrong. Google does it in the middle of the screen where your eye focus usually is. Ebay and others successful sites also don’t follow this top-right approach. The new position on the top right is so far away (especially with new huge monitors), it always needs a turn of my head to find the search. Simply look at a website… Read more »

For my daily work on the English Wikipedia, this one issue is so important that I can’t support the Vector skin until there’s a gadget available that moves the search box back to approximately where it is in Monobook. I have a large watchlist, and I’ll click on an item and start reading it, and while I’m reading it, I’m often typing in the search box to look for or pick a page to edit in response to what I’m reading. I can’t do that simultaneously with the search box in the upper right corner. Sorry. – Dan

Strong are not those, who haven’t any weakness. If you see someone without any mistakes, he only appear like this. In real he only hide his weakness. That’s really weak. Everybody make mistakes. Strong are those, who accept this. So be strong and don’t try to hide your mistake. Just move the search box back to its “old” position. It’s so easy.

Please consider re-aligning the search box so that the prompt text (“search”) lines up with the tab text (“view history”). As is, the bottom of the search box itself is in line, but the text appears awkwardly justified, too high for the row of text before it.

I recommend switching the search box back to where it belongs. Or, at least, change it to a box that automatically contains the cursor when loading the wiki main page.
Wiki means fast, but the momentary layout always costs a several seconds to search the search box and click it. That’s a waste of time and not “wiki”.

Powers :
Wait, what is this drop-down menu? I don’t see any drop-down menu. How am I supposed to do a full-text search?

I found this comment interesting, so I disabled JavaScript to see what would happen. No JavaScript means no Ajax suggestions, and therefore no access to the text search unless you type “Special:Search” into the search box. That is not good.

Don’t they feel ashamed – those who decided to change the architecture of a project, run by thousands and used by millions (many of them with slow internet connections), after having asked just a handful of people? No matter if the descision itself was good or bad – the way it was made is the worst I can think of!

Hi folks,
After some requests about my script that moved the Monobook search bar to the top right, here’s now a script that moves the Vector search bar into the navigation column:
http://meta.wikimedia.org/wiki/User:Krinkle/Scripts/VectorSearchNav
You can do so by copy/pasting the two lines to your personal vector.js
Can also by installed as a Gadget ofcourse 😉

Yeah…I think things need to be explained. Sometimes even though users complain, they actually are not sure what they truly want.

That is so cool, I learned a lot about usability here from the studies you guys cited. Great Job!

In all this analysis, has anyone considered left-handed users? There’s quite of us. Our brains work differently and I think my eye is drawn to the LHS of the screen. I find it more difficult to work at the extreme right (this also includes scroll bars etc) and the new position of the search box makes me feel a little lost. If you are intent on keeping it on the right, look again at that little results table and note the significant secondary preference at top left. Would it be so bad if there were two instances of the search… Read more »

It is a really shame to move the search-field to the upper left.
Also, the search-field should host the cursor / get the focus on pageload.

Change the searchbox to the left again!!!!

Moving the searchbox, and preventing users without JavaScript from using the fulltext search was just one of the big mistakes you did. The real problem is the arrogance with which you try to sit the problem out! Seems that there need to be people make you feel that it was wrong, by not donating next year. The hardest thing for me is that you excluded several alternative systems and low power computers (think about Africa). And that you try to force people creating accounts for changing back to monobook. If you would really feel confident about vector, you would provide… Read more »

Eddie : In all this analysis, has anyone considered left-handed users? There’s quite of us. Our brains work differently and I think my eye is drawn to the LHS of the screen. Wow, now this is a great argument. Because left handed users always look to the left (which is nonsense, my eyes prove you wrong), it’s bad to move the box to the right? Urgs. Jon : And that you try to force people creating accounts for changing back to monobook. If you would really feel confident about vector, you would provide a simple possibility for readers to change… Read more »

Hate the new “improved” search box location – it is terrifically unfriendly to users of devices with smaller screens. If the mediawiki folk really wanted to be on the cutting edge, functionality favoring smaller screen would have been top of the list. For shame. The “explanations” are self-serving blather from people paid to CHANGE THINGS. OF COURSE they found out that things really, really needed to be changed and that all of us users who don’t agree are simply luddite anti-progress boobs. Way to go mediawiki. So much for user-focused systems… the developers really do know best. I guess I… Read more »

So let me sum up:
– Proposition: I don’t agree with the change. Conclusion: Argumentation by WMF emplyees is “self-serving blather.”
– Proposition: People paid for improving usability have to do something regardless of whether or not it improves usabiltiy (I’m sure there’s a huuuuge incentive to do that). Conclusion: WMF employees ignore your opinion.
Who-hoo.

Is it just me or does the search bar on the sandbox not expand? And wouldn’t it be better if it expanded to fit the text you’d typed once you filled it up?

The search box is not in a natural place to look for it. As someone rightfully mentioned Google and Ebay have it in more natural positions.
A survey with 162 people – not good enough for me.
Bring the search back to where it was or watch the search queries drop like its hot!

@Dan I was going to comment on something else but you said “@Franz Cheers! It’s a very simple process to create an account” I think you are not taking into account how unintuitive it is for a common user to create an account when that user has no concept of what an account is I am computer ressource person for a lot of my friends and I often get comments that they cannot find the search box or are wondering where the option to get the french page has gone I think your research is skewed the only search box… Read more »

The only two notable changes for me: 1. Where is the Language switcher? (that’s a very stupid US centric view to hide the links) 2. What the hell they did with the Search Box and behaviour? There is only one good place for search in a mediawiki Site like Wikipedia: top middle as a toolbar. And with search page – and fulltext by default. And that’s not true – you are saying a 140 people study from 2006 for not-search-sites is your base for a 2010 work on a million user search site? And regarding “users have tested” – without… Read more »

And: have you ever seen wikipedia on a screen with a resolution of more than 1024×768 px? It’s nearly unusable. Has your ux team ever heard of things like column wide for good readability, focused text input boxes or how long a mouse way should(‘nt) be?

@Dan well you have a point about the behaviour ok MW on a large screen, but can you imagine the reaction of the (above) users if they chose to limit the measure of the pages?
People whine about the relocation of a search box obviously in a wrong position, just imagine what they would do if you redesigned the layout from the ground up…