Blog Posts

A spring metamorphosis — Google’s new look

5/05/2010 09:00:00 AM

Using Google today, you may have noticed that something feels slightly different — the look and feel of our search results have changed! Today’s metamorphosis responds to the increasing richness of the web and the increasing power of search — revealing search tools on the left and updating the visual look and feel throughout. While we are constantly rolling out small changes and updates, today’s changes showcase the latest evolutions in our search technology, making it easier than ever to find exactly what you're looking for.


The new Google look, with simple left-hand navigation.


What’s new and what’s changed?
We’ve added contextually relevant, left-hand navigation to the page. This new side panel highlights the most relevant search tools and refinements for your query. Over the past three years, we've launched Universal Search, the Search Options panel and Google Squared, and it’s those three technologies that power the left-hand panel.

Universal Search helps you find the most relevant types of results for your search. The top section of the new left-hand panel builds on Universal Search by suggesting the most relevant genres of results for your query and letting you seamlessly switch to these different types of results. The “Everything” option remains our essential search experience with different types of results integrated into the main results, but now you can also easily switch to just the particular type of results you are looking for.

Our expandable Search Options panel launched last spring brought many rich slice-and-dice tools to search. The new left-hand navigation showcases these tools and enables you to get a different view of your results. Perhaps you’d like to see images from each of the results or just the newest information? These options are all on the left, and our technology will suggest the tools that are most relevant and helpful to your query.

Google Squared (available on Google Labs) helps you find and compare entities. Our “Something different” feature builds on the technology in Google Squared to find other entities that are related to your query, so you can easily explore not only the results for your current query but other related topics.

In addition to the left-hand side changes, we’ve updated our look and feel in terms of our color palette and our logo. These changes are slight, keeping our page minimalist and whimsical, but make our overall look more modern.

The new design refreshes and streamlines the look, feel and functionality of Google, making it easier to pinpoint what you’re looking for. It’s powerful, yet simple. Today’s changes are the latest in our continuing efforts to evolve and improve Google. We've been testing these changes with users over the past few months, and what we're launching today reflects the feedback we've received.. We want to ensure that the Google you use today is better than the one you used yesterday, and these latest changes open up many possibilities for future features and enhancements.

To hear more about our new design, check out this video:



Our new interface begins rolling out today globally across 37 languages. We are also launching the mobile version concurrently for English interface in the U.S. Search on!

Posted by Marissa Mayer, VP Search Products & User Experience




Google's new look for mobile

Wednesday, May 5, 2010 9:08 AM

When it comes to mobile search, we strive to not only give you the same comprehensiveness and relevance as when searching with Google on your computer, but also a consistent look, feel, and overall user experience. So today, as we roll out a new look for Google Search results on your computer, we are happy to announce similar changes to Google Search results for mobile.

When you go to Google.com in the US on your iPhone or Android-powered device, and enter a search, you can now tap on the button to the left of the search box on the results page to see a new search options menu. Then, selecting any item in the menu will refine your search. For example, if you are looking for recent results for "Mother's day gift", simply tap the "Past week" option.



You may notice that when the menu expands, the search results slide off screen to the right. Note that you can still interact with them and see them in full just by panning to the right. Also, there are some additional menu options, like "News" and "Products". In the weeks to come, we will be supporting more devices and locales, and expanding the number of options available.

Posted by Reza Ziaei and Mike Buchanan, Google Mobile Engineering Team



The Google design, turned up a notch

5/06/2010 12:30:00 PM

This week we introduced our latest update to search, and I wanted to share a bit of our thinking on the design team. In short, we tried to take all the things we strive for at Google and make them better: powerful technology, snappy results, simplicity and a fun and quirky personality. Our goal was to take a design known by millions of people and make it better. As a designer, it’s hard to think of a more exciting challenge.

During our process we focused on people’s rising expectations for search. As the web has evolved over the past decade, people have been typing more sophisticated searches and seeking out specialized search tools to match. To keep pace with rapid change online, we have teams of engineers working across Google to develop new ways to present and refine search results. Our central challenge with our latest redesign was to figure out how to squeeze all these tools and technologies into a single page.

A common way to expand the flexibility of a website has been to add a left-hand panel of links, often referred to by designers as a “left-hand nav.” We’ve been creating mocks of left-hand panels since the earliest days of Google and have tested these designs with users as far back as 2006. Overall, we’ve found they can provide a great way to navigate without getting in the way of the main content, but they can also be distracting. Our users want more powerful tools, but they also want the simplicity they’ve come to expect from Google.

As a first step towards finding that balance, we introduced the Search Options panel last May, including a toggle to open and close. This way we could quickly try out new search tools, such as refinements by time and content types. Using the lessons from Search Options, designers, researchers and engineers worked side-by-side to explore a vast array of possibilities for a permanently open panel of search tools. We made hundreds of prototypes and gathered feedback from user studies, Googlers and through experiments — including one of our largest visible experiments ever. In the end, we came up with a design that provides dynamic, relevant search tools on the left, while lightening and updating the aesthetics all around. Here’s a picture of the Search Options panel (left) and our new results page (right):


We knew that adding a left-hand panel would inevitably add some weight to the results page, so we took a number of steps to lighten other aspects of the design. The overall visual redesign started with the Google logo. Here’s an image comparing the old logo (top) and the new logo (bottom):
The new logo is lighter, brighter and simpler. We took the very best qualities of our design — personality and playfulness — and distilled them. The logo was the foundation for new icons and hundreds of tiny alterations designed to accommodate and seamlessly integrate the expanded functionality of the left-hand panel. For example, we lightened up the footer at the bottom of the page by removing the blue shading and the underlines on the links, lightening the color and expanding the search box. Here’s a picture of the old footer (top) compared with the new (bottom):

While I’m very happy about our latest improvements, a designer's work is never done. We’re already testing additional refinements and we'll continue to listen to all of you as we work to continue making search better.

If you’re curious, here are some of the other design prototypes we tried (you might have to click to magnify some of these images):
  1. Blue homepage: We’ve always had a strong affinity for blue — after all, blue is usually the color of web links, so it binds the web together. It became the basis for many designs.
  2. Blue button: The big blue button made it all the way to our first external experiment, where it was promptly rejected by users. We heard you loud and clear and changed the button in the next round.
  3. Universal bars: This design emphasizes different types of results with labeled blocks in the main results pane, such as books, news and shopping.
  4. Blue results: This is one of the final blue designs we created and marks the point when we renamed the "Web" link to "Everything" — a label that gets closer to the intent of our mission to organize all the world’s information.
Posted by Jon Wiley, Senior User Experience Designer

Comments