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:
- Give all elements more room to breathe
- Make it easier to target navigation and oft-used links
- Normalize alignment of text and other elements
- Do it all without drastically altering the appearance of the interface
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.