Life Below 600px
iampaddy.com
iampaddy.com
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.
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.
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.
http://www.barney.com/usa/index.asp
It is entirely above the fold.
I can't believe that even semi-literate adults do not usually at least glance at large, simple text on a page like that.
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.
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.
Bottom line: 37 Signals didn't do any testing. I know they've reported headline testing results, so maybe they've changed their practices.
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.
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)
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
Care to elaborate?
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.
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 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"
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.
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
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:
"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...
I've also considered that what works for selling a $19.95 snake oil weightloss pill may not work for your $19.95 widget.
The stuff below the fold, only gets read if a person is convinced by the stuff above the fold to continue reading.
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.
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.
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 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.
"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....
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.
'jump to content' link
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.
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.
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?
"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."
~Teddy Roosevelt