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

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

I Need Some Spacing

Way back in June over on Sub­trac­tion, Khoi pre­sented a tweaked ver­sion of the Gmail inter­face (and then a follow-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­ately 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­cantly more attrac­tive Gmail inter­face.” Khoi Vinh

This is some­thing I’ve wanted to see for a while in Gmail, and in fact had pre­sented a few exam­ples last year (July 2007) as part of my inter­view process at Google (I really must write about my series of amaz­ing job inter­views last sum­mer, but I’ll leave that for another time). After reading—and commenting—on Khoi’s post, I had intended 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 slightly dif­fer­ent approach than Khoi, though my goals were similar:

That last goal was impor­tant and acted as a guide to the rest: I wanted 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 decided to bring as many of the other ele­ments in line with that as I could. You’ll notice spac­ing improve­ments within each line how­ever, reclaim­ing some poorly used hor­i­zon­tal space. Like Khoi, I felt the mes­sage lines were a bit crowded, 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 color 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­ally adding any.

The main nav­i­ga­tion lost its under­lines (again, remov­ing unnec­es­sary visual 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 doesn’t align with the base­line, but that also gives it a lit­tle more con­trast ver­ti­cally, thus it stands out more with­out hav­ing to scream for atten­tion. Less impor­tant text links within the mes­sage area were made slightly smaller (but kept their under­lines), and “Mark as read” was pulled out of the drop-down menu and given 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 needed (right behind “Delete”) but was hid­den in the drop-down.

Finally, all rounded cor­ners were cleaned up a bit, footer 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 happy with how this turned out a year later, 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­ally reduces the over­all height of the page, allow­ing two addi­tional 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­gested 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 person’s daily 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 posted his exam­ple. Not all are improve­ments, but at least someone’s mak­ing 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 some­thing wrong, but couldn’t exactly say what.

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

    Nice!

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

    Proof that the dif­fer­ence really 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­ously 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 really 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­fully 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­fully 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­ally, just over a year ago when I pre­sented these comps as part of my inter­view process. I can only spec­u­late of course on the prob­lems that exist within Google’s struc­ture with regards to design (with Doug and staff on hand they cer­tainly aren’t lack­ing in the tal­ent area), but they clearly have issues mak­ing progress in the design area.

    It’s an engineering-focused com­pany, so although dis­ap­point­ing from the out­side, ulti­mately it’s not a surprise.

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

    You’d think they’d act on it given 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­ously con­vert that design into a Styl­ish CSS Doc and share the love! I cre­ated 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, mostly 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 didn’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 Reader stylesheet, lots of work for very lit­tle return…)

    That said, I’d also be ok if some­one wanted 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­ily spacing-related, 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-friendliness and ease of nav­i­ga­tion through­out the site. Espe­cially a site like gmail where you fre­quently visit the page, the small changes make a huge dif­fer­ence in read­abil­ity and over­all aesthetics.