Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

3px of padding makes all the difference in the world

blog.garrytan.com

Post reply on HN
Print view View original

61–70 of 92 posts

Re: 3px of padding makes all the difference in the world

#61

Post by alptrv »

ollysb wrote: post #59
inopinatus wrote: post #14

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 appare…

I've never found a way to fine tune the letter-spacing using css, the smallest unit seems to be 0.07em which is usually too much. Would love to know how to do it if it's possible.

text-rendering: optimizeLegibility; may help in some cases

Re: 3px of padding makes all the difference in the world

#62

Post by anotherbadlogin »

inopinatus wrote: post #14

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 appare…

Not to mention that the selected font has no crossbars on the capital I. Such fonts should be avoided, always and everywhere. It's stupid not to distinguish between a capital I and lower-case L.

Re: 3px of padding makes all the difference in the world

#64

Post by grrrando »

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.

Re: 3px of padding makes all the difference in the world

#65

Post by stared »

obstacle1 wrote: post #58
stared wrote: post #57

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 paragra…

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.

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.

Re: 3px of padding makes all the difference in the world

#68

Post by pbz »

lukeholder wrote: post #2

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.

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.

Re: 3px of padding makes all the difference in the world

#69

Post by jonknee »

nikatwork wrote: post #26
eksith wrote: post #9

Earlier quoted context omitted.

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.

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…

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.

Re: 3px of padding makes all the difference in the world

#70

Post by lnanek2 »

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.
Post reply on HN