Revisiting "The Fold"

After I posted my blog entry on Treating User Myopia I got a lot of advice. Some useful, some not so useful. But the one bit of advice I hadn't anticipated was that we were not making good use of the area "above the fold". This surprised me. Does the fold still matter?


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2009/10/revisiting-the-fold.html

I don’t really think most of the advice was centered around the fold, but rather around the usability of the markdown language.

In fact, in my blog post I didn’t mention scrolling at all. I went so far as to say the “instructions” shouldn’t -have- to be read in the first place. Most of the issue was about the double spacing thing you yourself identified as a problem.

“But even so, I feel a vital point is lost in attempting to contrive new and annoying ways of forcing your user base to read something they shouldn’t have to.”

http://mutedvision.net/blog/?p=47

Hot damn–I need to update my resume and include “scrolling” in my list of considerable skills.

In other news, I hate the new captcha. “Orange” was much better and always made me chuckle.

  1. Frankly, your formatting reference is so poorly done that it hurts to read even the 1st sentence, which means that only masochists will read any of it, and only extreme masochists will actually try to make sense of it.

I’m pretty sure it could be the perfect anti-example for teaching the “Don’t make me think” approach to UI development. Even a hard core text-aholic teenage dropout fanboy would be stumbling over it.

As an example, here’s what anybody that has completed their 3rd grade punctuation and grammar course will see and understand as the 1st sentence:

[some missing word(s), perhaps a rendering issue in my browser, or an image not yet downloaded?] indent code by 4 spaces [more missing word(s) and/or image] don’t wan’t colorization?

Even if I could grok wtf this 1st, hence most important, formatting tip is purportedly trying to teach me, I will have an even harder time trying to implement it because the directions to do so are even less understandable!

You probably already made the leap and slapped your forehead, but here’s what most people will see as the beginning of the 2nd sentence, which is as far as they will get before running away mumbling incoherent inanities about goggles and eyes:

Use “pre” tag to linebreak use 2 spaces at end [missing words or image] > blockquote [more missing words/image or punctuation marks]…

At this point they have to be wondering what kind of grammar/rendering mistake this is. Hmmm… I’m trying to get my code indented by 4 spaces, and maybe toggle colorization on/off, so I use the “pre” tag and and a line break and 2 spaces? Or do I get double line spacing with the “pre” tag, or is it automatic 4 spaces indent with “pre” tag and if I want a line break I use 2 spaces? And if this is true, do I put the 2 spaces at the end of the pre tag or at end of “right angle bracket” or the word “blockquote”, or GAAAAAAAAAAAA.

And there is no way I’m going to click on your “full reference” button, because given the example(s?) I have seen so far, I fear it will be even more painful than reading the early versions of the W3C HTML reference.

Solution: Clearly separate each topic. Clearly separate and indicate rules and suggestions from how to’s. Clearly separate the “what” and the “how” of each how to. Use standard grammar and punctuation, like capital letters and periods and question marks appropriately.

  1. Do you actually think that people who don’t recongnize the formatting toolbar icons on the left of the screen are actually going to recognize what a neon pink question mark does? Especially when it is so obviously NOT CONNECTED to the group of functionality performed by the cute pictures on the left.

If they do recognize it as a help link, how do you expect them to know that it leads to your formatting rules and reference, and not just a popup with minimal text under a picture of each toolbar icon?

Additionally, most people will recognize some of the toolbar buttons, and won’t be bothered enough about not knowing what any of the others do that they’ll actually spend time to go find out. You don’t need me to tell you why this is.

Solution: Exchange the icon for a “Formatting Rules and Help Reference” hyperlink, and stick it just above or below your toolbar, on the left, where everybody is actually looking.

Grammar nitpick, he didn’t “recant his position”, he reported that user behaviour has changed in the intervening years. He was correct in reporting user behaviour 1996 and still correct in what he reported in 2003.

Dave, if you read the linked article of mine, you’ll find other published studies of the same era which disagree with Nielsen. Users knew how to scroll, even back then.

Search for:

I don’t know what user studies Mr. Neilsen is referring to; even the ancient 1998 reference Web Site Usability: A Designer’s Guide found no evidence to support this claim:

Um, that’s nothing to do with grammar.

I’ve been chatting to a few people about the fold recently. One interesting point that was raise is that for the first time in a while the fold for some people has moved up.

For years, with the increase in screen resolutions the fold has been moving down the page, but with the current trend in netbook ownership it has begun to creep up for some users.

Just something to think about.

I still the “fold” patterns still applies strongly, but not the way people think about it usually. What really matters is the “information scent” http://www.useit.com/alertbox/20040802.html

The top of the page (above the fold) must be an information scent for what lies below. And the same remain true as you start scrolling down! You need to keep your visitors interested - or rather keep following their interest, i.e. the reason they are scrolling down in the first place.

Scrolling got easier when the scroll wheel got popular.

I don’t mind scrolling, but that’s not an excuse for wasting real estate…

Perhaps you should move the preview of the answer NEXT to the edit pane and move all the hints and tips down.

That way only people who need the tips have to scroll

Isn’t it just a matter of measuring for yourself and just avoiding the speculation regarding which measure might be effective? Experimenting and measuring might actually lead to some surprising and unforeseen results.

Of course the fold matters, even today

Ever talk with someone in the newspaper industry? You wnat something to be read, you put it above the fold, want to kill it, put it below the fold (well, this applies to broadsheet papers, not tabloids)

People will NOT scroll to see something - if you manage to “hook” them with something above the fold, you MAY, repeat MAY get them to scroll to read more

Believe it or not, you know the commercial sites that break articles into 2 or more pages? There actually IS a reason (besides ad revenue) to do so - people are more likely to click to a next page (follow the jump in newspaper speak) than they are to scroll!

Newspapers didn’t get EVERYTHING wrong, and they spent a LONG time learning how to get readers to follow stories - Most importants stuff on top, to the left, put the lead paragraph in, put a jump - this way folks get to see your site (which makes me realize how I should re-design MY site - thanks for making me think - I didn’t follow this)

As someone who recently started using Stack Overflow, and totally missed seeing the format controls, I read your posts with interest. I have been a full-time web developer since 1995.

In reflecting on my own experience in joining SO, I believe that your “problem” with can be ascribed to the (familiar) principle that your visitors spend 99.9% of their time on other websites.

Your users’ notion of how a website works is defined by other websites, not yours. To maximize usability, your website should work like most others; if you step out of your users’ paradigm you do so at your peril.

How does this apply to SO? Simple: in most other websites, the main article is in a single column, usually on the left side, that is wider than any other column on the page.

What’s in the other columns? Advertising, whether it be for more content on the same site or for other sites. A classic example is ArsTechnica.com.

The result is that serious users learned a long time ago not to let themselves be distracted by the other columns, and they don’t even really see them any more – their brain filters out the junk content before they get a chance to see it.

On SO, you put important information off to the right, and nothing in the left column indicates that it’s over there. Naturally a good percentage of new users are not going to see it, especially because they are focused on a specific task in a new environment.

To remedy the problem, you’d have to either put some of the formatting information in the main column or change the page layout so that it doesn’t fit into the ubiquitous content/advertising column paradigm (so that people are driven to look around from the moment they arrive).

I think you could save yourself some height at the top of every page. By adjusting how your menu bars and logo are laid out. See this:

http://tinypic.com/view.php?pic=jj01he&s=4

Saves about 30 ish pixels, not much but every bit counts.

The fold still matters, but not in the crude “nobody looks under it” sense.

Vertical space is often very tight. People running Netbooks often have 600 or less pixels of it, minus the taskbar, title bar, and browser UI bars. I’ve seen many users that can’t (or don’t bother to) turn off extra browser toolbars, making this worse.

Large fixed top-of-page headers make some pages virtually unusable on netbooks (e.g. MSDN Classic, Google Reader). It’s good that StackOverflow avoided this pitfall.

I’ve been listening to people harp on about “the fold” for years now. Having never bought it, it’s great to hear sense start to prevail.

To my mind, the fundamental problem is keeping a handle on who your user is. Keep the key information at the top of the page- sure; but what that information should be will vary from one user demographic to the next.

If we accept that most marketing is based on the idea of bringing as many eyes to a page as possible, then it’s easy to see why it’s tempting for a business to see bounce as ineffective page design, rather than inefficient marketing.

So the landing page gets stuffed with content to appeal to everyone. “Of course it has to be above the fold- analytics show that they bounce in under a second. You can’t scroll in that time.”

The real thinking seems be: “Idiots get blown across the web like tumble weed; and when they roll up here, we want them to feel welcome.”

Oh yes! All the advertisers demanding their ads to be visible without scrolling are dumb and archaic.

Where I work the fold definitely still plays a role in content that gets viewed versus content that’s simply ignored. I work in the education industry, and students as well as faculty are notoriously single minded in their objectives. If what they’re searching for is not immediately visible on the screen then they will never find it. They will instead contact customer support and demand that the functionality they want be present. When it’s explained that they simply did not scroll, and need only scroll down the page to find a link, they will remark that the content should be clearly visible immediately upon page load.