16 ms·

3px of padding makes all the difference in the world

240 points by jjb123 13y ago

lukeholder 13y ago
Maybe the original design had the even padding but facebook A/B tested it and found that people are more likely to read the comments below if there is less padding on the bottom? While I agree that is visually looks more balanced, it takes more than my opinion to decide that facebook made a design mistake.
- scrapcode 13y ago
  This is a perfectly reasonable explanation that is often overlooked by designers. This also happens to be why I don't particularly love design anymore. What looks right and what converts the best are two different animals, and I don't like purposely creating ugly shit with my name on it.
  - eksith 13y ago
    This is often a result of designers failing to step outside their "designer window", if you will, and step into the users' shoes. It's possible to make something look right and translate that into conversions if you have enough of an outside perspective. 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.
    - nikatwork 13y ago
      When I was a/b testing UI designs for a stable of eCommerce sites, quite often the blatantly fugly design would convert much better. Especially for low-price-driven sites. My personal theory was that people figure the unpolished, crappy looking site is more bargain-driven (kinda like a dingy dollar store in real life). Sticking a giant firetruck-red "CONVERT" button surrounded by flames and rainbows really does sell better. But boy does it look awful.
      - jonknee 13y ago
        This is also evidenced by Amazon.com still looking really crowded and ugly. They test every last thing and if this is what they're using, it's because it works.
        scrapcode 13y ago
        This same concept goes for those horrendously ugly, cookie-cutter, inline sales pages plastered with maroon Comic Sans headlines that have highlighter-yellow backgrounds. I've been there and done that, and the facts prevail. As a good/(as in one that creates aesthetically pleasing things) designer, you actually suck conversion wise. I haven't done much research behind it, but I believe this has to do with why the flat UI is so pleasing. I can only imagine that it is easy for anyone to notice that it's beautiful regardless of technological/design experience/knowledge.
    - eflowers 13y ago
      I am glad you pointed this out, your premise is a quintessential example of "UX is not UI." 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).
  - j_s 13y ago
    The classic blog post on this: http://stopdesign.com/archive/2009/03/20/goodbye-google.html http://stopdesign.com/archive/2009/03/20/goodbye-google.html (aka "41 shades of blue").
- minimaxir 13y ago
  Per the CSS, the margin of the status text element is 5px on the top and bottom. 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?
- joshuaxls 13y ago
  Great comment. We have found this to be true in our own A/B testing. It sometimes makes me cringe, but you can't argue with data.
- pbz 13y ago
  Sometimes when things are too much in proportion we're left admiring the structure and not bother with the content. If something triggers our OCD, the padding in this case, it forces our attention to that spot. It's similar to how we're drawn to faces on a page.
- mikedwebdev 13y ago
  Was thinking the same thing but not for the comments but for the 'liking', 'sharing' and their money making 'promote'.
- spyder 13y ago
  Then they should also A/B test the comments with big red fonts, because it's possible users will read it more.
hnriot 13y ago
It must be a really quiet day for this to make the front page! I can't believe I just wasted time reading that.
- eksith 13y ago
  One single timesuck in a reservoir of timesucks? HN is hardly the place to spend time if you actually have things to do.
  - bastag3 13y ago
    Well, that makes the article better, eh ..?
- jamesaguilar 13y ago
  And to think you wasted even that much more time making this comment! Your time is leaking everywhere!
- deleted 13y ago
  [deleted]
- alanh 13y ago
  The author is a YC partner, so it almost automatically gets up-votes for that. (He’s right, but so are you — it’s hardly newsworthy.)
calebio 13y ago
I'm interested to see if this gets changed or if it becomes an inside joke at Facebook.
- garry 13y ago
  That would be awesome if it became an inside joke!
minimaxir 13y ago
I've noticed Facebook has been doing a lot of AB testing on me lately. [Example: My Graph Search bar is now White-on-Blue instead of Blue-on-Blue. Also, the sidebar with birthday notifications used to display Friend Requests that told you who Friend Requested you; now it's gone.] 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.
- shritesh 13y ago
  It's happening to me too. Every day something looks broken (read different). The Facebook logo was not centered before the graph search for a couple of days, the height of the chat box was changed and same goes for the padding. All I hope for them is to remove (or shift) the video chat button. I've had lots of accidental clicks on it.
  - toong 13y ago
    If enough users have those accidental clicks, it might skew the a/b testing results :-)
fuddle 13y ago
I don't think it makes any difference.
- _a2_ 13y ago
  I've spent about a minute on comparing both pictures to see "how much more crowded the text is in the unfixed version"©
aasarava 13y ago
Facebook has since updated its design, and the padding is better balanced. My account got upgraded to the new design a month or so back. I assume they are rolling it out slowly.
joshmlewis 13y ago
A lot of people (have and will) scoff at the idea 3 whole pixels? And I agree it does seem trivial, and will those 3 pixels really change the way users interact and make users happier? Who knows. I know as a designer it does indeed look better when it's visually balanced, but all that aside, I am a huge fan of craftsmanship and attention to detail in ones craft. More so with crafts made by hand (wood, metal, glass) but also it translates over into design and programming. 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.
inopinatus 13y ago
He has a point that many interface designers will appreciate and others rankle at as nit-picking. 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.
- eridius 13y ago
  I noticed the exact same thing. It was rather annoying. For example, in the word "like" (as in "And here's what it would look like fixed") the "li" had joined into a single shape.
- austenallred 13y ago
  To be fair, the number of users that read his blog vs. the number of users that use Facebook is a little bit different, and the amount of attention that should be devoted to each should vary accordingly.
  - minimaxir 13y ago
    "His blog" is the template for the entire Posthaven network.
    - deleted 13y ago
      [deleted]
- garry 13y ago
  Thanks for the feedback! I'll look into this. I'd been wondering about that myself.
- alanh 13y ago
  Yes, and his blog’s title uses an ASCII straight quote in lieu of an actual apostrophe. 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.
bbx 13y ago
It's always tricky to adjust the padding/margin values because you need to take into account each case in which these 3 added pixels will have an impact. Maybe the style applied to this particular box is shared with other elements or maybe this box is used in other contexts where 3 pixels more will look odd. And I guess that for a website as dense as Facebook, it's easy to try to adjust something while breaking something else. 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.
- wellsjohnston 13y ago
  Facebook is probably built in a much mote modular way. I doubt fixing it would break anything else. Facebook engineers should be able to figure this out very quickly.
Sealy 13y ago
This is the same obsessive minor attention to detail that turned Apple into a multi BILLION dollar company. ... 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.
tealtan 13y ago
A reminder that the imbalance of 3px may be intentional: 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.
TheBiv 13y ago
I have noticed that most flame wars happen over small things; not simply bc they matter, but bc the opinions are so simple that everyone has one.
- davidw 13y ago
  This is called 'bikeshedding': http://bikeshed.com/ http://bikeshed.com/ . How do you all like that design?
- eru 13y ago
  See https://en.wikipedia.org/wiki/Parkinsons_Law_of_Triviality https://en.wikipedia.org/wiki/Parkinsons_Law_of_Triviality
kybernetyk 13y ago
I found this really annoying for some time now, too. I hope with someone like Garry being vocal about this issue Facebook will act and fix it.
jlward4th 13y ago
Love the irony in this sentence: A site that fixes these problems is a site is being taken care of with the loving attention to detail of someone who can see the difference.
randartie 13y ago
Isn't it possible that this is simply a bug? If you happen to have a location when you post a status, it goes under the comment with a padding of 8px above and below. If the location is missing then a default of 8px appear below the status text. I don't think it makes a difference
sytelus 13y ago
I actually like the one more densely packed version. One of the core difference in design of Hacker News and other sites is just density of information. I prefer Hacker News densly packed layout a lot more than other sparse. So I guess it's all matter of opinion rather than absolute truth or one right way.
skriticos2 13y ago
In a time of display resolution variances between 96 and 250+ ppi (slowly coming to big screen too), why are we still talking about fixed pixels instead of relative units?
- senorerik 13y ago
  The px unit in css is a bit misleading, the measurement doesn't always correspond to the size of the device pixels. From the spec[1]: "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." [1] http://www.w3.org/TR/css3-values/#absolute-lengths http://www.w3.org/TR/css3-values/#absolute-lengths
davidw 13y ago
> Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? No way I would have seen that without it having been pointed out. I would have been looking at the actual content.
Kiro 13y ago
How can you call something completely subjective a "bug"?
- gridmaths 13y ago
  if you believe beauty [ or even readability ] is a feature
  - gridmaths 13y ago
    why downvote ? I hilite a logical inference : 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 ]
    - Dylan16807 13y ago
      Readability is not subjective. You answered a question with a non sequitur.
      - gridmaths 13y ago
        Readability is not subjective ? So you have a mathematical formula for Readability, excellent. That would be simpler than adjusting things by 3px until they just look spectacular and zing off the page.
        Dylan16807 13y ago
        You can measure how fast people read. It varies per person but it's not an opinion. But this is not about readability. It's about what looks 'better', whether you prefer balance vs. having the comments closer. The real debate is about a subjective thing, and not about readability.
gridmaths 13y ago
<satire> 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>
- zimpenfish 13y ago
  Might I politely - as an Englishman - make the suggestion that if you feel the need to wrap it with "<satire>" tags, you're doing it wrong?
maximem 13y ago
Even 1px matter ! With trained eyes you can see all the defaults on every websites... Annoying!
therealunreal 13y ago
He's almost right. 8px is not enough but it should be at least 13px, not 11px.
tome 13y ago
I'm glad I cannot tell the difference otherwise my web browsing experience would be frustrating every day.
causeisunknown 13y ago
Pixel nazi
- deleted 13y ago
  [deleted]
- vtedesco 13y ago
  You said it before me !
stared 13y ago
For me, the current version is better. And in general, I don't get the obsession of designers to have text padded as much as possible. I like low padding and small fonts (unless it is put to extreme; but on good sites it never happens, whereas "overpadding" is more than common). 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.
- obstacle1 13y ago
  I think it's less about padding-for-padding's-sake and more about maintaining symmetry in design. Notice that both the author's changes were fundamentally just restoring symmetry to elements within a box layout.
  - stared 13y ago
    In this particular case the symmetry makes some sense. But I would rather cut the top (which is wasting a lot of space) than padded the bottom to match the top.
llort 13y ago
Garry is wrong. What looks visually pleasing is not necessarily the right layout. Historically, typesetters only had paragraphs to set in doing a book layout. Now in the age of post DTP, layout can be more expressive. That is exactly what the lesser margin of 8px does. In this case, it means that you are liking the status message only 8px away, and not liking the author.
ruchirablog 13y ago
I don't see how this is annoying and adding 3px is going to "make the difference in the world" Look at the authors blog. see how much space between the header and the "<Back to blog" and the content. Fix yours first. Its actually annoying than this
grrrando 13y ago
Two things - 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.
josteink 13y ago
Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? Not really. No.
miga 13y ago
If your really hate someone, teach them to recognize bad spacing and bad kerning: http://xkcd.com/1015/ http://xkcd.com/1015/
lnanek2 13y ago
Seems fine to me. The content is all closely spaced and the header is set off with a larger spacing. This helps keep the header separate from the content, which in turn helps people skim past content they don't like. If they did this change, next he'd be demanding each piece of content have the same large spacing between it, they end up having a lot more spacing, showing less content above the fold, and having reduced engagement metrics.
chaselectric 13y ago
This is my observation: http://imgur.com/zfxvWzV http://imgur.com/zfxvWzV
coldtea 13y ago
Somebody should fix his OCD. 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.
- Smudge 13y ago
  Good designers are often perfectionists. Calling them "compuslives" is dismissive, and is also insulting to people who actually suffer from OCD.
  - Dylan16807 13y ago
    Using the word 'perfectionist' is just as badly fitting for something as subjective as the decision about whether to center vertically or to have the padding on top twice as big as the padding on bottom.
  - coldtea 13y ago
    >Good designers are often perfectionists. 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").
    - Smudge 13y ago
      I guess you could call a YC partner "some annoyed blogger," since in this case he seems annoyed about a 3px difference. But, hey, guess what? His annoyance actually prompted an internal bug at Facebook. Somebody, at least, cared enough to consider the difference. > 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=nrRqb5cvM5E http://www.youtube.com/watch?v=x4sadYeLHKU http://www.youtube.com/watch?v=x4sadYeLHKU
recursive 13y ago
> Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? No. I had to open the two images in separate tabs and rapidly toggle to even see the difference.
pbreit 13y ago
Padding is not always supposed to be "balanced". It makes we we for some sections to be closer or further to other sections. In this case, he extra padding probably looks very slightly better. But I don't think it's the way it is from lack of love.
guard-of-terra 13y ago
vk.com seems to get both things right (judging paddings visually)
matt-attack 13y ago
This is beginning to remind me of the colorists in Hollywood who color-time feature film. They will obsess day in and day out about the subtleties of a particular hue of some background out-of-focus trinket. Complete and utter minutiae. 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.
skitch 13y ago
WTF is "rageskitching"? I Have searched google far and wide for both "Rageskitch" and "Skitch" and as far as I can tell, it is hanging on to the bumper of a car while skating.
examancer 13y ago
This guy is clearly a moron! That spacing needs 5 extra pixels, not 3! 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.

240 points by jjb123 13y ago

Maybe the original design had the even padding but facebook A/B tested it and found that people are more likely to read the comments below if there is less padding on the bottom? While I agree that is visually looks more balanced, it takes more than my opinion to decide that facebook made a design mistake.

scrapcode 13y ago
This is a perfectly reasonable explanation that is often overlooked by designers. This also happens to be why I don't particularly love design anymore. What looks right and what converts the best are two different animals, and I don't like purposely creating ugly shit with my name on it.
- eksith 13y ago
  This is often a result of designers failing to step outside their "designer window", if you will, and step into the users' shoes. It's possible to make something look right and translate that into conversions if you have enough of an outside perspective. 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.
  - nikatwork 13y ago
    When I was a/b testing UI designs for a stable of eCommerce sites, quite often the blatantly fugly design would convert much better. Especially for low-price-driven sites. My personal theory was that people figure the unpolished, crappy looking site is more bargain-driven (kinda like a dingy dollar store in real life). Sticking a giant firetruck-red "CONVERT" button surrounded by flames and rainbows really does sell better. But boy does it look awful.
    - jonknee 13y ago
      This is also evidenced by Amazon.com still looking really crowded and ugly. They test every last thing and if this is what they're using, it's because it works.
      - scrapcode 13y ago
        This same concept goes for those horrendously ugly, cookie-cutter, inline sales pages plastered with maroon Comic Sans headlines that have highlighter-yellow backgrounds. I've been there and done that, and the facts prevail. As a good/(as in one that creates aesthetically pleasing things) designer, you actually suck conversion wise. I haven't done much research behind it, but I believe this has to do with why the flat UI is so pleasing. I can only imagine that it is easy for anyone to notice that it's beautiful regardless of technological/design experience/knowledge.
  - eflowers 13y ago
    I am glad you pointed this out, your premise is a quintessential example of "UX is not UI." 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).
- j_s 13y ago
  The classic blog post on this: http://stopdesign.com/archive/2009/03/20/goodbye-google.html http://stopdesign.com/archive/2009/03/20/goodbye-google.html (aka "41 shades of blue").
minimaxir 13y ago
Per the CSS, the margin of the status text element is 5px on the top and bottom. 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?
joshuaxls 13y ago
Great comment. We have found this to be true in our own A/B testing. It sometimes makes me cringe, but you can't argue with data.
pbz 13y ago
Sometimes when things are too much in proportion we're left admiring the structure and not bother with the content. If something triggers our OCD, the padding in this case, it forces our attention to that spot. It's similar to how we're drawn to faces on a page.
mikedwebdev 13y ago
Was thinking the same thing but not for the comments but for the 'liking', 'sharing' and their money making 'promote'.
spyder 13y ago
Then they should also A/B test the comments with big red fonts, because it's possible users will read it more.

hnriot 13y ago

It must be a really quiet day for this to make the front page! I can't believe I just wasted time reading that.

eksith 13y ago
One single timesuck in a reservoir of timesucks? HN is hardly the place to spend time if you actually have things to do.
- bastag3 13y ago
  Well, that makes the article better, eh ..?
jamesaguilar 13y ago
And to think you wasted even that much more time making this comment! Your time is leaking everywhere!
deleted 13y ago
[deleted]
alanh 13y ago
The author is a YC partner, so it almost automatically gets up-votes for that. (He’s right, but so are you — it’s hardly newsworthy.)

calebio 13y ago

I'm interested to see if this gets changed or if it becomes an inside joke at Facebook.

garry 13y ago
That would be awesome if it became an inside joke!

minimaxir 13y ago

I've noticed Facebook has been doing a lot of AB testing on me lately. [Example: My Graph Search bar is now White-on-Blue instead of Blue-on-Blue. Also, the sidebar with birthday notifications used to display Friend Requests that told you who Friend Requested you; now it's gone.] 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.

shritesh 13y ago
It's happening to me too. Every day something looks broken (read different). The Facebook logo was not centered before the graph search for a couple of days, the height of the chat box was changed and same goes for the padding. All I hope for them is to remove (or shift) the video chat button. I've had lots of accidental clicks on it.
- toong 13y ago
  If enough users have those accidental clicks, it might skew the a/b testing results :-)

fuddle 13y ago

I don't think it makes any difference.

_a2_ 13y ago
I've spent about a minute on comparing both pictures to see "how much more crowded the text is in the unfixed version"©

aasarava 13y ago

Facebook has since updated its design, and the padding is better balanced. My account got upgraded to the new design a month or so back. I assume they are rolling it out slowly.

joshmlewis 13y ago

A lot of people (have and will) scoff at the idea 3 whole pixels? And I agree it does seem trivial, and will those 3 pixels really change the way users interact and make users happier? Who knows. I know as a designer it does indeed look better when it's visually balanced, but all that aside, I am a huge fan of craftsmanship and attention to detail in ones craft. More so with crafts made by hand (wood, metal, glass) but also it translates over into design and programming. 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.

inopinatus 13y ago

He has a point that many interface designers will appreciate and others rankle at as nit-picking. 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.

eridius 13y ago
I noticed the exact same thing. It was rather annoying. For example, in the word "like" (as in "And here's what it would look like fixed") the "li" had joined into a single shape.
austenallred 13y ago
To be fair, the number of users that read his blog vs. the number of users that use Facebook is a little bit different, and the amount of attention that should be devoted to each should vary accordingly.
- minimaxir 13y ago
  "His blog" is the template for the entire Posthaven network.
  - deleted 13y ago
    [deleted]
garry 13y ago
Thanks for the feedback! I'll look into this. I'd been wondering about that myself.
alanh 13y ago
Yes, and his blog’s title uses an ASCII straight quote in lieu of an actual apostrophe. 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.

bbx 13y ago

It's always tricky to adjust the padding/margin values because you need to take into account each case in which these 3 added pixels will have an impact. Maybe the style applied to this particular box is shared with other elements or maybe this box is used in other contexts where 3 pixels more will look odd. And I guess that for a website as dense as Facebook, it's easy to try to adjust something while breaking something else. 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.

wellsjohnston 13y ago
Facebook is probably built in a much mote modular way. I doubt fixing it would break anything else. Facebook engineers should be able to figure this out very quickly.

Sealy 13y ago

This is the same obsessive minor attention to detail that turned Apple into a multi BILLION dollar company. ... 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.

tealtan 13y ago

A reminder that the imbalance of 3px may be intentional: 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.

TheBiv 13y ago

I have noticed that most flame wars happen over small things; not simply bc they matter, but bc the opinions are so simple that everyone has one.

davidw 13y ago
This is called 'bikeshedding': http://bikeshed.com/ http://bikeshed.com/ . How do you all like that design?
eru 13y ago
See https://en.wikipedia.org/wiki/Parkinsons_Law_of_Triviality https://en.wikipedia.org/wiki/Parkinsons_Law_of_Triviality

kybernetyk 13y ago

I found this really annoying for some time now, too. I hope with someone like Garry being vocal about this issue Facebook will act and fix it.

jlward4th 13y ago

Love the irony in this sentence: A site that fixes these problems is a site is being taken care of with the loving attention to detail of someone who can see the difference.

randartie 13y ago

Isn't it possible that this is simply a bug? If you happen to have a location when you post a status, it goes under the comment with a padding of 8px above and below. If the location is missing then a default of 8px appear below the status text. I don't think it makes a difference

sytelus 13y ago

I actually like the one more densely packed version. One of the core difference in design of Hacker News and other sites is just density of information. I prefer Hacker News densly packed layout a lot more than other sparse. So I guess it's all matter of opinion rather than absolute truth or one right way.

skriticos2 13y ago

In a time of display resolution variances between 96 and 250+ ppi (slowly coming to big screen too), why are we still talking about fixed pixels instead of relative units?

senorerik 13y ago
The px unit in css is a bit misleading, the measurement doesn't always correspond to the size of the device pixels. From the spec[1]: "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." [1] http://www.w3.org/TR/css3-values/#absolute-lengths http://www.w3.org/TR/css3-values/#absolute-lengths

davidw 13y ago

> Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? No way I would have seen that without it having been pointed out. I would have been looking at the actual content.

Kiro 13y ago

How can you call something completely subjective a "bug"?

gridmaths 13y ago
if you believe beauty [ or even readability ] is a feature
- gridmaths 13y ago
  why downvote ? I hilite a logical inference : 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 ]
  - Dylan16807 13y ago
    Readability is not subjective. You answered a question with a non sequitur.
    - gridmaths 13y ago
      Readability is not subjective ? So you have a mathematical formula for Readability, excellent. That would be simpler than adjusting things by 3px until they just look spectacular and zing off the page.
      - Dylan16807 13y ago
        You can measure how fast people read. It varies per person but it's not an opinion. But this is not about readability. It's about what looks 'better', whether you prefer balance vs. having the comments closer. The real debate is about a subjective thing, and not about readability.

gridmaths 13y ago

<satire> 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>

zimpenfish 13y ago
Might I politely - as an Englishman - make the suggestion that if you feel the need to wrap it with "<satire>" tags, you're doing it wrong?

maximem 13y ago

Even 1px matter ! With trained eyes you can see all the defaults on every websites... Annoying!

therealunreal 13y ago

He's almost right. 8px is not enough but it should be at least 13px, not 11px.

tome 13y ago

I'm glad I cannot tell the difference otherwise my web browsing experience would be frustrating every day.

causeisunknown 13y ago

Pixel nazi

deleted 13y ago
[deleted]
vtedesco 13y ago
You said it before me !

stared 13y ago

For me, the current version is better. And in general, I don't get the obsession of designers to have text padded as much as possible. I like low padding and small fonts (unless it is put to extreme; but on good sites it never happens, whereas "overpadding" is more than common). 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.

obstacle1 13y ago
I think it's less about padding-for-padding's-sake and more about maintaining symmetry in design. Notice that both the author's changes were fundamentally just restoring symmetry to elements within a box layout.
- stared 13y ago
  In this particular case the symmetry makes some sense. But I would rather cut the top (which is wasting a lot of space) than padded the bottom to match the top.

llort 13y ago

Garry is wrong. What looks visually pleasing is not necessarily the right layout. Historically, typesetters only had paragraphs to set in doing a book layout. Now in the age of post DTP, layout can be more expressive. That is exactly what the lesser margin of 8px does. In this case, it means that you are liking the status message only 8px away, and not liking the author.

ruchirablog 13y ago

I don't see how this is annoying and adding 3px is going to "make the difference in the world" Look at the authors blog. see how much space between the header and the "<Back to blog" and the content. Fix yours first. Its actually annoying than this

grrrando 13y ago

Two things - 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.

josteink 13y ago

Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? Not really. No.

miga 13y ago

If your really hate someone, teach them to recognize bad spacing and bad kerning: http://xkcd.com/1015/ http://xkcd.com/1015/

lnanek2 13y ago

Seems fine to me. The content is all closely spaced and the header is set off with a larger spacing. This helps keep the header separate from the content, which in turn helps people skim past content they don't like. If they did this change, next he'd be demanding each piece of content have the same large spacing between it, they end up having a lot more spacing, showing less content above the fold, and having reduced engagement metrics.

chaselectric 13y ago

This is my observation: http://imgur.com/zfxvWzV http://imgur.com/zfxvWzV

coldtea 13y ago

Somebody should fix his OCD. 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.

Smudge 13y ago
Good designers are often perfectionists. Calling them "compuslives" is dismissive, and is also insulting to people who actually suffer from OCD.
- Dylan16807 13y ago
  Using the word 'perfectionist' is just as badly fitting for something as subjective as the decision about whether to center vertically or to have the padding on top twice as big as the padding on bottom.
- coldtea 13y ago
  >Good designers are often perfectionists. 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").
  - Smudge 13y ago
    I guess you could call a YC partner "some annoyed blogger," since in this case he seems annoyed about a 3px difference. But, hey, guess what? His annoyance actually prompted an internal bug at Facebook. Somebody, at least, cared enough to consider the difference. > 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=nrRqb5cvM5E http://www.youtube.com/watch?v=x4sadYeLHKU http://www.youtube.com/watch?v=x4sadYeLHKU

recursive 13y ago

> Can you see how much more crowded the text is in the unfixed version, and how much more balanced it could be? No. I had to open the two images in separate tabs and rapidly toggle to even see the difference.

pbreit 13y ago

Padding is not always supposed to be "balanced". It makes we we for some sections to be closer or further to other sections. In this case, he extra padding probably looks very slightly better. But I don't think it's the way it is from lack of love.

guard-of-terra 13y ago

vk.com seems to get both things right (judging paddings visually)

matt-attack 13y ago

This is beginning to remind me of the colorists in Hollywood who color-time feature film. They will obsess day in and day out about the subtleties of a particular hue of some background out-of-focus trinket. Complete and utter minutiae. 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.

skitch 13y ago

WTF is "rageskitching"? I Have searched google far and wide for both "Rageskitch" and "Skitch" and as far as I can tell, it is hanging on to the bumper of a car while skating.

examancer 13y ago

This guy is clearly a moron! That spacing needs 5 extra pixels, not 3! 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.