*
programming and human factors
by Jeff Atwood
*
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?
The fold refers to the border at the bottom of the browser window at the user's default screen resolution. Like so:
Way back in the dark ages of 1996, it was commonly thought that users didn't know how to scroll a web page.
On the Web, the inverted pyramid becomes even more important since we know from several user studies that users don't scroll, so they will very frequently be left to read only the top part of an article.
Thus, it was critically important to cram in as much content in as possible above that fold, as anything below it was invisible to a huge number of users. They didn't know how to scroll, so they would never find it. Jacob Neilsen, renowned usability expert, is the author of the above quote. But he recanted his position in 2003:
In 1996, I said that "users don't scroll." This was true at the time: many, if not most, users only looked at the visible part of the page and rarely scrolled below the fold. The evolution of the Web has changed this conclusion. As users got more experience with scrolling pages, many of them started scrolling.
Scrolling is an example usability versus learnability. It was always my belief that users quickly learned to scroll, otherwise they were permanently crippled as web citizens. If you can't learn to scroll within an hour or so of using the web, you're going to have an awfully stunted experience -- so much so that you're probably better off not using it at all. In short, if you use the web, you know how to scroll, almost by definition. It is a fundamental skill.
Even today, people will cite the ancient, irrelevant rule of The Fold as if it's still law. In fact, I was just talking to a friend of mine who expressed his frustration at dealing with a middle manager who was using the "content must be above the fold" rule as a weapon, and demanding that all page content appear above the fold. It's terribly misguided.
Although thoroughly debunked, there are still some hidden dangers from the fold, and subtlety to how users react to it. As documented by a recent usability study on the fold, there are three specific pitfalls to watch out for:
These are excellent guidelines, backed by actual eye tracking and experimental results. You know, science! But how do they apply to me? First, I established where the fold actually was. Per Google Analytics, about 25% of our users are using screen resolutions where the page fold is at about 700 or 800 pixels of height. And remember, browsers have a lot of horizontal chrome that tends to squander that height -- toolbars, status bars, tabs, etcetera. The fold is probably much closer than you think it is.
Next, I looked at the advice I had been given regarding the top of the page. Sure enough, we had a bunch of irrelevant UI at the top that didn't really matter: things like redundant page titles, and two line title entry. We were wasting critical real estate at the top of the page! For the 25% of users who have a 700 or 800 pixel fold, items were pushed down far enough that they might not actually be visible. Worse still, the strong bottom border of the text entry area with the drag slider could possibly align with the page fold itself -- leading the user to believe that nothing is below there and failing to scroll.
It's not only a basic rule of writing, it's also a basic rule of the web: put the most important content at as close to the top of the page as you can. This isn't new advice, but it's so important that it never hurts to revisit it periodically in your own designs.
In treating user myopia, it's not enough to place important stuff directly in the user's eyepoint. You also need to ensure that you've placed the absolute most important stuff at the top of the page -- and haven't created any accidental barriers to scrolling, so they can find the rest of it. The fold is far less important than it used to be, but it isn't quite as mythical as Bigfoot and the Loch Ness Monster quite yet.
I don't really think most of the advice was centered around the fold, but rather around the usability of the markdown language.
Michael Hamilton on October 30, 2009 2:32 AMIn 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
Michael Hamilton on October 30, 2009 2:36 AMHot 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.
Professor Tom on October 30, 2009 2:37 AM1. 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.
2. 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 on October 30, 2009 3:39 AMDave, 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:
Jeff Atwood on October 30, 2009 3:44 AMUm, that's nothing to do with grammar.
Phil on October 30, 2009 4:00 AMI'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.
Matt Large on October 30, 2009 4:16 AMI 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.
Joannes Vermorel on October 30, 2009 4:29 AMScrolling got easier when the scroll wheel got popular.
Sjoerd on October 30, 2009 4:33 AMI 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
Ivo on October 30, 2009 5:16 AMIsn'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.
Morten Christiansen on October 30, 2009 5:48 AMOf 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)
kg2v on October 30, 2009 5:48 AMAs 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).
Andrew Swift on October 30, 2009 5:50 AMI 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.
pete on October 30, 2009 5:52 AMThe 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.
dbkk101 on October 30, 2009 5:59 AMI'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."
Charlie on October 30, 2009 6:00 AMOh yes! All the advertisers demanding their ads to be visible without scrolling are dumb and archaic.
Maximus on October 30, 2009 6:01 AMWhere 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.
Enrique on October 30, 2009 6:02 AMAnother comment the end of your pages have have exactly what you mention, it looks like the page ends due to a large white-space before your footer content.
see:
http://tinypic.com/view.php?pic=33258k8&s=4
I only realised there was even a footer section recently as my scroll wheel happens to stop in the perfect position for it to look like the content has finished. Bear in mind most people use scroll wheel now and don't look at the scroll bar anymore.
pete on October 30, 2009 6:08 AMVery patronizing attitude to users; It wasn't that they didn't know how to scroll, it's that users couldn't be bothered to scroll, unless the article had grabbed their attention above the fold.
Phenwoods on October 30, 2009 6:10 AMI'm sorry, Jeff, but your argument against Neilsen is a straw-man.
He very clearly said that "users don't scroll", and that with time they "started to scroll". His point was about their observed behavior, not their skill, knowledge, or motivation.
You attempt to debunk his point by arguing that web users "know how to scroll" and "knew how to scroll, even back then."
Both positions can and do coexist. I don't always do everything I know how to do.
rajiv on October 30, 2009 6:33 AMI also think you're misunderstanding Jacob Neilsen point. You seem to be interpreting the idea of an inverted pyramid as "cram in as much content in as possible above that fold". What it should mean is to put the most important points at the start.
Which, strangely enough is exactly the point you make (at the bottom of the article). "It's not only a basic rule of writing, it's also a basic rule of the web: put the most important content at as close to the top of the page as you can."
I wonder how many readers will get that far.
Phenwoods on October 30, 2009 6:55 AMFriday at Jeff Parlor. Pointless article after a long pointless article. Then strawman right smack in the middle.
Dude, are you trying to waste user's time? I have to scroll to read something decent on this blog.
securityhorror on October 30, 2009 6:56 AMThe web browser is used to deliver more than just content, and the application you are developing matters when trying to decide how much your users should scroll.
I still believe that placing page content above the fold is essential in some applications. As an author of custom business web software, I am constantly developing applications where users navigate to many different areas of a familiar site, edit items, etc. If each of my pages required users to scroll vertically through many pages to find the info they want, or to enter text, and scroll before clicking "save," it would affect the usability and efficiency of an application that they will use on a daily basis.
Jonathan Cortis on October 30, 2009 7:13 AMThe users ignoring the scrollable part of a webpage is not always due to them not knowing that they actually can scroll, or even don't know how to scroll. You're right, anybody knows how to scroll nowadays, if not a decade ago at least.
I think the problem is even when the users knows they can scroll, they still can forget or ignore there is more webpage. The crollbar is not something every user watches in every page they visit, they can give a quick look at the page, don't find what they're looking for, ang go away without scrolling.
As you said, the webpage should give a hint that there's more interesting content below the fold.
Part of the issue with the fold is how people get to the page. If you land on the page from Google looking for toasted bagel recipes the first thing you should seen, front and centre, is the toasted bagel article.
All too often the actual content of the page is pushed down by half a screens worth of banner, links and ads and squeezed in on either side by column of menus to other writers, sections, articles.
I have seen sites where the article itself was a single newspaper style column (an inch and a half wide), pressed to the left that was incapable of presenting more than two paragraphs from the article. This is a direct consequence of stuffing everything above the fold to the detriment of why the users have come to the page in the first place.
I think the important thing here is the psychological element. It's not the users don't know how to scroll or will stop because of something like a horizontal break in the wrong place or in-page scroll bar. The big thing is that you need content at the top the makes the user want to scroll. If your 'above the fold' area consists almost entirely of a large banner (a la Mr Spolsky's recent fogcreek.com redesign) with no discernable real content to pull the user's interest, they'll just move along and never bother. You need to use featured area above the fold to give user a reason to stay interested.
Joel Coehoorn on October 30, 2009 7:20 AMI agree with the comment that the fold issue matters more when we're on laptops where we often don't have a scroll wheel mouse. Further, displays are moving to wide-screen where there's less vertical space seen initially. And the scroll bars are further off to the side where they are less visible and can be more painful to use on a laptop/netbook.
What's up with the date on this article? It certainly wasn't posted before DevDays London!
bloop on October 30, 2009 7:34 AMYes, the fold still matters. Just the other day, I surfed a web page. Read the content, then left. A friend asks me, did you see the "bla bla" on that page? I didn't know what he was talking about. I went back to the page and then I realised what happened. I didn't read the whole page, just what was above the fold.
Now, I do know how to scroll, but I just didn't realise it was possible. The page just look like it fit nicely in the window. I didn't look at the scrollbar, the content was all I was interested in.
So, basically what you say in the second part is very valid, especially the 3 guidlines.
Andrei Vajna II on October 30, 2009 7:34 AMSort of like how I normally surf with NoScript on - I can turn Javascript on whenever I like, but I need a reason. If you provide me with a reason I can immediately see, I can turn on scripts, or scroll, or click on promising links, or whatever. If not, I'm off, and will never see what fancy thing you had using Javascript, or below the fold, or whatever.
David on October 30, 2009 7:37 AMGreat comments Jeff. I was just discussing a webpage with someone a few days ago and 30% of the viewable page was taken up by header 'fluff' and the actual content was barely visible.
Perhaps a few practical suggestions for increasing the above-the-fold space on stackoverflow:
-for 'Ask Question' -> make the question "What's your programming question? Be descriptive." a watermark right in the 'Title' box?
-reduce the white space between the 'search' box and the 'logo with buttons' box? Maybe merge both into a bigger box that is smaller than the combination of them separate?
-for 'Ask Question' -> make the 'How to Ask' and 'How to Format' collapsable panels - once collapsed the other screen contents could expand horizontally and shrink vertically thus pulling more info onto the page.
-
John Mocambique on October 30, 2009 7:38 AMThe "scroll wheel" argument is fine for desktops, but not on on-the-go laptops (or worse, hand-helds). I find scrolling using the ubiquitous touch pad to be annoying and inconsistent, to the point where I'll often end up reaching for the "PgDn" key -- which has its own inconsistent behavior depending on focus, etc.!
If I'm going to a site to "sit down a read a while" I kind of expect to scroll. But if I'm chasing down a list of Google search hits looking to answer some specific question, scrolling is not likely.
meh on October 30, 2009 7:50 AM"It's not only a basic rule of writing, it's also a basic rule of the web: put the most important content at as close to the top of the page as you can."
But you also said not to cram the space above the fold.
So what happens if the amount of important content is requires it to be squeezed in before the fold ?
I don't really see how the arguments against being aware of the fold are applicable in this case. Sure, if you're designing a page that has content that people go there specifically to read, then if you have stuff below the fold they'll probably be able to scroll down and read it.
However, if you're talking about a form their filling out, or something similar, then they aren't interested in what's on the page beyond doing what they need to and submitting it. That drastically decreases the chances of them looking beyond the fold if it appears that everything they need is above it, so if you want something to be seen, put it above the fold.
Sean on October 30, 2009 8:03 AMThere are two aspects to this issue: 1. is there such thing as 'a fold'? 2. is that fold relevant?
Studies have shown that browser canvas heights (far more relevant than screen resolution) vary hugely. Chances are, if you have a popular site, almost every value between 0 and at least 1,000 will be represented. I've recorded such details for an internal page that's only ever seen by about 5 people, and a single person 95% of the time. The smallest height recorded is 129 pixels, the largest 918. There are a total of 190 unique heights in between those values. Explanations for this have already been given in the article (chrome, etc.) but we also need to take into account CSS differences between browsers, whether javascript/css/images are enabled, what font-size the user is viewing the page at, etc. Multiply these factors by the varying canvas heights, and it should be pretty obvious that your estimate of where a user will see a given element is almost entirely inaccurate.
As to whether the fold is relevant (even if it did exist), consider the newspaper where the concept originated. Many newspapers are displayed such that you can only see what's below the fold when you've purchased the paper; not so for a website. Even when you can bend down, pick up the paper, and flip it over, that's a lot more effort than scrolling. As has been pointed out already, the scroll wheel increase ease of scrolling enormously.
Of course, the general advice is still valid that content should follow the inverse pyramid guideline, but any discussion about absolute vertical positions within the page is essentially meaningless.
More here:
http://www.fiveminuteargument.com/fallacy-of-the-fold
Five Minute Argument on October 30, 2009 8:04 AMI get so annoyed when people look at screen resolution when discussing web site design. Less than a third of my screen real-estate gets devoted to a single browser window. I’d like it to be a fourth. That’s more than enough space. Yet, so many websites design for bigger than what they need. I didn’t get more screen real-estate in order to dedicate it all to one app or one window.
Robert Fisher on October 30, 2009 8:08 AMMy theory is that site owners and advertisers learned about this, started putting a lot of crap at the top of pages, so people learned and started scrolling past it.
Pies on October 30, 2009 8:09 AMSo if people are so well up on maintaining websites why is print so awful? if you want to print a web site you end up printing 10 pages to get one and often doing it again with it resized! Google maps for example. Print preview is also rubbish and is no help with this and often the printed output is nothing like the preview, you would ahve thought with all the hype about the environment that this would have been fixed overnight like the year 2000 issues!
John on October 30, 2009 8:13 AMI remember MSDN forums wasted lots of screen space with lots of vain stuff and only couple of titles of user threads was visible until scrolled. So I think you don't only need to give hints above the fold but make good use of the space so that people don't necessarily have to scroll.
Also I don't like those iFrames or such Flash boxes that prevent me from scrolling the main page when mouse pointer is above them accidentally. Those boxes grab my scrolling focus and scroll the boxes instead of the page I am scrolling. It is a page, not should be an obstacle dodging course.
On the other hand some programs that have two areas for scrolling sometimes scroll the one with the focus instead of the one my mouse is over. I hate it when I point the left list and scroll and the right list starts scrolling because the focus was still in the right list. I mean, I _was_ focusing the left list with my mouse pointer, additionally clicking the left list is just an unnecessary burden.
I remember the same thing happens with Visual Studio 6 in other manner. When my focus was in the object browser, all the menu items were disabled including item "Next Bookmark". I hate that, because there cannot be bookmarks for object browser, so why make me first click source code before I can use bookmarks? Just unnecessary burden. I am not so stupid that I become confused when I go to next bookmark, because obviously there are no bookmarks in object browser and I know it because I never made any there.
And then tooltips that pop up like mushrooms after a rainy day of course pop up stealing my view of the list. I use mouse pointer to work and click things and also hover over things, but that doesn't mean the tooltips should block my sight of the near items. Some people have suggested super tooltips that would be even larger providing more information, but that would be horrendous sight stealing unless the supertips appeared somewhere far.
Yes, ribbon wastes above fold space.
And one more thing that I hate is that many sites don't allow pages to be scrolled over the edge. When I use laptop then the screen might be low, so I would like to scroll the content in the end of the page to the middle of the page. But I can't scroll, because there is no empty white space after the page. This happens also in Windows Exlorer folder browser. When there is no space in the end of the list or so, the folders jump up and down instead of staying in one place while I open or close them.
Silvercode on October 30, 2009 8:33 AMStill missing the point. I could safely stop reading once you stated that - back when - "people still didn't know how to scroll".
You are still missing teh point. It is not the point that people don't _KNOW_ how to scroll. They just don't expect _to have to scroll_ in order to see the hoops they ought to jump through (bias intentional).
They see a text box, and this is all they expect and need. So they enter the text. Anything below the so-called fold will not ever draw their attention because they don't need it. You might think they should need it, but that is the fallacy. _YOU_ (your site) need it.
seth@mailinator.com on October 30, 2009 9:24 AMEbay made some recent changes for the worse in this regard. My wife sells a lot of stuff there, and she recently started getting complaints that critical information was missing. It wasn't really missing, it was just below the fold - and the area above the fold looks complete, removing the incentive to scroll.
Mark-R on October 30, 2009 9:50 AMI think there is a distinction to be made here: content can go below the fold, but functionality should be immediately available. E.g., I do not mind scrolling to continue to read an article or to view all the headlines. However, if I have to scroll around to find the search box that is bad UI.
anonymous coward on October 30, 2009 10:12 AMFor a site like SO I think that you don't need to worry about keeping things above the fold. Look at your user base - the site is targeted towards programmers. How many devs out there don't scroll? With the exception of Superuser, I would say the same applies to the rest of the trilogy.
I would think that there are more people who use the site that won't format their questions out of laziness rather than some content being below the fold, and not seen. Granted this is based on no scientific evidence other than I know I have done it. ;)
Joe on October 30, 2009 10:13 AMWe should tell users to stop folding their screens. Then they could see below the fold.
(Somebody had to say it) :)
Practicality on October 30, 2009 10:35 AMGreat topic, but I think there are some very important points to consider:
- Everything 'important' must be above the fold. The user should see what your webpage is about, and how to navigate it all without scrolling. The menu, logo, title and beginning of the content should all be there. Menu items (like footer links) that are below the fold tend to get ignored.
- Scrolling is BETTER than clicking next page, next page, next page etc. Many sites like news sites break content into pages in order to maximize advertisement impressions, but I have yet to meet a single user who prefers this method to the all-on-one-page method. I for one jump to the Print version if I see this kind of thing.
Sherri on October 30, 2009 10:39 AMJeff, if you think embedded iframes are so bad, then why
are you using them on Stack Overflow? This is certainly
one of the most annoying features of SO, especially when
the scrollbar is horizontal.
What is this?! You mean users can learn new things?! Blasphemy!
And they still won't give a crap what their post ends up looking like.
Oh heck, the myoptic coder again.
Learn to think.
1st. How many Mac users with a scroll mouse have you seen?
2nd. If you can scroll till your relevant information were you can enter text, why should you scroll down to a fucked up preview, you never need to use on a normal page?
I've only recently begun using stackoverflow; it's a great site!
But once I almost missed some good information because the ad near the bottom was near 'the fold' and I thought (for a moment) that the page ended there.
You might want to make the ad more obviously, an ad.
matt on October 30, 2009 11:52 AMThe fold is definitely something to worry about when displaying content, but you should also account for those that are looking to prioritize how much energy they're going to have to expend to read the content. Those familiar with how the scroll bar works will look at the size of the bar to judge how much content is on the page. Nearly every post in this blog is a prime example. If I'm interested in just reading the blog post and not the comments, I can't judge how much content I'm going to have to read through because the comments expand the page size so much. If I'm looking for an answer to something and I come to a page where the scroll bar is smaller than the size of the cursor I'm immediately looking for another page because that's too much content to scan through.
Steve on October 30, 2009 12:42 PMFor me, it's pretty simple. It's not about whether I know how to scroll, it's whether I want to scroll.
If I'm looking for something specific and the top of the page doesn't catch my eye, I don't even bother scrolling -- Why should I?
There are a dozen other sites that won't waste my time making me beg for what I want competing with the hundred sites that just want to sell me an unrelated solution, have no useful content or just exist to waste my time.
A website has a fraction of a second to convince me it's useful before the decision is made to move on -- Unless your content is *that* unique or that special, there is no second chance.
The Dave on October 30, 2009 1:09 PMJeff, I think you've completely missed the point. The Fold, whether it is a usability problem or not, is quite frankly not germain to the problem of correctly formatting posts on SO.
The underlying problem is that MarkDown is NOT WYSIWYG. A few simple changes to MarkDown such as having the Enter/Return key function as it does in pretty much every other application would go a long way towards solving the problem.
Just bite the bullet and listen to your users on this.
Chris Lively on October 30, 2009 1:41 PMOh, and because you like self linking. Here are a couple of your own posts on the subject.
http://www.codinghorror.com/blog/archives/001063.html
http://www.codinghorror.com/blog/archives/000880.html
If your users consistently expect it to work one way maybe you should take their 'feedback' and observations of their behavior into account.
Chris Lively on October 30, 2009 1:44 PMInteresting thoughts - I always try and focus on putting the most important stuff above the fold - but in today's world of multiple resolutions and screen orientations its really difficult to cater for everybody.
Clare Swindlehurst on October 31, 2009 2:13 AMAs with most things, we live in an ADD/ADHD world, unless you grab the reader's attention right away, it really doesn't matter how your page is designed - the whole site will be skipped. That is of course unless it's a customer service site, then the user will scroll for hours looking for the direct contact number ;0
There are people that can not use the scroll wheel for motorical (e.g. quadriplegia) reasons.
Those KNOW how to scroll, but it is very time consuming for them to do so.
The fold is still very relevant. It's not that users don't know how to scroll; that is stupid. It's that you have to grab them above the fold to give them a reason to WANT to scroll.
Regis on October 31, 2009 5:20 AMHi 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.
Neil Fenwick on October 31, 2009 5:59 AMWhat you should have started with is 'My last post was rubbish'. Credibility slides away, post by post.
Matt on October 31, 2009 7:57 AMI 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).
Hoffmann on October 31, 2009 9:08 AMSorry 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.
Homer on October 31, 2009 9:32 AMoriginally 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.
Anders on October 31, 2009 10:26 AMScrollogy?
Anders on October 31, 2009 10:28 AMIrony: 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.
Adrian on October 31, 2009 11:41 AMArguably, 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?)
Kythyria on October 31, 2009 11:52 AMI'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.
Reid on October 31, 2009 12:10 PMEven 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.
Andy on October 31, 2009 1:54 PMThe 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?).
Michhes on October 31, 2009 1:56 PMJeff, 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.
Ferdy on November 1, 2009 4:44 AMJeff, 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.
Ferdy on November 1, 2009 4:51 AMThere 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.
Greg Davis on November 1, 2009 5:05 AMKythyria:
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!
Greg Davis on November 1, 2009 5:13 AMMaybe 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)
Eric on November 1, 2009 11:19 AMI 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?? :)
John on November 1, 2009 11:41 AMJeff 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.
numan on November 2, 2009 1:00 AMStop 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.
Mastro on November 2, 2009 1:09 AMhorizontal 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
Walter on November 2, 2009 1:49 AMThe Fold Rule dates way back before "1996." It's a Newspaper thing (hence the "fold" reference). The rule comes into play on the front page of a website or newspaper section. The fold rule is about enticing the reader to browse the site or paper and see more ads. It's about attention and drawing the eye below the fold not about keeping their eyes above it!
Marty on November 2, 2009 3:22 AMI just want to point out that the name of the renowned Jakob Nielsen is misspelled in the article. Nielsen is a common Danish last name. It is not spelled Neilsen.
Dude, seriously. You HAVE to have more compelling things than this to write about. Folds? Users who can't/won't scroll?
If someone can't/won't scroll perhaps the web is not for them.
Steve on November 2, 2009 3:42 AMI developed a browser-based e-learning course platform about 10 years ago. I heard some complaints from various know-it-alls regarding appearance of the scroll bar. But in all usability tests, users had no problem finding content that was "below the fold". The product design was well received.
Vadim on November 2, 2009 5:16 AMUsers know how to scroll, it's more of a convenience thing. Ignoring old rants about how markdown works and if the preview was accurate, making a user scroll to see a preview is no different than making a "preview" button that a user must click in order to see the formatted output. If the intent is to display it on the same page, the preview should be visible at the same time the user is entering text.
If we want to minimize the number of user actions to accomplish a task (something we do in the everyday world as well as UI design) then we have to pay attention to scrolling as much as clicking. It used to be that we designed for "3-clicks" but I would argue that we should design for "3-actions." The less actions we require of users, the less opportunity for mistakes.
Does the fold matter? Sure. Will users find information below the fold? Yes.
Benjamin D. Bloom on November 2, 2009 6:28 AMVadim - I'd be interested to hear the results of two tests of your e-learning platform; one interface that had scrolling and one that was changed to minimize scrolling. I'd specifically be interested in a) was information discovered and b) what was the users opinion of each interface. I guess my point is that just because something is usable doesn't mean it's the best design. I've used an iPhone and a blackberry. I can accomplish approximately the same things on both platforms, but I prefer interfacing with the iPhone most of the time.
Benjamin D. Bloom on November 2, 2009 6:32 AMVadim - I'd be interested to hear the results of two tests of your e-learning platform; one interface that had scrolling and one that was changed to minimize scrolling. I'd specifically be interested in a) was information discovered and b) what was the users opinion of each interface. I guess my point is that just because something is usable doesn't mean it's the best design. I've used an iPhone and a blackberry. I can accomplish approximately the same things on both platforms, but I prefer interfacing with the iPhone most of the time.
Benjamin D. Bloom on November 2, 2009 6:33 AMJeff's last post was so clearly wrong, with so many people posting the correct analysis (bad GUI, not bad users), and the answer is so simple (interpret the CRs properly). I don't understand why he persists.
Nick on November 2, 2009 7:22 AMHas Joel read this article? His blog at http://www.joelonsoftware.com/items/2009/10/31.html has a huge picture at the top of the page, when I view it in my Thunderbird RSS feeder (98% of the time), that's all I ever see is the same graphic, until I scroll.
Edward on November 2, 2009 12:20 PMJeff, I think you've completely missed the point. The Fold, whether it is a usability problem or not, is quite frankly not germain to the problem of correctly formatting posts on SO.
gokhan on November 2, 2009 12:59 PMNeilsen is responsible for infinite heaps of idiocy. Thank god I'm not seeing his goofy face at conferences anymore. (Where he's hiding, I have no idea). The man condemned long web pages, any and all use of Flash and all sorts of other standard practices.
Had anyone listened to him, we would not only have an uglier web -- but we'd have a web without most of the spectacular successes we have today.
In short, he's an ass.
popo on November 3, 2009 2:46 AMI'm afraid I only read the first two paragraphs of this article - the rest of it wasn't visible :)
Seriously, the "Fold argument" really pisses me off, having worked in publishing for over 20 years - people have to realise that THE WEB IS NOT A PAPER MEDIUM.
My iphone only displays the first paragraph of any website... is it the most important thing and the information I look at the most? no - as its usually dates, login icons and ads.
The web has moved on - please kill anyone who talks about "the fold" - its completely irrelevant for modern day web design.
arrghhhhhhhh!!!!!!
p.s. ORANGE
Jeff Atwood wrote:
"It's not only a basic rule of writing, it's also a basic rule of the web: put the most important content at as close to the top of the page as you can. This isn't new advice, but it's so important that it never hurts to revisit it periodically in your own designs."
I'm sorry, but I have to disagree with this. Maybe it is just me, but I skip over the top inch, which usually includes title, roll-over drop-down menus and banner advertising. About the only thing I have been habituated into checking is the top right corner, where I briefly scan for a query box. Personally, I still find it odd to find it half-way down the left sidebar on the Wikipedia website.
I don't look at sidebars on either side. My eye homes in on text in bold that is hopefully of a much larger font size than the body text to which it is a headline. Ask yourself how many times you pick up a broadsheet newspaper and slavishly read 'The Wall Street Journal", the date, etc. like some sort of automaton?
Uncompetative on November 3, 2009 6:10 AMIn addition to knowing perfectly well how to scroll, users in 1996 also knew how to hit the back button. They still do and they are quick to use it if they don't see something they like within a few seconds.*
*According to Krug's "Don't Make Me Think! A Common Sense Approach to Web Usability."
Dave C. on November 3, 2009 6:10 AMMy 2.5 year old son grabbed my computer mouse for the first time last week. To my annoyance the first thing he did was use the scroll wheel. My 2 year old > the average computer user.
Shaun on November 3, 2009 10:11 AMRevisiting "The Fold"
I like this film.very good.
They didn't know how to scroll, so they would never find it. Jacob Neilsen, renowned usability expert, is the author of the above quote. But he recanted his position in 2003:
good.
If you can't learn to scroll within an hour or so of using the web, you're going to have an awfully stunted experience -- so much so that you're probably better off not using it at all. In short, if you use the web, you know how to scroll, almost by definition. It is a fundamental skill
Interesting.
To everyone who *know* that the fold doesn't matter:
1) Of *course* users know how to scroll. Just like they know how to unfold physical meda. But knowing how is not the same as doing.
2) Everything else being equal, people are less likely to do things that take more effort. Scrolling takes effort (not much, but some), so users are more likely to read things above the fold than below it.
3) There are actually two folds - the first is at the bottom of your browser window. The second is in your head. It is the amount of scrolling + reading *you* are willing to do before you give up on a web page.
Most people won't bother reading through all the other comments before they get to this one. It will be below their personal fold.
4) Everything else being equal, users will do things that they typically find most rewarding. If web-designers believe in the fold, they will put the content they consider most important near the top of the page. As a result, we actually train users not to scroll - thus re-inforcing the idea of the existence of the fold.
5) Users develop straegies for getting what they want from the web. These strategies vary from person to person and from day to day. The way I/you look at a page might not be typical. You can't always generalise your own experience.
5) Without watching what real users actually do, we're just guessing about the whole fold issue. (Although some of our guesses are more educated than others).
@popo: Neilsen may be an ass, but at least you know who he is. I'll bet he's never even hear of you.
Also now, there is an expecation of what to find above the fold, like quick links (tabs) to other main areas. I just sent an angry letter to a webmaster who's tabs were below the fold and I didn't think to look for them there.
Gregory on November 4, 2009 9:53 AMIf you have worked with end users you know that people do indeed know how to scroll. That is not an issue worth talking about anymore.
That said, they have been trained. They know that the last worthwhile thing on a message board is the submit button below the text input box. So, they scroll to see the button and start typing.
Previews are traditionally non-existent because the boxes actually use WYSIWIG; not your interpretation of that term.
Also, we all know that ads are on the left/right margins of sites. These are typically ignored. Hence the reason why your instructions (which make no sense btw) are also ignored. Obviously some people do read them and even sometimes click on something, but as you know that is by no means the common case.
Just fix the box to work like others expect already.. ;)
Chris Lively on November 5, 2009 9:29 AMThe comments to this entry are closed.
| Content (c) 2011 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved. |
Subscribe in a reader
Subscribe via email