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.
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.
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.
We are still working out the best patterns for web browsing. The web is still surprisingly young. That 20% will learn eventually. Make it easy on the eyes, space it out, consider your use of typography, and avoid TL;DR. These concepts seem like they will persist.
To use those design tenants we just need more space. If that means moving the meat of the page below the fold and keeping a nice hook up at the top then I believe that's the way future web design patterns will go.
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.
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.
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.
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.
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.
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.
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.
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.
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.
> 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.
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"
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://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. :)
And Khoi Vinh started doing it before JSM in Sept 2007 with a group blog called A Brief Message. It's been dead for about 2 years now but it was being regularly maintained for a while with weekly updates and had interesting guest authors that would also pair up with a different designer to craft the layout of each article.
It was not only an interesting experiment, it actually created some really cool thought-provoking writing, like these bits by Dan Saffer and Clay Shirky:
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.
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.
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.
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:
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.
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).
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.
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.
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.
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."
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.
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.
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.
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.
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?
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.
Criticism is not inherently valuable. You offered nothing of substance, only the opinion that his site was a "cheap rip-off" and that his design skills were "sub-par at best".
"It is not the critic who counts: not the man who points out how the strong man stumbles or where the doer of deeds could have done better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood, who strives valiantly, who errs and comes up short again and again, because there is no effort without error or shortcoming, but who knows the great enthusiasms, the great devotions, who spends himself for a worthy cause; who, at the best, knows, in the end, the triumph of high achievement, and who, at the worst, if he fails, at least he fails while daring greatly, so that his place shall never be with those cold and timid souls who knew neither victory nor defeat."
In retrospect, my choice of words was pretty harsh. A few people posted similar observations on the thread without attacking. Thanks for pointing that out and I will try to add some substance if/when I critique in the future.
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.