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 Sub­trac­tion, Khoi pre­sent­ed a tweaked ver­sion of the Gmail inter­face (and then a fol­low-up arti­cle regard­ing the feed­back on the first), improv­ing spac­ing and align­ment by mak­ing a few small but sig­nif­i­cant changes overall:

…by nor­mal­iz­ing the space between like ele­ments, align­ing ele­ments along sim­i­lar spa­tial planes, mod­er­ate­ly increas­ing the space between stacked items and pay­ing atten­tion to how ele­ments are framed by neg­a­tive space, we can get what is, in my opin­ion, a sig­nif­i­cant­ly more attrac­tive Gmail inter­face.” Khoi Vinh

This is some­thing I’ve want­ed to see for a while in Gmail, and in fact had pre­sent­ed a few exam­ples last year (July 2007) as part of my inter­view process at Google (I real­ly must write about my series of amaz­ing job inter­views last sum­mer, but I’ll leave that for anoth­er time). After reading—and commenting—on Khoi’s post, I had intend­ed to pub­lish my vari­a­tion on Google’s mid-2007 inter­face, but as the ded­i­ca­tion to blog­ging con­tin­ues to elude me, this too fell a few pages back in the Mole­sk­ine to-do list—until now.

The Setup

I took a slight­ly dif­fer­ent approach than Khoi, though my goals were similar:

That last goal was impor­tant and act­ed as a guide to the rest: I want­ed to present improve­ments that could be made right away with­out caus­ing a neg­a­tive reac­tion among Gmail users.

Rather than adjust the line height of the main mes­sage area, I decid­ed to bring as many of the oth­er ele­ments in line with that as I could. You’ll notice spac­ing improve­ments with­in each line how­ev­er, reclaim­ing some poor­ly used hor­i­zon­tal space. Like Khoi, I felt the mes­sage lines were a bit crowd­ed, so to give the impres­sion of more room in those lines, I removed the grey hor­i­zon­tal lines between each item and allowed the back­ground col­or to bleed through (all they need is some separation—further empha­sis on those lines just adds weight). The result is that it feels like there’s a bit more space, with­out actu­al­ly adding any.

The main nav­i­ga­tion lost its under­lines (again, remov­ing unnec­es­sary visu­al weight—the “this is a link” cue is super­flu­ous here) and gained space (match­ing the base­line of the mes­sage list). The “Com­pose Mail” link got an extra high­light by way of a back­ground; the extra padding makes it the only nav­i­ga­tion item that does­n’t align with the base­line, but that also gives it a lit­tle more con­trast ver­ti­cal­ly, thus it stands out more with­out hav­ing to scream for atten­tion. Less impor­tant text links with­in the mes­sage area were made slight­ly small­er (but kept their under­lines), and “Mark as read” was pulled out of the drop-down menu and giv­en its own but­ton: I had spent a week or so watch­ing peo­ple use Gmail before doing this exer­cise, and that was the sec­ond most fre­quent action users need­ed (right behind “Delete”) but was hid­den in the drop-down.

Final­ly, all round­ed cor­ners were cleaned up a bit, foot­er text was aligned to the base­line, and the mes­sage 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 hap­py with how this turned out a year lat­er, and it was well received by the Google inter­view crew. Com­pare the before and after images, and you’ll also notice that the improved spac­ing in this exam­ple actu­al­ly reduces the over­all height of the page, allow­ing two addi­tion­al mes­sage lines to fit in the space of the original.

Both Khoi’s and my realign leave almost all the orig­i­nal ele­ments of the inter­face intact—this is very impor­tant when mak­ing changes (even if only sug­gest­ed ones) to such a pop­u­lar appli­ca­tion, and the same goes for any prod­uct, pub­li­ca­tion or web site that is part of a per­son­’s dai­ly routine.

Whether Gmail incor­po­rates any of these sug­ges­tions 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 inter­face over the last year, and even in the last few months since Khoi post­ed his exam­ple. Not all are improve­ments, but at least some­one’s mak­ing an attempt.

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


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 some­thing wrong, but could­n’t exact­ly say what.

    After your base­line “refac­tor­ing”, I under­stand why!


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

    Proof that the dif­fer­ence real­ly is in the detail. Gmail fol­lows a par­tic­u­lar trend with Google where their apps seem to look like they were designed by devel­op­ers rather than design­ers. They obvi­ous­ly aren’t putting Doug Bow­man and co to good use. :)

    It’s a good exam­ple though of how ver­ti­cal rhythm can real­ly help with the align­ment and feel of a page. Some­thing that I keep mean­ing to include with my own work.

    Great exam­ples Dan. Hope­ful­ly some­one at Google will take notice. By the way, how’d the inter­view 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.

    Awe­some work Dan. Hope­ful­ly some­one at Google has seen this!

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

    @Colin: Yeah yeah, I know bet­ter than to believe it ;)

    @Noel: thanks — they have, actu­al­ly, just over a year ago when I pre­sent­ed these comps as part of my inter­view process. I can only spec­u­late of course on the prob­lems that exist with­in Google’s struc­ture with regards to design (with Doug and staff on hand they cer­tain­ly aren’t lack­ing in the tal­ent area), but they clear­ly have issues mak­ing progress in the design area.

    It’s an engi­neer­ing-focused com­pa­ny, so although dis­ap­point­ing from the out­side, ulti­mate­ly it’s not a surprise.

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

    You’d think they’d act on it giv­en how obvi­ous the improve­ment is and how lit­tle work they’d have to do.

    You should con­vert your design into a Styl­ish CSS doc­u­ment… peo­ple would eat it right up (I would, anyway).

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

    I like your redesign a lot. Noth­ing major, just a sim­ple adjust­ment to what is already a great email system.

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

    Hey Dan, seri­ous­ly con­vert that design into a Styl­ish CSS Doc and share the love! I cre­at­ed my own Styl­ish ver­sion of Gmail, and I’d love to get that base­line grid in there, too.

    What did the trick, most­ly line-height tweaks?

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

    @Jason: I’ve been mean­ing to look into that, I just did­n’t want to go down a rab­bit hole of con­stant updates and tweaks to accom­mo­date the lit­tle changes Google seems fond of push­ing on a reg­u­lar basis (see Jon Hicks’ Google Read­er stylesheet, lots of work for very lit­tle return…)

    That said, I’d also be ok if some­one want­ed to take my adjust­ments and turn them into a Styl­ish “theme” or even just a plain old user stylesheet. The changes are pri­mar­i­ly spac­ing-relat­ed, with the excep­tion of a few type size changes and an extra but­ton that might require Grease­mon­key or similar.

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

    A great exam­ple of how sub­tle changes in design and pay­ing atten­tion to small details like ele­ments lin­ing up on the page can make a huge dif­fer­ence in the clean­li­ness, user-friend­li­ness and ease of nav­i­ga­tion through­out the site. Espe­cial­ly a site like gmail where you fre­quent­ly vis­it the page, the small changes make a huge dif­fer­ence in read­abil­i­ty and over­all aesthetics.