What We Can Learn From Google’s New UI

One of the most notable changes to the web in 2011 was the roll out of Google’s new UI across a range of its products. In this article I’m going to look at the thought process behind Google’s UI decisions and determine what we can learn from their methods and principles.

Thumbnail by Alex Patrascu

Googles UI Evolution

1998

Google’s original homepage..

2012

..the new updated look.

Google’s mission is to organize the world‘s information and make it universally accessible and useful.

Unifying the Google Experience

It’s obvious to see that the web has changed drastically since the early days of Google. Users experience the web in a very different way than that of before and view it on a variety of different devices. Google have brought around changes to reflect this. Changes have also been introduced to unify the vast range of Google products and bring them together so that the user has a smooth experience as they navigate between products. Google explains:

Our goal is to give you a more seamless and consistent online experience – one that works no matter which Google product you’re using or what device you’re using it on.

The new experience introduced by Google is based upon three fundamental design principles. Let’s take a look at these.

Focus

The idea here is to allow the user to focus on the task or job that they want to get done quickly and easily. This is achieved by removing unnecessary clutter and bringing to the forefront items and tools that matter. This is also achieved by simple additions such as adding bolder colors for call to actions or hiding certain navigation items when they’re not in use.

By using these methods Google’s UI is able to help its user subconsciously focus on the task that they are trying to accomplish, alleviating frustration from its user experience.

Elasticity

One of the biggest changes since Google started is the way that its users are accessing the web. No longer are we just using Google products on our desktops, we’re now using them on a variety of devices from smart phones and tablets to high resolution monitors and TV’s. The idea behind ‘elasticity’ is to allow users to have a seamless visual experience as they transition between different devices.

Effortless

Although the technologies used behind Google and its products are quite complex, they don’t want to portray this complexity in their design. ‘Effortless’ is about keeping the look simple, clean and consistent.

Google’s new branding will be based on Trust, Beauty, Technological Purity and Innovation – Larry Page

The Central Bar

Central to the redesign of Google is the new Google Bar which replaces the old horizontal black bar which sat at the top of the screen. Google realized that this old bar took up precious place on our screens (30px to be precise) so decided to give it a new look to tie in with their new design principles.

The new menu bar incorporates Google menu, along with search and Google Plus tools. It keeps the search bar and navigation the same across all products and allows switching between products simple. To switch a product you simply roll over the google logo where you will be presented with a drop down menu allowing you to switch ‘effortlessly’ between Gmail, Docs, Maps, YouTube and other products.

Eddie Kessler (Technical Lead at Google) explains

Unify, simplify and say goodbye to the old navigation bar!
Making navigation and sharing super simple for people is a key part of our efforts to transform the overall Google experience, which is why we’re very excited about this redesign.

Google +

Left: A design of the Google + logo by Alex Alex Patrascu Right: Showing the Google + Menu and interface

To analyze each Google product UI would be an entire book on its own so for the benefit of this article I’ve opted to highlight a couple of Google’s most popular products.

Google’s redesign release coincided with one of the most talked about web projects this year; Google +. Google + perhaps showcased some of their new design principles more than any other Google product. After the anticipation of its release, if any product needed to entice users to Google then this is the one. It does demonstrate their design ideals beautifully and for days after I had joined I found myself mesmerized at the simplicity of its design.

Credit for this goes partly to Andy Hertzfeld UI/UX team member who worked on Google Plus. Many people have drawn comparisons between Google’s style and Apples, and this could arguably be due to Andy having previously been employed by Apple in the 80′s to work on the Macintosh Project. Part of Andy’s role in this project was to work alongside Joseph Smarr on the ‘circles’ concept.

Andy explains the idea behind circles:

The idea of categorizing people, that was pretty obvious. Then there was the core idea of the circle editor which was trying to make that fun, engaging, something that you would want to do because it can get tedious. So, we wanted to reward the user for doing it, putting a smile on their face and trying to make it so enjoyable they keep on doing it.

Google Plus is an integral part of Google’s overall strategy now. It can be found incorporated across the majority of Google’s Products and its plus one button is even in search results. Google have made it ultra simple for us to share what we find in our search results. Meaning the term ‘Social search’ is now more relevant than ever and I’m confident that search is heading more in this direction. Google support this by stating:

Google Social Search helps you discover relevant content from your social connections, a set of your online friends and contacts. Content from your friends and acquaintances is sometimes more relevant and meaningful to you than content from any random person. For example, an online movie review is useful, but a movie review from your best friend can be even better.

Gmail

The new Gmail look.

According to reports by CBS news, Gmail had a reported 193.3 million active users as of November 2010. To keep those users on board Google have streamlined the Gmail experience in line with their design principles to enhance the user experience. They have done this by making the following changes:

Conversations have been streamlined

Conversations in Gmail have been totally redesigned to allow for easier reading when trawling through email threads. Profile pictures have been added to the conversation, giving the interface the ability to help you engage in conversations more personally. This also helps you when trying to keep track of who said what. By stripping back many items from the original UI they have allowed their users to focus on communicating with colleagues and friends.

Better Navigation

The left hand sidebar navigation has been redesigned and comes with the ability to customize it. You can change the size of the chat area to be as large or small as you like, or hide it completely by clicking the little icon in the lower left part of the sidebar. As with all the new products, you are now able to navigate your way around Google’s interface by using the tab or arrow keys, once again giving the user the freedom to navigate in the most convenient way to them.

Enhanced Search

This image highlights Gmails new enhanced search feature

Email is an important tool to any web user. So much so in fact that between us we send an estimated 294 billion emails every single day. It’s imperative that we are able to find all the emails that we have scattered around our inbox (I know that I have around 10,000+). Google have provided a helping hand that way surpasses the previous standard search. Users are now able to click the search drop down which reveals an advanced search panel that lets you create a filter from any search in just a few clicks.

Rolling It Out

Whether you like or dislike the new look of Google, there’s no doubt that it has been a success. It has very much been a topic of conversation on the web over the last few months and has gained many fans. Part of its success could be in the way that Google has rolled changes out. Instead of choosing to launch the whole new look at once, they’ve opted to release alterations in stages and usually by product. In choosing this method they have been able to collect user feedback and decide what decisions have worked and what needs re-evaluating for the next phase.

Releasing it in stages also has other benefits. By staging the release dates of each UI phase over the course of several months Google are able to surround their UI changes with lots of media hype. Everyone from the BBC to the New York Times have written about Google’s changes, not to mention the many tweets and comments that have been posted on various sites regarding the changes. Now that certainly can’t be bad for business!

A Deeper Look at Google’s UI

Google UI Colors

By looking at the above color examples we can see that Google has kept its color palette limited. They use blue and red to highlight the important features both of which are color variants of the original Google logo.

Buttons

Illustrating a few of Googles new buttons and icons

As part of their new design strategy Google have introduced a new set of buttons across the range. These buttons are clear, simple, concise and demonstrate Google’s design principle of ‘focus’ quite clearly. They have used a combination of HTML5 and CSS3 to create them. One choice that may come as a surprise to everyone is that the buttons are not actually buttons, nor are they anchor tags but are in fact created using divs with a role attribute set to “button”. This is used to indicate that a generic tag is playing the role of a standard widget, as in this case a button. This is useful for people who may be accessing the site through a device such as a screen reader.

Google have used subtle CSS3 gradients to give their buttons lift and have given them that little bit of extra pop by adding a subtle drop shadow to the bottom of the button on hover. The buttons are generally grouped into 2 categories ‘stand alone’ and ‘left,middle,right’. With each category having 2 different sizes ‘standard’ and ‘large’. By opting for these 4 styles across its range Google are able to give a unified experience for its users.

Comfortable, Cosy, Compact

One factor that encourages a good user experience in any design is visual appeal. Google has allowed for this by allowing users to customize the screen density on certain products. This option appears in GMail, Reader, Docs and other text heavy apps. The display density is split into three presets. Comfortable, Cozy and Compact and these adapt depending on the display density of your computer. With media queries already popular, I’m sure that these type of screen density options will start to appear across a number of other web products.

Conclusion

Having studied Google’s new UI principles quite intensely over the last six months I can tell you what I have observed and learned from the strategy that they have implemented. As one of the biggest brands on the Internet; they have clearly understood (above all else) that simplicity and a unified experience is key.

Simplicity and a unified experience is key.

It has also taught me personally to drop the intensity on a lot of my UI elements. Does the drop shadow really need to be at 80% opacity? Can it be lowered a little to perhaps 20 – 30%? As designers we want people to notice the extra effort that we’ve gone to by adding that drop shadow or highlight and some times tend to overcompensate for this by having it stand out. Sometimes by making it more subtle we can achieve a greater, smoother effect which is pleasant on the eyes and gets noticed just as much. The same principle can be applied to properties such as border radius, try toning them down from the usual 5 or 10px to 1, 2 or 3 pixels. Of course these treatments shouldn’t be applied to every project but certainly make a difference when you’re opting for a “clean” design.

We can also learn that the web is in a very different place nowadays, compared to how it used to be. With the recent news that Internet Explorer is going to auto update its browsers we can now start relying on the latest web technologies to work across the majority of browsers. Google perhaps had an idea of this as non of their new product designs work in anything below Internet Explorer 8. We can now potentially start designing as we want to without as many browser limitations. We should now realign the time saved from this into creating cross device compatibility for other devices and screen resolutions, to give the ultimate user experience.

What do you think about Google’s new UI changes are you a fan or do you find them a pain? I’d love to hear your comments as to what you think.