Life Below 600px

by chaostheory • 16 years ago

232 61 16 years ago

pmichaud• 16 years ago

Cute article.

One nitpick--newspapers did not put the interesting parts above the folder in order to entice people to read the rest. They put it there to entice impulse buys, and they couldn't care less if it gets read.

Websites are fundamentally different in that respect because even if the point is to sell ads, like with newspapers, we can actually track the ads on websites so we can't get away with just going by how many people bought the paper.

sammcd• 16 years ago

I see where he is going, but I think he used a terrible example of the 37 signals web page. He says they don't call you to action until the bottom of the page. But their four products are clearly displayed "above the fold".

I was buying what he had to say until he used this example that clearly didn't sell the point.

EDIT Also his design is amazing. Someone of less a caliber might not have gotten me to read the article. I'm still going to be putting my "buy" button "above the fold"

wizard_2• 16 years ago

It's not bad design but I have to point out that he's following in Dustin Curtis's footsteps quite closely. Each article is complete with its custom design and an obvious amount of effort goes into the look of each one.

http://dustincurtis.com/

He calls it a "blogazine" format. Dustin is the first person I've seen do it, but I'm happy to see it catch on.

mbrubeck2• 16 years ago

http://jasonsantamaria.com/ started using this format slightly before Dustin. I'm not saying anyone copied anyone else - just that it was probably invented multiple places.

And of course, before blogs took over the web, a separate design for every page was quite common. Look at JWZ's old "stories" pages for a particularly horrible example. :)

http://www.jwz.org/gruntle/toothbrush.html

http://www.jwz.org/gruntle/zombies.html

http://www.jwz.org/gruntle/license.html

jacobolus2• 16 years ago

His design works really well if you have an extremely wide browser window. Unfortunately, most sites don’t, and so the web is most browsable with a narrower window (say, 900 or 950 pixels), and that makes Paddy Donnelly’s site stop fitting.

adamhowell2• 16 years ago

I can't agree with the 37signals.com screenshot being described as "the user shouldn’t feel too overwhlemed. Everything has a bit of space and isn’t fighting for attention."

As I've been designing the marketing pages of my app I've drawn lots of inspiration from lots of different sites. And everytime I bring up one of theirs, I'm struck by how cramped and jam-packed full of extraneous information they are now.

If you compare http://basecamphq.com to something like, say, http://checkoutapp.com/ or http://sifterapp.com/ it just comes across as too much.

rodyancy• 16 years ago

I have a feeling that 37signals has tested that page extensively. It may be that they convert better when the page designed that way.

I personally like the sparseness of www.checkoutapp.com, but that doesn't mean that 37signals' page is "too cramped." The only way to know is to test.

Look at Amazon. They have been through so many iterations and have tested so much and their pages are still too cramped for my taste. It probably make good business sense for them to design them that way.

adamhowell2• 16 years ago

Yeah, I'm sure you're right, and that's a post of theirs I would really love to see. Screenshots of several different versions of their homepages, from cramped to sparse, and how they all converted.

koenbok• 16 years ago

(We make checkoutapp.com)

We test, but we always put emotional arguments ("it looks better") above scientific data when it comes down to design. It's impossible to prove what gives better results in the long-term, but we would hate putting something online that doesn't look good to us. One thing I can really notice is that customers always tell us that our website/style stood out while they were evaluating the product, so it seems to work well for us.

paraschopra2• 16 years ago

Either design can be aesthetically pleasing or it can serve the business goals, it rarely satisfies both.

Case in point - Basecamp bounce rate 25% http://www.alexa.com/siteinfo/basecamphq.com

Checkout app bounce rate 50% http://www.alexa.com/siteinfo/checkoutapp.com

(I admit Alexa isn't accurate but for comparing websites in relative terms, it is good enough)

djehuty• 16 years ago

Huh! 37Signals has all this other stuff that I never scrolled down to before. Interesting.

makmanalp2• 16 years ago

QED?

joebasirico• 16 years ago

Perhaps I'm missing the concept of "the fold" the author is trying to get across, but I think 37Signals is a really good example of putting things _above the fold. Looking at their site they even have a line at the fold separating the two sections. I think they've done used the concept of "the fold" really well, don't get me wrong, but it's absolutely there.

The black section at the bottom I always just assumed was a footer, not a call to action, and honestly never read that before.

Ironically it seems to me the news sites seem to have done away with the concept of the fold the best. http://www.bbc.co.uk/, http://www.nytimes.com/, http://seattletimes.com

pbhjpbhj2• 16 years ago

I don't quite get what you mean in your last sentence - the fold is a perception of the viewer not of the content creator. These 3 sites haven't done away with the concept they've simply extended their handling in the paper versions attacking the metaphor in the same way as the original problem. Just like they put tag lines, teasers, introductions all with page numbers on actual newspapers they put short snippets on their front pages on the web.

Care to elaborate?

jqueryin• 16 years ago

I had posted a comment on that there iceberrrrg site regarding how I believe his analysis and 37signal example was incorrect. Low and behold my comment did not get approved.

I'm still sticking to my guns that 37signals heavily implemented tactics for optimizing click-throughs and conversion ratios based on their bread and butter services being listed with bright and bold colors ABOVE THE FOLD.

On that note, it's slightly disheartening that this article is generating such attention on HN.

pbhjpbhj2• 16 years ago

Totally agree.

He uses a tactic of providing a teaser and little textual content above the fold in order to lead one to scroll down. The article author uses the fold in a comical sort of way with reference to the iceberg. Nice idea though.

duttonkj3• 16 years ago

Snooze. Paddy here has a good point, but his delivery is a cheap rip off of Dustin Curtis's "custom design every entry" blog. And his design skills are sub-par at best. Throwing paragraphs around with absolute positioning is in no way groundbreaking.

ryanwaggoner2• 16 years ago

You know, dcurtis didn't invent the idea of a unique design for each article. Unless I'm mistaken, he refers to his site as his "blogazine", which kind of implies that he took his inspiration from something else, doesn't it?

And for what it's worth, I thought the design was great. But even if it wasn't, at least the guy is creating stuff. What have you created?

duttonkj3• 16 years ago

I've seen live journal entries evolve into weblogs, wordpress templates, tumblers, and now apparently blogazines. One glance at iampaddy and i noticed enough characteristics that made me immediately think of dcurtis. Dcurtis probably took some inspiration from Jason Santa Maria (who started the current blogazine craze) but made it his own distinct design. iampaddy has some work to do before he can say that. Yes, the guy is creating stuff, but that doesn't give him a free pass on criticism. Without criticism how will he improve? He can go to his parents for blind encouragement.

rmorrison• 16 years ago

It's usually not appropriate to compare your site to 37signals.

I suspect that a lot of their visitors are already familiar with their products or have seen 37signals' name in several places. Therefore, these people are more inclined to read 37signals' long homepage prose, they've already been sold on the idea that it's worth reading and learning more about.

Your website/brand probably isn't as well known. So you have a shorter window to capture your user's attention. You need to control exactly what they read and what message they hear. It has to be short and sweet, preferably only a couple of sentences that hopefully new visitors will actually read. If they're interested, provide ways for them to learn more, but they're not going to take the time to parse and understand what you do if it takes more than 2 seconds. You need to make sure that the gist of your message is conveyed in these 2 seconds.

moconnor• 16 years ago

Why's a picture of the tip of an iceberg with some penguins on it at the top of HN today?

vaksel• 16 years ago

the whole point of being above the fold, is grab the user's attention in the first few seconds.

The stuff below the fold, only gets read if a person is convinced by the stuff above the fold to continue reading.

prawn• 16 years ago

Bingo. You need to cater to two audiences - those with a passing interest who'll gloss over big text and an image (often screenshots in the case of start-ups) but hopefully remember what they've seen, and the more dedicated who will get interested and read the long-format copy, researching before purchase.

Ogilvy forever pushed this style of selling - here's an example:

http://www.annoyingdesign.org/blog/2009/08/04/ux-print-ads/

gyardley• 16 years ago

There's a good reason why most affiliate marketing landing pages, especially for things like e-books, are eighteen bajillion pixels long. That's what's been tested and found to work for that particular audience.

makmanalp2• 16 years ago

I wonder if there are any other lessons to learn from those?

josefresco• 16 years ago

I'm glad somebody brought this up as it's a trend amongst CPC/affiliate folks that isn't going a way. I even tested the theory with one of my eccomerce clients by stripping away the site nav and constructing a page that was very long but told more of a 'story' with a call to action half-way down and in the footer. Results so far have been inconclusive but so far I've theorized that they are effective due to the audience, the product and the story.

I've also considered that what works for selling a $19.95 snake oil weightloss pill may not work for your $19.95 widget.

sh1mmer• 16 years ago

That this audience and 37Signal's audience scroll doesn't mean that Paddy's point is correct. The rule of thumb is really about making sure you look after "regular" users.

I'd love to see the "below the fold" rule disproved, however the fact that Google and Yahoo! search engines still deliver a default 10 results with pagination suggests to me that most people don't scroll, still. When it comes down to it Google and Yahoo! test more than anyone and there is real money on the line there. They would increase the default number of results if it made sense to do so now.

mbrubeck2• 16 years ago

In 1994, Jacob Nielsen did a study showing that 90% of users did not scroll to find more content on web pages. But just three years later in 1997 he wrote:

"In retrospect, I believe this was due to people treating a set of Web options like they would treat a dialog box... In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages." - http://www.useit.com/alertbox/9712a.html

"Most people don't scroll" was true 15 years ago. It's sad that it lives on as an urban myth despite being invalid for most web pages today. (I do agree that it helps to make key content visible without scrolling. I'm just pointing out evidence that most people do scroll these days, and that the evidence has changed since this was first studied.)

Google's pagination proves nothing. Even on a 1600x1200 display, you do have to scroll to see all the results on a typical Google search page. (Try out a Google SERP on http://browsersize.googlelabs.com/ and you'll find that over 90% of users need to scroll to read past the eighth result - and there's no way to get to the next page without scrolling.) Google has other reasons for pagination, like reducing bandwidth, latency, and server-side CPU time.

isleyaardvark• 16 years ago

Google has actually talked about testing results with more than 10 search results:

"So, Marissa (Myer, Google VP) ran an experiment where Google increased the number of search results to thirty. Traffic and revenue from Google searchers in the experimental group dropped by 20%.

Ouch. Why? Why, when users had asked for this, did they seem to hate it?

After a bit of looking, Marissa explained that they found an uncontrolled variable. The page with 10 results took .4 seconds to generate. The page with 30 results took .9 seconds."

http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20....

WalterGR• 16 years ago

Here are a couple pages I found in my bookmarks that contain some data.

"Blasting the Myth of the Fold (2007)" http://www.boxesandarrows.com/view/blasting-the-myth-of

"The myth of the page fold: evidence from user testing (2009)" http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fo...

blehn• 16 years ago

Note that even in the 37signals example, the main headline, introduction, and calls to action (links to products) are clearly designed to be "above the fold." The Basecamp page is the same way.

Where exactly the "fold" falls isn't very important, and readers will certainly read down the page, but only if you convince them with the content at the top. So the important lesson is, put your most important message at the top--and make it concise--don't muddle it up with lower priority content.

patio11• 16 years ago

http://images1.bingocardcreator.com/blog-images/hn/no-fold-h...

Caption for the PNG impaired: it is a heatmap pulled from my site, which shows interaction above the fold being absurdly more likely to happen than interaction below the fold, even for elements which are not actually clickable. (You can't tell but more folks click the "New Card" button on my screenshot, presumably expecting it to result in a "New Card", than click the below the fold calls to action.)

Strictly speaking it would be more impressive if I created two designs, one with an aesthetically pleasing design and the call to action below the fold and one with the same design but the call to action above the fold, then A/B tested them against each other. I'll do that when some talented designer pays me for the damage it would do to my business.

Sorry guys, art warms my heart but math pays the bills.

paraschopra2• 16 years ago

Yup, you have more links above the fold than below the fold. How does it prove below the fold links don't matter much?

pkaler• 16 years ago

But there is no call to action buttons or anything interesting to click below the fold.

jberryman• 16 years ago

> Strictly speaking it would be more impressive if I created two designs, one with an aesthetically pleasing design and the call to action below the fold and one with the same design but the call to action above the fold, then A/B tested them against each other.

Your graphic doesn't seem to show much of anything about the effect of the fold. What is obvious to me is that your users seemed to click on buttons that were big and relevant.

rgrieselhuber• 16 years ago

On a related note, have you considered turning the "create a new card" behavior into a clickable conversion?

dpcan• 16 years ago

Honest to God, this just happened:

I went to the site, tried clicking the penguin, then the iceberg, then the article squares at the top. Saw something about how I can't spell.

I then came back to HN.

I had second thoughts. I returned to the site and THEN noticed I could scroll down.

...

I get it, we're all so tech savvy, but I'm telling you, the pixels above the fold are extremely important. If they don't MAKE you want to scroll down, many people will not.

nudist• 16 years ago

Interesting, anecdote, but user tests show that you are in the minority. About 80% of people immediately scroll down when they reach a new page with sparse content at the top of the page.

idoh• 16 years ago

What happens to the other 20%?

aw3c2• 16 years ago

I do not believe that. Especially for the quick/stress/next-page/new-link people, what they first see must keep them around.

mhansen• 16 years ago

User tests for this page? Or basecamp's page? This page looks complete without having to scroll down.

Sukotto2• 16 years ago

[citation needed]

misterbwong• 16 years ago

If they don't MAKE you want to scroll down, many people will not.

This is a very real distinction that should be included in these fold discussions. Many of these pro/con arguments fail to take into account the content of the page that is above the fold. If the content above the fold does not visually lead you to the conclusion that there is content below the fold, users will not go there.

I'd bet that many people did not know to scroll down on the author's site because what's above the fold doesn't tell the user that there is content below it. Had the author, say, moved the text down so that it was bisected by the fold, more readers would scroll. Things like horizontal lines and paragraph endings just above the fold signal to the user that the page is "done." Other cues, such as bisected text or obviously bisected images, tell the user the opposite.

davidw2• 16 years ago

You didn't, you know... read any of the words?

dzohrob• 16 years ago

most people don't.

jrockway• 16 years ago

Everyone must have small monitors. On my average-sized LCD, I was able to see a lot more than just the tip of the iceberg.

pyre• 16 years ago

Also consider the possibility of Android-base phones, iPhones, (soon) iPads, netbooks and (in my case) small laptops (my Thinkpad X41 is not a netbook, but the screen resolution is 1024x768).

agbell• 16 years ago

We need to see eyetracking or scrolling heatmaps of this page and see how users interact with it. Clicktale has some cool tools for doing this.

Studies I believe show that if things are on the edge of the fold and flowing off the bottom, people will realize they can scroll.

d0m• 16 years ago

I did click on #1.. saw the 19 secs video, came back on HN. Read the first comments here.. than came back and scrolled.

philwelch• 16 years ago

You know what's hilarious? This page plays up the idea that the entire page should build up to some sort of awesome "prize" at the bottom, but if you go to the bottom of his page, you get a comments section. Some prize.

gnurant• 16 years ago

Some of us choose to see the web the way we like it. For me I mostly abandon all the author's style's and apply my own.

So the most important thing for me is a big fat h1 and ideally having the main content first. So his post was very readable for me.

Each to there own, content is king; who cares what it looks like! I learnt a precious lesson after my pc died and I replaced it for a few months with a 133mhz running lynx over dial up!

If you are a designer/author place a hidden 'jump to content' link if you have extraneous fluff on the page please.

Sukotto2• 16 years ago

  'jump to content' link

These are also really important for visually-impaired users. Every page should have one.

ArturSoler• 16 years ago

This is what I call "survivor bias"

Life Below 600px

Related Stories