The New Look Google SERPs

Google+ has been getting all the big headlines this week – and rightly so, it’s a huge development, but the revamp of Google’s entire UI is also a big thing too, and could have some profound effects on user interaction with search results.

Some of the changes are bigger than others, and some will have more of an impact than others.  It appears that Google has gone for a more sober design ethic with less colour, but slightly more going on.

New Google Nav Bar

The new black nav bar at the top of the Google results was the first sign of Google+ coming along.  It’s consistent across all Google pages, and draws more attention to the links at the top which were previously just blue text on a white background.

New Google Navigation Bar

Monochrome logos for other services

The new logos that were introduced last year to provide easier access to the different services (essentially duplicating the top navigation) have had the colour sucked out of them, and now only the active page is highlighted.  I’m guessing that this has been done to draw attention away from them and concentrate the user on the search results rather than potentially being distracted:

Links to Google Services

New Google Search Button

Google have replaced their previous text “search” button with a new image.  Whoop.  The inner geek in me loves that this has been done rather cleverly using CSS shading as part of HTML5 rather than just a relatively big image.  Why is this important?  It means that they can keep the size of images being used to populate the page down low, which means a faster load speed, and better user satisfaction.

The new button looks like this:

New Google Search Button

The button comes from the CSS Sprite that Google use to create all their images, which obviously has been updated to reflect the various other changes.  You can’t actually see the white spyglass, because it’s white on a transparent background, but its there, you ‘ll have to take my word for it:

Google Results Image Sprite

If you have a consistent design across your website, combining icons into a single file will speed up page load times.  There’s a good tutorial here.

Grey search surround

Google’s a search engine, so making the search function prominent is important.  I’m guessing that the grey surround for the search box is there in part to ease the distinction between the new black navigation and the white of the page.  It’s grey – technically, it’s “whitesmoke” or #f5f5f5, with a slightly darker grey border (#e5e5e5) below it.

New Google Results Layout

until this change, Google results were laid out in the  same way as everyone else, with the title above the description and the URL at the bottom:

Old Google Results

The new Google results layout looks like this:

New Google Results Layout

The results look an awful lot busier now with the +1, search preview and then the sharing information, but the big difference here is in terms of the placement of the URL above the description.

Google have been running tests of the new layout in AdWords for a while, and generally speaking, successful changes in that area are ones that have delivered a slightly higher CTR.

My gut feeling with this is that it will the importance of having a “nice” looking URL for your pages to include your keywords so that they are displayed prominently as bold text.  You should already be doing what you can to optimise descriptions*.

The BIG Point

Google have moved the URL which has traditionally been the source of authority in your listings and replaced it with your social recommendations:

A statement of intent about authority?

Your online community is your new authority.  From my perspective Google moving the URL is more about giving emphasis to your personal relationship with a set of results than it is about playing with CTR.

* I see the irony in me recommending pretty custom descriptions when the listings for this blog are a bit ugly.  But this isn’t a client’s website.