Changing information Density

Changing information density in Gmail’s new look

When our design team looked at tackling a redesign across Google properties, responsive design was high on our list of priorities. Responsive design implies that a page or application should dynamically re-adjust itself based on your environment. The specifics of the device that a user is using, and in particular the size of their browser window, should have an impact on the way the application presents itself. To put it simply, Gmail needs to look and feel great on a tiny netbook screen, on a high resolution 30” monitor, or anything in between.

You can try this out yourself if you are using Gmail’s new look. Open up Gmail and make your browser window much smaller. Everything should crunch down as you adjust to give you a better experience in a smaller window. No matter what size your browser window is, Gmail should look and feel great out of the box.

We also thought quite a bit about the density of the information on the screen in the new design. Gmail’s old design packs a huge amount of information into a small space. While this is perfect for some, many people appreciate a more airy design with more whitespace between lines and elements on the page. This is especially true on larger monitors.

We wanted Gmail to be more attractive and easier to read by default, so if you’re on a larger monitor you will see that the items in your inbox are spaced farther apart than they were in the old design. We believe that this results in a better overall experience, but it does take some getting used to. In our internal testing we found that most of us adjusted to the new spacing after about a week and found the old spacing cramped and uncomfortable when they looked back at the old design.

Others, however, found the original spacing to be ideal and wanted to see as much information as possible without scrolling, even on a large monitor. We added a density setting to the gear menu in the toolbar to make sure that everybody can find a setting that works for them: Comfortable, Cozy, or Compact.

Comfortable is the spacing that we recommend for most people. With your density set to Comfortable, the display adjusts fluidly based on screen size.

Compact is the densest setting and matches the line spacing that existing Gmail users are used to. With your density set to Compact the display will stay dense no matter what size your window is.

Cozy is somewhere in the middle. With your density set to Cozy the display will get a little denser when you make your window small but the changes aren’t as dramatic.

Mathletes among you may recognize that the density setting is really a ceiling function.

We think Gmail should be smart enough to always make itself look good on your screen, so we incorporated responsive design. We also think you should be able to see what happens when you change your settings, so we put the density settings in the gear menu right next to your inbox. When you make a change, you can immediately see what it looks like. Our density settings reflect our design philosophy that Gmail’s new look should be more responsive, personal, and beautiful.