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.
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
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.
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?
“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.
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.