Why Paying Attention to The Fold is Stupid
We’ve all heard the question before. “Where is the fold?” If you haven’t been asked this question before, consider yourself lucky. Wikipedia says…
“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day’s most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.
The term can be used more generally to refer to anything that is prominently displayed or of highest priority.
This term has been extended and used in web development to refer the portions of a webpage that can be visible without scrolling. However, some have suggested that this term is inaccurate as screen sizes vary greatly between users, especially in an era where websites are viewed with mobile devices as much as home computers.
The problem is that the people asking this question haven’t been properly educated as to where the fold actually came from and how we can use it or if we should even care.
Resources For Educating Fold-Mongers
To start off here are links to some valuable insight from industry experts both recent and spanning back several years.
1. Blasting the Myth of the Fold
2. The myth of the page fold: evidence from user testing
3. Utilizing the Cut-off Look to Encourage Users To Scroll
These three examples alone should be enough to convince even the most staunch fold evangelists. Hell, even this report from 1994 by usability expert Jakob Nielsen says,
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.
When We Should Pay Attention To The Fold
Now that we have truly established that paying attention to the fold is stupid, I will put on my stoopid hat and give you a couple reasons where we SHOULD pay attention. These are more common sense examples and really will help the usability and user experience.
1. Short Pages
If you have a limited amount of content that CAN all fit on one screen (above the fold) it’s best to try. There’s no reason to force the user to scroll a couple hundred pixels.
2. Don’t Give A Reason To Second Guess
Check your designs at different resolutions. If you have any hard horizontal breaks across the page, make sure they’re not right at the fold. Easy to fix by vertically spacing your content. We want to avoid guessing if this is the bottom of the page or not. Guide them down the page by trying to avoid these fold breaks.
These two examples may seem contradictory to the posts title, however they’re not meant to be strict usability guidelines and are more design common sense.
Summary
Whew! Glad you made it. This is below the fold and I was a little worried.
There are mountains of data and information slaying the fold myth. Some are backed by years and years of expertise and research and some are more comical and intended to prove a point. It is almost as absurd as not turning the page of a book if it ends with a period.
It is our responsibility to educate those who aren’t familiar with the findings and continue to study user behaviors to educate ourselves.
Newspaper photo by Shutterstock.
Jeff is a Sr. Art Director at HSN.com. When he isn’t being an evangelist of User Experience, UI Design and Best Usability Practices you can find him floating around the Twittersphere or perpetually tweaking his WordPress Blog.
Follow on Twitter: @fuelinterface | @inetwebguy
Grab the Feed
Couldn’t agree with you more. I see “the fold” as an old story, which survided too many years. Designers were scared that users wouldn’t know how to scroll through the page. In time they got to learn how to use it and now we see that we don’t even need a scroll wheel on the mouce (new mac mouse). Things do change, so don’t base your new designs on old studies.
Agreed. I think we should abandon the word “fold” and use the word “viewport”.
The idea of a viewport should not be overlooked, however. Users know how to scroll, but they are going to have a better experience when they don’t have to scroll up and down multiple times to read or interact with elements at the top and at the bottom. Seems like common sense from a designer’s perspective, but when you’re using a smaller laptop or netbook, you really notice how big the page is. If you’ve got interactive elements on the page, consideration should be given to their proximity and placement so as not to force the user to scroll excessively.
There is also a finer point to this- user attention span. Again, users know how to scroll fine, but it doesn’t mean they’re paying as much attention to the content when they get to the bottom. Mr Nielson commented on this topic today as well:
http://www.useit.com/alertbox/scrolling-attention.html
No, the web is not a newspaper. But we need to remember that our pages are often much larger than the viewports through which users will be experiencing them.
Viewport … Really?
It’s pretty much the standard term for the browser canvas across devices now.
“Viewport” is a great way to think about and express what we mean when trying to explain to clients what we’re talking about in relation to a design. Thanks Dave, I’m putting the “new” term in my notes for future use.
I also agree with you that the viewport is important design wise in many ways, especially for small business websites where the website as a billboard analogy (with the customers driving by them) is especially true.
At any rate, I’ve found that the average viewport has changed over the last few years in that it has become wider due to the 16:9, 16:10 monitor ratios that are now ubiquitous (both on desktops and obviously on laptops and mobile devices). It’s allowed me to widen my designs and thus get more content into the viewport on initial pageload if that makes any sense.
This is the first time I’ve come across the word “viewport,” and after reading the above posts that use it, I still don’t know what it means. Does it mean the area that the viewer sees when they first encounter the web page, or the entire “browser canvas,” which I assume includes the areas you have to scroll to see?
From an English-major perspective, it’s a vague word: I’m unclear on whether “port” refers to a resting place, or the idea of “carrying” the “view.”
I don’t know if any web technology specifications have really codified the word, though they may have, but my understanding is that it is what you see of the canvas at any given moment. Not necessarily the first thing you see when you load the page, but including that and any other view you might scroll to, and excluding anything on the page but outside of the current view.
With responsive design fast becoming a standard web design process this term has given us a concept that has replaced much of the focus on browser windows and designing to specific resolutions, and instead creating designs that reshape themselves to suit any given viewport.
Excellent content! Thanks for sharing. So where do you think this is going? I am going to subscribe to your blog and keep up to date.All the best.
Thanks for this great article. I’ve been having this “users don’t mind scrolling” argument with people in the Marketing department I work with for a while now, so it’s good to have some ammunition to back that up.
I did notice that one of you 3 links was broken. It should be:
http://www.cxpartners.co.uk/cxblog/the_myth_of_the_page_fold_evidence_from_user_testing/
Thanks again!
Thanks for spotting that, Mike. Fixed it!
The variation in screen size, the increasing numbers over mobile users (soon to overtake traditional web users) tablets all pose challenges to the current web designer / developer. I do agree that this concept of ‘above the fold’ is becoming less and less relevant simply because there’s too many devices with various different folds.
Just my $.02 ;D
Here’s a thought. Try turning a product page upside down so it starts with upsell, related products and ratings & reviews. At the bottom of the page we find the product image, title, description and at the very bottom, the Ad to Cart button. Would this page still have the same conversion rate than a regular page? I wouldn’t bet on it. The question about if we should design for the fold/size of the viewport is not so much about visitors scrolling or not – because they do if they are forced to – but more about how easy it is for them to find information and figure out what to do next. We should always prioritize the information structure to show the most important elements above the fold/viewport.
I agree, and I disagree. “The Fold” matters depending on context — it’s never stupid. As designers, we must always consider what our users see/read/interact with first. This is basic information design. So in this context, yes, the fold — as dynamic as it may be — matters. In the matter of this (annoying) context: “put it above the fold because users won’t see it …” or “users won’t know what to do or where to go next” … or “my stuff is just as important”, then yes, the fold-as-justification just simply breaks down for all the great reasons above. Consider this: designers of information and interaction, if skilled, can take a user through any digital medium with ease satisfying all our requirements — and blow away their team (and end users) in the process. It will always be our job to help our team understand the new ways in which users move through digital spaces. But if you use the screen real estate masterfully, you won’t have these types of arguments with your content and marketing partners in the first place. The design will stand on its own. All designers need to consider context, content, purpose and desired outcome to derive an appropriate solution.
Article was enjoyed thoroughly. Love the humor “Whew! Glad you made it. This is below the fold and I was a little worried.”
My first thought when I read the headline was “Yeah, it’s an obsolete term, like the continued use of ‘upper case’ and ‘lower case’.” The upper case and lower case became obsolete in the mid 1800s.
As an old designer who came up in newspapers, a figurative child of Woodward & Bernstein, I have to take exception to the word “stupid” when referring to newspaper nomenclature. We are in an era when all of these journalistic concepts are in real danger, like prioritizing the most vital content, otherwise known as placing it “above the fold.” If you go too literal on any one of these terms, they of course look antique and obsolete. But soon to follow will be the already threatened basic terms of the craft such as “editing,” spelling,” and “facts.” All your fancy new media options may make everything look very fast and easy — actually treating them as such makes your output sound “stupid.”
And I spent a summer in Viewport once — too many damn mosquitoes.
Great article. The more articles like this the more we can tell our clients that their unfounded assumptions are stupid. Thanks!
Well said Dave. Do you think that people who use (smaller)laptops, netbooks or, god forbid, mobile devices know their real estate is limited and thus inherently know they will need to scroll more than they would on their desktop. It is the trade-off for their mobility.
Unless you are targeting these users specifically would you recommend catering to their screen sizes more so than standard screen sizes?
Overall I agree that we should not force the user to scroll excessively, and proximity should be a consideration even outside of the fold discussion, but are we stil binding ourselves back to cramming content on the first screen just becasue it’s seen first?
Serving up a mobile version of a site is a good start and Im sure we will start seeing more and more of this type of scenario become a player.
You know, its funny- we’ve watched screen resolutions slowly climb over the years, and its given designers more breathing room in their layouts. Less than ten years ago, a 960 grid would have been too large for the average website!
But now mobile is on the rise, and we as designers have got to start thinking small again. Fortunately, we can serve up two versions of the same site with different ways to interact with the same content. (as long as we remember to design for mobile in parallel)
I think we’re about to transition in the mobile space.. right now, people realize that they’re on a mobile device, and they realize that not everything works on that device. I’ve certainly encountered sites and services that just took so much time to use on my tiny phone screen, that i just put it off until i could get to a desktop. But that will change soon.
Right now, I’m happily surprised when i come upon a site that serves me a full-featured mobile interface. Its not the norm, however. Soon it will be the norm, and I’ll start to expect it and be disappointed when its not there. I’ll become bitter and tweet that nice 960-wide website into shame over ignoring its mobile users!
So maybe the concept of the fold really does go away, but is replaced by this ongoing consideration of mobile device viewports.
Someone needs to do some eyetracking studies of mobile users. Does any data like this exist?