Screen sizes are constantly shifting and designs canrespond to these sizes那rather than fit to a constant size. So when clients, designers, developers, or marketers talk about content “above the fold” — a term borrowed from print-newspaper terminology and used as a way to reference what is visible on the webpage without scrolling —does it make sense anymore?

是。该fold still exists and still applies.Even though the exact location of the fold will differ between devices, it exists for every single user on every single screen. From a technical standpoint, the fold for the most common device sizes can be determined by looking at web traffic and at device and browser statistics. A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for. Each target device has its own fold to consider.

But more than a measurement,the fold is a concept。该fold matters because what appears at the top of your page matters. Users do scroll, but only if what’s above the fold is promising enough.What is visible on the page without requiring any action is what encourages us to scroll.在任何大小屏幕上都是如此,成为移动,平板电脑或桌面:任何隐藏的东西,并且如果用户认为它值得麻烦,则只能看到用户尚未发现的任何东西。

It’s a simple matter of互动成本

  • Visible没有进一步的动作(即,折叠高于折叠)=low interaction cost查看
  • Invisibleand requiring an action to be made visible (i.e., below the fold, or otherwise hidden) =higher interaction cost那consisting of (a) the mental effort of guessing that something is hidden and having to make the positive decision to reveal the content, and (b) the physical effort of doing what is required to see the content (e.g., scrolling the page).

We don’t go to a page, see useless and irrelevant content, and scroll out of the blind hope that something useful may be hidden 5 screens down. What we find at the top of the pagehelps us decideto continue scrolling, navigate to another page, try another site, or abandon the task altogether. So, long pages can benefit fromsignpostsat the top of the page, via links or through content, that show users what is coming next.

随着屏幕变小,我们被迫滚动更多,超出必要性。当一个小型移动屏幕的顶部时,我们在下面看看更多。但我们不这样做,因为我们喜欢滚动。我们这样做是因为我们预期在折叠之下有更多价值信息。

Encourage Scrolling

网页需要build a solid story。Users can be encouraged to scroll by giving them good reason to do so. Visual elements can draw the eye down the page.引人注目的内容can draw the user in. If the most interesting information is at the页面,用户也可以诱惑访问页面的底部。

When pages of any size offer little content at the top, it is difficult for users to know what else is available on the page. It may make for an attractive page, but that may come at the cost of discouraging users from scrolling. Such designs can create “false floors” that make users认为他们已经看到了整个内容

Mod Notebooks’ site starts with a full-page image and a link to a video. The only visual indication of content below is an arrow, attempting to break the false floor. Designs shouldn’t need an arrow to tell users to scroll.
通过contrast, once the user starts scrolling, the Mod Notebooks site does a good job of encouraging further exploration. The site provides anchor-based navigational options to help users jump to topics of interest. On screens of a variety of sizes, text and images span across pages, leading the users to more information. Content is well organized and builds the story about the product, encouraging the reader to keep scrolling.

当用户无法查看值信息时,它们会停止滚动。在可用性测试中,偶尔的用户可以在接合之前滚动“铺设”滚动“滚动,以获得页面上的内容,但此行为远非标准。用户有理由滚动。

该fold will always matter because滚动是一个额外的动作用户需要采取访问内容。就像waiting for a page to load那flipping through acarousel或打开一个accordion要查看文本,滚动会增加用户必须采取的额外步骤来完成目标。

该re are certainly designs that successfully offer very little at the top of the page while enticing users to scroll. Successful designs encourage the extra effort — they offer a glimpse ofinteresting content那a compellingintroduction吸引意象。那些创造引人注目和成功的长页的设计师是aware of the fold— they know how to craft a page that will encourage users to explore, rather than to navigate away. They prioritize content that leads the user down the page, content that makes the extra effort pay off.

Evidence for the Fold’s Impact

In interface design dilemmas, it’s common to have arguments both ways, requiring the user experience team to estimate which argument is the strongest. In this case, the theory is unusually clear-cut: the interaction costs are substantially different for material above vs. below the fold, so these two areas will be treated differently by users.

Still, it’s nice when there’s支持理论的经验数据。这证据是丰富的case of the page fold. We have observed countless users in qualitative usability studies having their behaviors impacted by the fold — often for the worse, because websites didn’t prioritize above-the-fold content appropriately. Users stopped scrolling before finding the information they needed, or worse, didn’t realize that there was more information waiting for them below the fold.

该re’s also quantitative evidence: in an analysis of57,453眼镜固定,我们发现,在页面折叠的位置,用户注意力有一个剧烈的下降。折叠上方的元素比折叠低于折叠的元素:折叠高于100个像素viewed 102% more比折叠低于100个像素。

以下Heatmap聚合我们研究中的所有站点(不包括搜索引擎和搜索页面)。折叠下方的内容确实收集了一些外观,但并不像折叠以上的内容。

An aggregate heatmap shows 57,453 eyetracking fixations across a wide range of pages, excluding search and search-results pages. Red indicates where users looked the most; yellow where they looked less. White areas got virtually no looks. The top black stripe indicates the page fold in the study; subsequent black stripes represent each additional screen after scrolling.

A second set of data comes from谷歌对显示广告的分析(PDF)跨越大量的网站。这项研究看着如何“可视化”广告是如何定义为50%的广告的像素屏幕一秒钟。折叠之上的广告具有73%的可见性,而折折的广告具有44%的可见性。在谷歌学习中,drop-off caused by the fold was 66%那because that’s how much more ads just above the fold were visible, compared with ads just below the fold.

当我们在102%的时候测量它时,为什么谷歌将折叠的折叠的影响衡量为66%?解释在于所采用的两种不同的指标。谷歌测量广告是否在屏幕上显示,以便用户可能会看到它,如果他们碰巧看那个地方。我们衡量了人们的地方实际看了on the screen and how much time they spent on looking.

两种定量研究产生折叠对用户体验的影响略有不同的估计。但两个数字都很大:我们没有谈论5%的差异或以上信息之间的差异为5%或10%的差异。该difference is on the order of 66%–102%。如果您希望单个数字作为我们最佳当前的估计,让我们参加这个范围的中点:84% is the average difference in how users treat info above vs. below the fold。Huge. Believe in the fold. It’s there, and the user experience changes drastically at that spot.

用户不滚动以便有趣。他们滚动为一个目的。所以,如果谈论折叠,请关注页面上的首先,让我们继续对话。