Developing Gmail’s new look

Posted by Mark Striebeck, Engineering Director

Editor's note: This post is more technical than most posts here, but we thought some of you might find it interesting to look inside how development on the Gmail team works.

Developing the new look for Gmail was like the proverbial “changing tires on a moving car” - only that the car is carrying hundreds of millions of users and is under constant construction and development. The two main technologies that we use for these types of projects in Gmail are “conditional features” and “Javascript mods” (other Google products use very similar systems). Both technologies were particularly important for testing the new look.

Let’s start with the first one: conditional features. This is our ability to make changes to the Gmail code that get deployed, but not executed. You can think of it as a lot of if-statements around the new code that get enabled when the conditional feature is on. The conditional feature flag itself is set outside of the deployed code. These flags can be set in various ways: as a percentage of overall users (if we want to rollout a feature slowly), for Googlers only (if we want to use a new feature internally), for individuals (if we want to give users early access to a features) and in many other ways. In short, conditional features allow us to update our production systems separately from releasing new features. This way, Gmail developers can make changes, but don’t have to worry about their unfinished changes being released before they are ready.

The other technology is “Javascript mods”. We use this technology to create modifications for a new feature in Javascript across many files. The main challenge with Javascript is that we want to keep the amount of Javascript code that the browser has to download as small as possible - the more code the browser has to download, the longer it takes to load Gmail. So, we don’t want to include the code from all possible mods, but only the code that’s relevant to your browser. Let’s use our Gmail mobile app as an example: it comes in various forms, including the smartphone user interface (UI), the tablet UI, and the offline UI. All these UIs are slightly different. We don’t want to download the Javascript code for all different UIs to the browser. Instead, our server inspects which browser or device you are using and creates the exact Javascript that you need. The selection of mods can be triggered by browsers, devices and even “conditional features”.

Using these technologies, we can make sweeping changes in Gmail without those changes going “live” before they are ready. Plus, since we can turn pieces of code on or off, we can enable new features in specific environments, such as Google, or for specific users, like the Gmail team, without changing the code itself.

Designing Gmail’s new left navigation

Posted by Jason Cornwell, User Experience Designer

One of our goals for Gmail's new look was to make Gmail feel more like a native application with independently scrolling panels rather than a website that scrolls as a single page. This design approach brings with it many advantages: the search box and primary navigation are always in the same place, your inbox unread count is always visible, etc. As with any design decision there were challenges with making this change. People with lots of labels might have their chat contacts pushed entirely off the screen and those with gadgets, like the Google Docs or Calendar gadgets, might have to scroll the left panel past both the labels and the chat contacts in order to see them.

We went through a number of different design revisions to try and address these issues as elegantly as possible. We experimented with several accordion designs, which stack sections on top of each other but only allow one or two to be open at a time.


We also experimented with designs that involved only one scrolling region, but showed fewer entries per section.


The final design combines aspects of both approaches. It is a ducking accordion design with only two sections. The bottom section has two tabs, one for chat and one for gadgets, with room to add more tabs in the future. The upper section, which contains labels, expands to show all of the visible labels when you mouse over it. This allows you to see chat contacts but still give quick access to the labels. Best of all, you can easily adjust the balance between labels and chat to fit your own personal preference by dragging the divider between the sections up and down.


This design went through a number of iterations as well. We carefully adjusted the timing and triggering behavior of the expanding labels section to minimize accidental triggering. We noticed in usability testing that having the labels section expand when you are mousing over the Inbox label delete didn't work for everyone. We tweaked the system only to expand if you moved your mouse below the inbox label and keep it there for a moment. We also tried to ensure that if you are moving your mouse to click on a particular label or chat contact, that label or chat contact will never move out from under you.

The end result is a system that is more flexible, more responsive, and always keeps your chat contacts and unread count visible without adding a lot of complexity or requiring too much clicking around.

Collaboration at work: Global pharmaceutical company IPSEN is going Google

Posted by Franck Hémont, IPSEN

Editors note: Today’s guest blogger is Franck Hémont, Group Informatics Engineering & Development Director at Ipsen, who is leading the company’s project to deploy Google Apps. Ipsen (Euronext: IPN, ADR: IPSEY), is a global specialty-driven pharmaceutical company.
See what other organizations that have gone Google have to say.

IPSEN is a truly global company, with over 4,500 employees spread across almost 50 countries. We work collaboratively across borders and teams, and with a recently implemented restructure it has become even more important to allow the organisation to work together seamlessly.

It was these challenges we had in mind when we evaluated our messaging and collaboration tools earlier this year. When we met with Google, we were looking for a secure, efficient and innovative solution that would allow the IT organization to focus primarily on value creation and the business to more effectively work together.

We’ve been gradually migrating to Google Apps for Business since September this year, after a successful six-month pilot phase. It involved 180 users spread across divisions such as R&D, Purchasing, HR, Manufacturing and across numerous locations in Spain, China, France, United States and United Kingdom. The pilot has allowed us to evaluate how the solution will work in our organization, and how it will bring value to the company.

Revevol, a Google Apps implementation partner, assisted us for the deployment, both for the technical integration and change management.

We’ve been impressed by the sophistication of cloud computing and by the additional functionality Google Apps will bring to our business. The ability to collaborate within a 100% web environment will be invaluable, especially for our researchers spread over distant sites in France and the U.S.

With Google Apps, our employees will be able to access their working environment from anywhere, at any time and from any device, bringing major organizational benefits and allowing our teams to work more effectively together.

Hide morning and night hours in Calendar

Posted by Oleksandr Kyreiev, Software Engineer

How often do you have something scheduled at 3am? What about 10pm? If the answer is almost never, you might want to try out the Hide morning and night lab in Google Calendar.


With a simple drag of a slider you can fold all those empty hours into a single row to set the time range you want to hide. The folded rows still show all your events, just in more compact form.


We're launching this in Calendar Labs (Settings > Labs) to gather feedback on how people end up using this feature. So don’t forget to tell us what you think about this latest addition.

Gmail app for iOS available in the App Store (again)

Posted by Matthew Izatt, Product Manager

Two weeks ago, we introduced our Gmail app for iOS. Unfortunately it contained a bug which broke notifications and displayed an error message, so we removed it from the App Store. We’ve fixed the bug and notifications are now working, and the app is back in the App Store. For an overview of what’s available in the Gmail app for your iPhone, iPad or iPod touch, check out this blog post.

In the short time the app was public we received a lot of helpful feedback and feature requests. This included requests for everything from bigger features like multiple account support to customizations like improved notifications and mobile specific signatures.

We’re just getting started with the Gmail app for iOS and will be iterating rapidly to bring you more features, including all the ones listed above plus many more. Based on your comments we have already improved our handling of image HTML messages - they are now sized to fit to the screen and you can pinch to zoom in.

To try out the Gmail app today, install it from App Store on any iOS 4+ device. Those who already have the Gmail app released Nov 2 must uninstall or log out of the old app prior to installing the new app.

Wouldn't it be great if Android's own turn-by-turn navigation had celebrity

Wouldn't it be great if Android's own turn-by-turn navigation had celebrity voices. +1 for Bert and Ernie on +Google Maps

http://www.engadget.com/2011/11/11/bert-and-ernie-tomtom-voices-tell-you-how-to-get-how-to-get-to/

Bert and Ernie TomTom voices tell you how to get, how to get to Sesame Street (video)

How real users helped us develop Gmail’s new look

Posted by David Choi, User Experience Researcher

When building Gmail’s new look, our goal was to make the most engaging, accessible, and most of all, easy to use email experience possible. To accomplish that, we had many real Gmail users try out changes to the look and provide feedback during its development.

One of the most important ways we obtained feedback was through usability studies. In these types of studies we observe people trying out our products in a controlled environment. We invited Gmail users from all walks of life to participate in usability studies and used the results to find problems and identify improvements before we launched.

For Gmail’s new look, we started very early. Long before any Googler began using or even building the new look, our designers created an early prototype. We then had Gmail users participate in a usability study either by coming to one of our offices or remotely connecting from their homes.

An example of one of our usability labs. People in usability studies use our products on the pictured computer while they are being observed through a one way mirror and video cameras from the room next door.

The study participants evaluated the early prototype by doing many of their everyday Gmail tasks, such as reading, sending, and replying to emails. We then looked at how easy or difficult it was to complete those tasks, and made changes based on this feedback. For example, one of the things we found with our prototype was that we had put too much emphasis on conversation level actions at the expense of per-message actions. As a result, our study participants had difficulty finding the reply button on each message. In response, we changed its appearance, size, and location to make the reply button easier to see.

As we continued to develop the new look, we evaluated our progress through additional usability studies with even more people. Much of what we captured from these studies was users’ first reactions to the new look. But Gmail is something people use repeatedly, not just once. So in addition to first impressions, we were also interested in seeing how people adjusted to the new look as they used it repeatedly in their daily lives. To find that out, we conducted a different kind of study called a longitudinal study. Longitudinal studies are used to observe the longer term effects our products have on people’s usage.

The longitudinal study consisted of turning on the new look for a group of Gmail users. We captured their initial reactions after their first experience. Then we let them use the new look in Gmail as they normally would as part of their everyday lives. As the days and weeks passed by, we periodically checked with them to see how they were adjusting to all the changes. Like with anything new, there were some changes that our participants initially needed time to adjust to, but later came to prefer as they used the new look more. On the other hand, problems that were not seen during the first couple times of use later emerged after more prolonged use. For example, many of the changes we made to the new left navigation were the result of people reporting their repeated experiences using labels and the chat area over time.

These studies have been absolutely critical in helping us build Gmail’s new look. Much of how it looks and behaves is a result of people participating in these studies and giving us their feedback. If you are interested in becoming a participant in a research study about Gmail or any of Google’s products, you can sign up at google.com/usability.