Revisiting "The Fold"

blog
61

Hi Jeff,

All good points and I’ll and one more into the mix (again):

Proportion (horizontal / vertical) - you mentioned from Google stats that about 25% of users had a fold at 700 / 800 pixels… (e.g. probably 1024x768 resolution)

If we take Stack Overflow as an example, it seems pretty clear that it is targeted at a minimum resolution of 1024x768, because shrinking any smaller brings up horizontal scroll bars.

I use the Developer Toolbar plugin for firefox (I’m sure you’re familiar with it. It has a nice lesser-used feature: In the “resize” button’s context menu, there’s an option for “Display Window Size In Title”. When I set the window size to 1024x768, my viewport size is actually 1008x571.

Why so small a vertical viewport? I’m a developer - so I have a little of the chrome that you mentioned: address bar, bookmarks toolbar and developer toolbar - 3 rows.

So the fold on my screen is actually 571!

So unless I’m prepared to scroll, we are squarel back into 800x600 territory… well under 1024x768 minimum size that was catered for.

62

What you should have started with is ‘My last post was rubbish’. Credibility slides away, post by post.

63

I belive that if a user comes to your website from a search engine he will not scroll down before giving up and trying another website. It’s about time, not about the ability to scroll down. If you don’t get to see if the website matters to you in a short time you will close it (and nobody wants that).

64

Sorry Jeff,

You really need to listen to the advice you got from the majority in the last topic (i.e., that it is your assumptions about users and markdown that is the problem, and not the users themselves).

Just to use SU as an example, even when the preview box is above the ‘fold’, it starts out as nothing more than a dotted rectangle that is one character high. It isn’t labelled ‘preview’ or any similar indication it just sits there by itself. Even when I, who do know about markdown, and the features of the formatting icons above the text box, am typing a message, I’m not paying attention to anything but what I’m typing. Even if I were to notice the results in the unlablelled ‘preview’ box, there is nothing to indicate that what is shown is what will be posted, until after the post is submitted. For all the average user might know, assuming they pay any attention to it at all, it’s just a box of crap.

Also, the formatting instructions in the right pane of the page are terse and abbreviated to the point of uselessness.

Even if a user were to read it and try it out (for example, the first one, ‘put returns between paragraphs’), they may very well (legitimately) believe that a single return will have a visible result on the posting (the instructions don’t say anything about how many returns to use, and in this context, the term being plural doesn’t convey any useful information). Even though you have a link to something identified as a ‘Full Reference’, you haven’t given the user any real reason to go there. The instructions that are shown might as well be written in cuneiform, as far as most users are concerned, so why would they feel the need to go to the full reference?

You can latch onto the idea of ‘user myopia’ and ‘the fold’ all you want, since it apparently makes you feel better about your design decisions, but the clear and unalterable fact is that YOU DID IT WRONG!

Yes, user myopia exists. An intelligent designer will compensate for that myopia in the design of the system, rather than trying to force the user to not be myopic.

The default behavior should be to display exactly what is entered in the text box. Add explicit formatting as applied.

From a programming perspective, doing that is much simpler than trying to convince every user to do it your way. Simply put, you’ll get much better, and more consistent results from accepting and working with ‘user myopia’ than you ever will from trying to fight it.

65

originally your complain was that people don’t format their posts properly, seems only logical that if the preview is above what the user is typing in, it would be more visible. There is no need to make it into a big deal.

66

Scrollogy?

67

Irony: On this page, the huge dotted red line in the figure was exactly aligned with the bottom of my browser window.

Yes, users know how to scroll, but they need a reason to. On Stackoverflow, it’s very easy to not realize that there is a preview pane below the editing pane when entering a question or offering an answer.

68

Arguably, the main problem with the “fold” is that scrolling down for EVERY PAGE just to find any content is annoying. In other words, screw “above the fold” and make that header shorter than you thought you could get away with.

Also, sites that split an article into multiple pages are if anything more annoying than scrolling. Mostly because they split it into too many pages, and scrolling is always faster than waiting for the next page (the kind of sites which do that tend to have a lot of boilerplate around the content). I’ve seen ONE case where this isn’t annoying: Fanfiction.net, which gets away with it because the alternative would be single novel-length pages.

As for sections of a page scrolling, that functionality has it’s place, but is mostly abused. Indeed, I’ve seen one case where for some stupid reason boilerplate text (think descriptions of inherited class members) was included in a section with it’s own scrollbar. Unfortunately, said boilerplate was partly boilerplate. Multiple levels of nested scrolling sections.

Oh, and browser designers desperately need to fix the idiotic bugs whereby the scroll wheel may or may not work depending on the position of the mouse cursor. Flash, I can understand (separate window), but overflow:scroll boxes? Which have already been scrolled as far as possible in the direction of scrolling? (Firefox can handle it for textareas so why not for anything else?)

69

I’m not really sure about this - either people misinterpret users not scrolling, or I do something different than the people who don’t scroll.

When I don’t scroll on a site, it’s because I’ve looked around - at all that important stuff that’s placed above the fold - and decided I don’t care. If I do care, almost all the time I’ll scroll down to see if there’s any more of that important stuff before I click on any of it.

Similarly, if I’m looking at a newspaper vendor and can only see what’s above the fold, that’s going to decide if I buy it or not. But if I buy it, I’ll probably read it. The situation is different if I’m subscribed to that newspaper and get it every day - I know I’m not going to care about every single thing it reports on every single day, so what’s above the fold holds more importance. I don’t think this applies to the web, though, since if I subscribe to a site RSS or make it a point to visit it everyday, that’s because I’ve surveyed it for a while, or looked at its old content, and deemed it to be consistently relevant to my interests.

People need to stop assuming that newspapers apply to the Internet. In areas they do, of course, but with a newspaper, you operate in a limited area, fighting to get as much of a limited amount of people to read your paper as possible. With the Internet, your website is instantly available to anywhere in the world with Internet access (barring firewalls, different languages, blahblahblah). The only way a newspaper could relate would be if they were all parts of a news service, which was instantly available to anywhere with paper. Which isn’t true, if I remember correctly.

70

Even 10 years ago we were able to make a deal with our user base - you may have to scroll vertically if there is a lot of content (for example, many ‘rows’ being added to a database by the user) but we will never make you scroll horizontally. They seemed fine with this compromise, and we were reasonably free to make good web pages.

71

The fold concept assumes the browser window is maximised (and screen resolution, as reported by web analytics packages, is not browser width/height). It’s impossible to know whether your users are viewing your site in a maximised browser window, especially with large, widescreen monitors. Without that information the fold is a silly newspaper thing (broadsheets folded in half on newstands, perhaps?).

72

Jeff, I was one of the commenters on user myopia with a few critical notes on your conclusions. I hope you put the comments on this article and the other one in perspective.

I think SO is a very usable web site, I enjoy using it, it is intuitive, easy on the eyes and has great content. There is always room for usability improvement so I’m glad you’re opening up to it. Some other notes I would like to make:

  • For best usability improvements, do a usability lab test. It’s easy and cheap. With only a few volunteers of a spread demographic, you will catch 80-90% of your usability issues.

  • You are right in addressing the mythology of usability advise. Well, some or not mythical. The scrolling advise simply changed to reflect the new reality of more experienced web users. Some advise, however, was never true in the first place, for example the three-click rule. It still lives on today, despite being completely wrong.

  • Take the good advise from the commenters, many are well intended. But in the end, rely on science (usability data) and a real usability lab test to see what really works. Many of your commenters are wrong, some are right.

73

Jeff, one more thing to make my previous point even more clear. Here’s a question: based on what should you design your website:

a) what the user wants
b) what the designer thinks or wants (being you)
c) what the boss (funder) thinks or wants (in this case also you?)
d) what the developer thinks or wants (in this case also you?)

All are wrong. The answer is e: what the user DOES. There are only two ways to retrieve that information:

I) General, scientific usage data
II)Data from a usability test for your specific web site

There are no other correct answers. Do not push this thing into the opinion space, base your plan on facts. Also, commenters here are part of the 2% or so that are in the “contributor” persona, not really a representation of your real users. Put all the advise, including my own, in proper perspective and base it on facts.

74

There are a couple of issues here; target audience and design. Yes, if your target audience is a bunch of coding nerds, they’re much more likely to glance at the size of the scroll handle and thus scroll. If your design looks anything close to a complete, coherent visual image above the fold, the reverse is more likely regardless of your target audience.

But regardless of the target audience, the solution is to make it more obvious that the page extends beyond the fold. Ideally, if you can get an image of an attractive woman who appears to be naked from the shoulders up down near the fold you’ll never have to worry about someone missing content below the fold.

We all like wider visuals because they fill our field of vision better. But consider the design of The Wall Street Journal. Why do they put a bunch of stories in long, narrow columns instead of running them across the page, one below the next? Because it is much easier to read. It is much easier for you eye to go from the end of line one to the beginning of line two the narrower the column of text.

Although it seems counterintuitive, good design uses vertical elements in a wide, horizontal space to draw the user’s attention below the fold.

75

Kythyria:

The reason sites split articles into multiple pages is that making you click through to another page to continue the article allows them to display two, three, four etc. times more advertising.

doh!

76

Maybe this is why everyone is stuck selling widescreen displays?
they are hoping that content spreads out rather than push it below the fold?

(sorry, have to rant at every opportunity about dominance of evil widescreen computer displays)

77

I can’t believe in 2009 25% of his audience has a screen res of 800x600? And its a tech savvy audience. You’ve got to be kidding me. That doesn’t sound right. That res was the default for CRTs 5 years ago. And even then it was only a non technical user that didn’t know how to change the resolution and kept it as-is. Can 25% of his audience be 3rd world - India, China?? :slight_smile:

78

Jeff presists because he is a programmer and he feels what is right in his eyes should be accepted by all. Jeff design for the end user and not for yourself.

79

Stop trying to find stupid excuses. You designed a crappy input form, and blaming some phantomatic “fold” is not going to save you. Users shouldn’t need a preview screen at all: your user wrote correctly the bullet points, if you don’t display them as he typed them, it’s all your fault. Cry me a river! Stop complaining and go back fixing your code.

80

horizontal scrolling is a definite no-no

vertical scrolling is fine

i hate clicking and would rather have more results than less and have to page through

i don’t think i ever bother with anything but first page of answers on SO