While I agree that is visually looks more balanced, it takes more than my opinion to decide that facebook made a design mistake.
That said, it's pretty easy to get too involved in your own work to notice a bigger picture so breaks to step back are highly recommended.
Sticking a giant firetruck-red "CONVERT" button surrounded by flames and rainbows really does sell better. But boy does it look awful.
It's not the visual or web designers primary job to A/B test or step into the users shoes on every detail, that's what a responsible and valuable UX person should be doing (note I didn't say UX designer).
The margin on the "Like/Comment/Share" and Comment boxes is also 5px total. (Comment box is margin 1px, padding 4px)
Maybe it's symmetry of a different sort?
But I was struck by the irony of this particular observation being made via a blog that uses a body typeface with ever-so-slightly but definitely too-narrow tracking (letter spacing). Or maybe the kerning data is off. I would have it loosening by about 1/200em overall, with the most noticeable improvement becoming apparent on adjacent vertical strokes.
EDIT: the samples of this face, "Oxygen", that I see at the creator's site (Vernon Adams) don't suffer from the same issue so perhaps something has gone awry in the conversion to WOFF.
Before that, Posterous’ default template had tiny, light grey, non-subpixel-antialiased text for body copy. It was excruciatingly hard to read. I never understood that; the point of a blog is to making reading and writing easy, but Posterous only ever cared about the “writing” side of that, it seemed. (This point is further illustrated by the obnoxious headers Posterous blogs had. By far the most visually noisy part of a Posterous post page was the call-to-action at the top: Sign up for Posterous, yourself!)
Actually, Garry, I’m pretty curious about this. What was the reasoning behind that small grey body text? I’m sure I am just being naïve here. Please enlighten me.
Perfect typography does not dictate the success of your product.
It's not a bug -- by any stretch of the imagination.
Unequal padding is a legitimate design decision as any other other.
But I see how it can annoy the hell out of compulsives.
Symmetry is not perfection. Plenty of unbeatable designs and works of art are non symmetric.
And the poster of TFA is not a "good designer" IIRC, merely some annoyed blogger. I was talking about HIS annoyance with an assymetry (that might very well be intended) and not about some designer sweating the small details.
>Calling them "compuslives" is dismissive, and is also insulting to people who actually suffer from OCD.
It might be dismissive, but it's also quite accurate. Could even be medically accurate for a lot of them.
(Seems you cannot say anything in this day and age without "insulting" someone. So be it. I have mild OCD too, and I could not care less about someone calling me "compulsive").
> Symmetry is not perfection.
Being a "perfectionist" is not the same as actually producing "perfection." It's about setting extremely high standards. I never said I agreed that the extra 3px was better, but I understand the importance of the decision, however minor.
I also understand that, in most cases, 3px won't actually make much of a difference. But hundreds of pixel-level decisions over the course of an entire project will make a difference in the final presentation. I'm not saying all of them are right or wrong, but unless you're going to A/B test every single debatable bit of padding or margin, deferring to a designer who cares about the presentation and aesthetics makes sense. It is often subjective, but so what? It's the designer's job to care about these things.
I still think that equating this to OCD is simply not accurate. As someone who does not suffer from the disorder, I guess I can't actually speak to whether or not it's insulting, so that was poor word choice. But I do know that living with OCD can be totally debilitating, and to say that it could be "medically accurate for a lot of them" (designers? perfectionists?) is just plain wrong. This is what OCD looks like:
http://www.youtube.com/watch?v=nrRqb5cvM5E http://www.youtube.com/watch?v=x4sadYeLHKU
If readability is a feature, then lack of readability is a lack of that feature, which is a bug [ as measured against the goals of the product ]
Perhaps it is about density of information.
Perhaps it is that I like to have a very different spacing between two lines of the same paragraphs and two lines with a paragraph break. (So my brain can effortlessly divide it into parts.)
Perhaps... it is just a matter of taste. But I guess I am not the only one.
This spacing behavior is likely also a part of that. It just happened to me very, very recently, and there used to be sufficient padding in that UI location.
yeah, but over 1.8 billion page views.. thats 3px is a _lot_ of extra bandwidth.
Not to mention all those screen pixels gone to waste.. thats 3 times the screen width every time.. say 50x3x1280 px per page view.. jesus thats enough to power a small village in the third world.
Not to mention the Carbon footprint...
</satire>
On a side note, whenever I set the margins of adjacent elements, I take some time to wonder if I'll put a margin-bottom on the 1st element or a margin-top on the 2nd one, or put both margin-top and bottom on the middle element and none on the 1st and 3rd. My rule of thumb ends up being the following one: use only one margin (top or bottom) on all adjacent elements, because some of them might disappear on some pages, so I need to provide some kind of flexibility in order to maintain a decent spacing for each and every scenario.
"For a CSS device, these dimensions are either anchored by relating the physical units to their physical measurements, or by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel."
It means that the post is closer to the comments are closer than to the user, and it pulls your eye more naturally to the comments than if they were perfectly equal.
Sometimes asymmetry is a useful design element, too.
Edit: I noticed that lukeholder has said the same thing.
As a designer I want to put love and attention into all my designs and I want each one to be better than the last as to always be improving. Those three pixels may not mean much to you, or most, but it's those types of things that when you pull out the magnifying glass or really admire a piece of art, that really matter. A lot of times I fail personally at making sure each detail is right, but I would hope that someone could one day look at my work and say he really paid attention to the details and he wasn't just rushing or not caring about the projects he did.
So I think it's less of wow is this really worth all the fuss over 3 pixels but more of a testament to how Facebook values the details in design. Sure Facebook has design that's decently pleasing to the eyes, but you have to wonder why this went unnoticed. If it was me coding the feed, I would've caught it and fixed but I wonder whoever was doing the coding actually stopped to think about it or tried to fix it and got shot down or whatever reason it could have been. It could've been an honest mistake, or a purposeful one, or just someone trying to meet a deadline.
To send a note out to everyone for a thought to think about, really try to put some sort of personal attention to the details when you're working. Whether it's programing or designing, you may not think opening up your code editor and finding the right line in the CSS to fix those 3 pixels is worth it, but someone one day might see that and have to wonder why and if you care about the quality of your work and the image your putting on your brand, I would take it personally to make sure it was perfect. I think this goes a long way with moving up and getting noticed. Anyone could skip it and it's not the end of the world, but finding people that care enough to put such attention and detail in their work to make sure everything is perfect are the kinds of people that are worth having on your team.
No. I had to open the two images in separate tabs and rapidly toggle to even see the difference.
Not really. No.
I'm sorry, but as an average reader with decent visual tastes, I can safely say that those 3 pixels are not relevant to me.
... and well deserved at that.
I say good on you Gary, its people like you who push the world forward, continually looking for ways to improve things no matter how minor.
First: Where on Facebook is this style? In my current layout (which is the current "stable" layout - pre-graph-search), I don't see this anywhere. Not on my feed, not on my timeline. It looks like a timeline post (feed posts don't have a border around them like this does).
Second: What bugs me way more about the screenshots posted is that the left side of all the info doesn't line up. The large profile picture and the body text are (!) 3px more padded than the action bar, the "Like" list and the comment area. But! It should be noted that, again, I don't see this anywhere on FB, just the screens that Garry posted.
No way I would have seen that without it having been pointed out. I would have been looking at the actual content.
Seriously though, great blog post. He is exactly right about the need for more spacing. I feel like he buries the lead... the last change he makes to the bottom comment section is a night and day difference. Not only does the last change produce an more significant improvement, it appears to make up at least the number of pixels lost in the extra padding. That should take away any possible objection someone might raise concerning a reduction in amount of content that fits on the screen.
I don't think it makes a difference
