It’s always surprising to me the things I continue to learn about the delicate art of presenting design ideas. Yesterday, for instance, while proving my theory about the power of spacing in interface design, it was made very clear to me that messing with email interfaces is a bad idea.
Or, at least, it became apparent that, as a way of demonstrating how a more discerning application of negative space might improve Gmail, altering the number of email messages presented in the interface created an unnecessary distraction. By adding more vertical height to each message in the list, I effectively pushed a small but significant number of messages below the screen’s ‘fold.’
That particular change proved too contentious for many readers, which makes sense. People get very attached to applications as integral to their daily lives as Gmail, and any suggestion of reducing its efficiency — even if other gains are offered — are unlikely to be met kindly. Changing that variable, for better or worse, was not the point of the argument I was making; I should have known better to have avoided it, but of course all things are clearer in hindsight.
Red Herrings in Space
I still think though that even without increasing the vertical height of each message, the other spatial alterations — especially the positioning of each message’s check boxes and stars, and the overall alignment of like elements — make for real improvements. That argument didn’t come across as clearly as I would’ve liked though, as the red herring of reduced message display proved too alarming. Lesson learned; next time I’ll choose something a bit less controversial.
Of course, it’s easier said than done. This isn’t the first time I’ve come across the red herring phenomenon when presenting design ideas. Everyone who’s made the mistake of including misleading dummy copy0 in a mock-up, or similar gaffes, has learned how quickly an audience of design reviewers or clients can fixate on unintentional distractions. The only remedy that I’ve come across for this is experience: learn from mistakes, and then be vigilant about not repeating them. Which unfortunately also means that it will continue to happen in some form or other indefinitely.
Anyway, the post generated enough interest that I thought it sensible to publish the full-size version of the mock-ups. You can see them over at Flickr and decide if the changes make sense at their actual scale. (By the way all the passwords you see in the mock-up are fake, so there’s no cause for alarm.) Enjoy.
+
I think you’re taking criticisim to heart too readily.
Sure, you get less e-mails in your screen, but less than what? Less than a design that was flawed to begin with.
If the design started off your way and they changed it to the current Gmail, people would probably complain that there were *too many* emails on the screen. And if we take the ‘more emails on the screen’ approach, why even have leading at all?
The fact is, people adapt more readily than they recognise, but they still abhor change. So, they’re now used to cramped quarters in Gmail and anything else seems weird.
There’s a visible password email in that mock-up, Khoi
I find that people hang on to this idea of a ‘fold’ far too readily. In reality, we live in a world where scrolling has become almost second nature. People are used to their being a continuation of information below the viewport in which they can see it.
Surely the advantage of having better legibility offsets the disability of having to scroll a little more?
Intelligent, constructive controversy isn’t something to shy away from. Thanks to your previous post, now many of us have learned something new.
Keep ’em coming.
I think it’s also worth recognising that a lot of people understood your post on its merits and still didn’t agree with it. I couldn’t care less about the number of items that are on the screen, I just don’t want windy leading.
Khoi, we NEED this kind of discussion.
Please don’t go for a less ‘controversial’ starting point next time – it’s always good to have a debate about interaction design, especially within leading applications.
I think far too many people forget that this is still an infant media, and that no one has it right yet. People like yourself add an invaluable resource into an area normally full of copycats and yesmen.
And from experience (through usability labs), people can handle the scroll quite easily, and prefer a larger target to click on (Fitt’s Law anyone?).
Thanks for sharing your experience with us.
I think the added whitespace makes for a significant improvement in readability, but that said, I have so far not had any problems in that aspect with Gmail.
You admitted that the added CSS declarations would cost Google a couple of kilobytes, and granted, this does not seem like much. Think of it in Google terms however, and these couple of bytes grow exponentially. I have no idea as to the total subscriber number, but I wouldn’t be surprised if it was well into the three-digit gigabytes, if not more. (Granted, a company giving away gigabytes of space and hosting the maybe most-visited site in the world may not be too concerned about a couple of GB).
For those of us who appreciate your redesign, custom stylesheets may be a solution. We get the spacing benefit at no extra cost to Google.
I still think your spatial version is way more readable. i don’t mind fewer messages above the fold, i’m ok with scrolling. my problem with gmail is that it’s relatively hard to scan, with such little vertical space in between messages.
I’m not a designer but one of the things I love about NYTimes.com is how the text-driven site manages to look so good. Spacing is obviously one of your main design elements. Your mock-up of Gmail is a significant improvement and I agree with the other comments here: in this case, criticism should be ignored.
I hope that Google (and my local news sites) will take your cue and pay more attention to spacing.
I am a designer and I use Gmail. Your mockup is much easier to read than what I have to look at all day in my inbox. I would love to have my inbox look like that!
I am interested in how much critique FireFox will get for their autofill for cached sites in the new release of FF 3. The new autofill now includes the Meta Title, taking up much more space and takes in to account those titles as well as the url when autofilling. It is a huge change, and one that I am not sure I want.(Sounds a bit confusing, but I am sure FF users know what I mean.)
Yay! Thanks, for putting the full size up. And I wholeheartedly agree with Les, above.
I still think your proposal looks great.
Just hoping someone will work up a plugin/theme/Greasemonkey/Stylish script/sheet…
I don’t use gmail that often so here’s a thought from the other side of the fence…
1) The added benefit of having things visually spaced out allows for easier scanning. Your gmail ‘upgrades’ were completely legit. The original scrunched gmail interface reminds me of a website from the 90s.
2) Exactly how many unread emails are these people (the ones complaining about the added spacing) getting a day? And how often are they checking their gmail? If they aren’t checking often, don’t they have to scroll below the fold anyways?
3) And last but not least, talking about things with people that are stuck in their ‘bubbles’ is one of the hardest things to do, but you have to stick to your guns as long as you believe in it.
And remember, its your blog, no need to appease everyone!
Well, couldn’t one of the GMail interface add-ons in Firefox toggle between these? Seems logical. I do see what you mean, though; spacing is usually where I break down in design (I’m not a designer), so I appreciate your comments.
An alternative is to move away from Arial, which doesn’t render very well at small sizes to begin with, and replace it with Lucida Grande while lowering the text size for each email row. You get the negative space back, a font that doesn’t make your eyes bleed and no changes in the number of messages displayed.
I do this through a hack and I love the way it looks because it’s using a typeface actually designed for the screen instead of one that was basically a copy of Helvetica, a typeface best used for high-resolution print to begin with.
There are a couple of gmail skins out there that I would never dream of using but I’d be happy to use your design.
I for one thought this was a big improvement.
Here is a Stylish/Greasemonkey script, for those requesting it.
The positioning of each message’s check boxes and stars was my favorite alteration that you made. So, for me at least, that part of your argument got through loud and clear.
at the google I/o conference recently the second day was started by someone who had done some usability stuff. One example she used was a/b testing on the whitespace below the logo on search result pages. if I remember correctly whitespace lost out to a larger degree than a designer might have imagined.
anyhow my point is these things are scientifically testable and why aren’t more people augmenting design with this information now?