About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

|

I Need Some Spacing

Way back in June over on Subtraction, Khoi presented a tweaked version of the Gmail interface (and then a follow-up article regarding the feedback on the first), improving spacing and alignment by making a few small but significant changes overall:

“…by normalizing the space between like elements, aligning elements along similar spatial planes, moderately increasing the space between stacked items and paying attention to how elements are framed by negative space, we can get what is, in my opinion, a significantly more attractive Gmail interface.” Khoi Vinh

This is something I’ve wanted to see for a while in Gmail, and in fact had presented a few examples last year (July 2007) as part of my interview process at Google (I really must write about my series of amazing job interviews last summer, but I’ll leave that for another time). After reading—and commenting—on Khoi’s post, I had intended to publish my variation on Google’s mid-2007 interface, but as the dedication to blogging continues to elude me, this too fell a few pages back in the Moleskine to-do list—until now.

The Setup

I took a slightly different approach than Khoi, though my goals were similar:

That last goal was important and acted as a guide to the rest: I wanted to present improvements that could be made right away without causing a negative reaction among Gmail users.

Rather than adjust the line height of the main message area, I decided to bring as many of the other elements in line with that as I could. You’ll notice spacing improvements within each line however, reclaiming some poorly used horizontal space. Like Khoi, I felt the message lines were a bit crowded, so to give the impression of more room in those lines, I removed the grey horizontal lines between each item and allowed the background color to bleed through (all they need is some separation—further emphasis on those lines just adds weight). The result is that it feels like there’s a bit more space, without actually adding any.

The main navigation lost its underlines (again, removing unnecessary visual weight—the “this is a link” cue is superfluous here) and gained space (matching the baseline of the message list). The “Compose Mail” link got an extra highlight by way of a background; the extra padding makes it the only navigation item that doesn’t align with the baseline, but that also gives it a little more contrast vertically, thus it stands out more without having to scream for attention. Less important text links within the message area were made slightly smaller (but kept their underlines), and “Mark as read” was pulled out of the drop-down menu and given its own button: I had spent a week or so watching people use Gmail before doing this exercise, and that was the second most frequent action users needed (right behind “Delete”) but was hidden in the drop-down.

Finally, all rounded corners were cleaned up a bit, footer text was aligned to the baseline, and the message list was enclosed on the right side (maybe it’s just me, but it’s always bugged me how those lines just run right to the edge).

Reveal Already!

I’m still happy with how this turned out a year later, and it was well received by the Google interview crew. Compare the before and after images, and you’ll also notice that the improved spacing in this example actually reduces the overall height of the page, allowing two additional message lines to fit in the space of the original.

Both Khoi’s and my realign leave almost all the original elements of the interface intact—this is very important when making changes (even if only suggested ones) to such a popular application, and the same goes for any product, publication or web site that is part of a person’s daily routine.

Whether Gmail incorporates any of these suggestions is out of our hands, but it’s still nice to have the chance to compare.

Note: many changes have already been made to the Gmail interface over the last year, and even in the last few months since Khoi posted his example. Not all are improvements, but at least someone’s making an attempt.

This item was posted by Dan Rubin on Tuesday, August 19th, 2008.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed, but you can trackback from your own site.

13 comments on “I Need Some Spacing”

  1. Posted by Marcos on Tuesday, August 19th, 2008.

    The thing about GMail is that I always knew that there was something wrong, but couldn’t exactly say what.

    After your baseline “refactoring”, I understand why!

    Nice!

  2. Posted by Ian on Tuesday, August 19th, 2008.

    Proof that the difference really is in the detail. Gmail follows a particular trend with Google where their apps seem to look like they were designed by developers rather than designers. They obviously aren’t putting Doug Bowman and co to good use. :)

    It’s a good example though of how vertical rhythm can really help with the alignment and feel of a page. Something that I keep meaning to include with my own work.

    Great examples Dan. Hopefully someone at Google will take notice. By the way, how’d the interview with Google go? :)

  3. Posted by Colin Devroe on Tuesday, August 19th, 2008.

    I’m a Mail.app guy myself. But, if Gmail was designed by either you or Khoi, I may have switched a long time ago. ;)

  4. Posted by Noel Hurtley on Friday, August 22nd, 2008.

    Awesome work Dan. Hopefully someone at Google has seen this!

  5. Posted by Dan Rubin on Saturday, August 23rd, 2008.

    @Colin: Yeah yeah, I know better than to believe it ;)

    @Noel: thanks – they have, actually, just over a year ago when I presented these comps as part of my interview process. I can only speculate of course on the problems that exist within Google’s structure with regards to design (with Doug and staff on hand they certainly aren’t lacking in the talent area), but they clearly have issues making progress in the design area.

    It’s an engineering-focused company, so although disappointing from the outside, ultimately it’s not a surprise.

  6. Posted by Jambe on Thursday, August 28th, 2008.

    You’d think they’d act on it given how obvious the improvement is and how little work they’d have to do.

    You should convert your design into a Stylish CSS document… people would eat it right up (I would, anyway).

  7. Posted by Kris Black on Thursday, August 28th, 2008.

    I like your redesign a lot. Nothing major, just a simple adjustment to what is already a great email system.

  8. Posted by Jason Robb on Wednesday, October 22nd, 2008.

    Hey Dan, seriously convert that design into a Stylish CSS Doc and share the love! I created my own Stylish version of Gmail, and I’d love to get that baseline grid in there, too.

    What did the trick, mostly line-height tweaks?

  9. Posted by Dan Rubin on Saturday, October 25th, 2008.

    @Jason: I’ve been meaning to look into that, I just didn’t want to go down a rabbit hole of constant updates and tweaks to accommodate the little changes Google seems fond of pushing on a regular basis (see Jon Hicks’ Google Reader stylesheet, lots of work for very little return…)

    That said, I’d also be ok if someone wanted to take my adjustments and turn them into a Stylish “theme” or even just a plain old user stylesheet. The changes are primarily spacing-related, with the exception of a few type size changes and an extra button that might require Greasemonkey or similar.

  10. Posted by Personalized Kids Wall Art on Tuesday, March 17th, 2009.

    A great example of how subtle changes in design and paying attention to small details like elements lining up on the page can make a huge difference in the cleanliness, user-friendliness and ease of navigation throughout the site. Especially a site like gmail where you frequently visit the page, the small changes make a huge difference in readability and overall aesthetics.