If it’s true that in comedy, timing is everything, then in design, I say that spacing is everything. Or at least it counts for a heck of a lot. This is especially true for Web design, and especially true again for the design of interfaces, which is what the bulk of Web design boils down to. The number of pixels separating elements in an interface plays a critical and frequently underestimated role in the orderliness of that interface.
This is an idea that nags at me all the time, mostly because I see so many instances when a more nuanced attention to spacing could benefit a design at virtually zero cost. And it ’s something that comes to mind especially when I look at the school of Web design that prizes functionality so highly that the deprecation of form becomes a virtue. The argument over whether usability does or does not have to come at the cost of aesthetics is so contentious and frequently debated that I won’t go into great depth with it here. Suffice it to say that I don’t believe they’re mutually exclusive. They better not be, anyway, because that’s what my whole livelihood is based upon.
Gmail, for Better or Worse
To prove the point, take Google’s Gmail. Here’s an interface that is extremely well-regarded for its excellent usability (there are naysayers, of course, but I happen to disagree with them). As far as Web-based mail clients go, it represents, to me, the gold standard. It doesn’t make the mistake that Yahoo’s mail client does of slavishly emulating a desktop mail client. Rather, Gmail’s designers understood that it had to make sense within the context of the browser — it’s exceedingly true to its medium, which is why it succeeds so well.
At the same time, it’s an ugly interface. Let’s face it: Gmail will win no awards for aesthetic elegance. Its awkward blue hues and cramped, brutally plain typography are, to me, the epitome of function at the cost of form.
Space Available
But let’s say we accept those elements as core to the Gmail brand. Set aside the subjective question of whether the color and fonts are attractive or not and just accept them as givens. Does that mean that Gmail has to look the way it does? I say no, and the reason why is that there is disappointingly little thinking about the spatial dimension between each of the elements that make up the Gmail interface.
Here’s my contention: while changing nothing about the color or the typography, it’s possible, in my opinion, to dramatically improve Gmail’s overall elegance. All it takes is a more discerning eye paid to the design of the spaces between elements. That is, 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.
To see what I mean, compare and contrast the original interface with my spatially revised alternative. In my opinion, anyway, the extra attention paid to this facet of the design results in a significantly better presentation. It doesn’t completely transform the product, I admit, but it does add a nontrivial if intangible value to the presentation.
The True Cost of Free
When I started writing this post, I wanted to say that this improved elegance can be had for free, because well spacing is free. Well, of course that’ not true. First, there’s the added overhead in the CSS; to achieve this effect, some properties would need to be explicitly specified where before they may have been set to default values. That would be a minor cost though, a few kilobytes at most, by my guess.
Comparing the two versions though, there’s a more important cost to this approach. My alternative does make fewer messages available on the screen — the taller line height for each has pushed about eight messages further down the screen. Some people will balk at this and insist it disproves my point entirely, saying that function and form are in fact mutually exclusive. I don’t really buy that, though. I think the improvement in legibility realized through the increased line-spacing is significant — it’s much easier on the eyes — and the effect is well worth the cost. Besides, I don’t know of anyone who uses Gmail who doesn’t scroll.
+