屏幕尺寸不断变化,设计也可以对这些尺寸做出反应,而不是适合一个恒定的大小。因此,当客户、设计师、开发人员或市场营销人员谈论内容时,他们会说这些内容“在页面上方”,这是从报纸印刷版中借用来的一个术语,用来指网页上不需要滚动就能看到的内容这还有意义吗?

是。折叠仍然存在,仍然适用。尽管折叠的确切位置会因设备的不同而不同,但它存在于每个用户在每个屏幕上。从技术的角度来看,最常见设备的大小可以通过查看web流量以及设备和浏览器的统计数据来确定。响应式设计可能有2、3、4或更多不同的折叠,具体到设备和屏幕尺寸的优化设计。每个目标设备都有自己的折叠要考虑。

但不仅仅是一种测量,折叠是一个概念。折叠很重要,因为出现在页面顶部的内容很重要。用户可以滚动页面,但前提是页面上方的内容足够有前景。不需要采取任何行动就能在页面上看到的东西鼓励我们滚动页面。在任何大小屏幕上都是如此,成为移动,平板电脑或桌面:任何隐藏的东西,并且如果用户认为它值得麻烦,则只能看到用户尚未发现的任何东西。

这是一个简单的问题互动成本

  • 可见没有进一步的动作(即,折叠高于折叠)=交互成本低查看
  • 看不见的并且要求一个动作是可见的(例如,在折叠下面,或以其他方式隐藏)=交互成本较高那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).

我们不会在浏览一个页面时,看到无用和不相关的内容,然后盲目地希望有用的东西可能隐藏在下面5个屏幕中。我们在这页的顶部发现了什么帮助我们决定如果要继续滚动,可以转到另一个页面,尝试另一个站点,或者干脆放弃这个任务。所以,长页面可以从中受益路标在页面的顶部,通过链接或内容,显示用户接下来要做什么。

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

鼓励滚动

网页需要建立一个可靠的故事。给用户一个很好的理由来鼓励他们这样做。视觉元素可以吸引眼球向下看页面。引人注目的内容可以吸引用户。如果最有趣的信息在页面,用户也可以诱惑访问页面的底部。

当任何大小的页面在顶部只提供少量内容时,用户都很难知道页面上还有什么可用的内容。这可能是一个吸引人的页面,但代价可能是不鼓励用户滚动。这样的设计会创造出“假地板”,让使用者产生错觉认为他们已经看到了整个内容

Mod笔记本的网站以整页图片和一个视频链接开始。下面唯一的视觉指示是一个箭头,试图打破错误的地板。设计不应该需要一个箭头来告诉用户滚动。
相比之下,一旦用户开始滚动,Mod笔记本网站在鼓励进一步探索方面做得很好。该站点提供基于锚的导航选项,帮助用户跳转到感兴趣的主题。在各种大小的屏幕上,文本和图像跨越页面,引导用户获取更多信息。内容组织良好,构建了关于产品的故事,鼓励读者不断滚动。

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

折叠会一直很重要,因为滚动是一个额外的动作用户需要采取访问内容。就像等待页面加载,翻阅旋转木马或打开一个手风琴要查看文本,滚动会增加用户必须采取的额外步骤来完成目标。

当然也有一些设计成功地在页面顶部提供很少的内容,同时吸引用户滚动页面。成功的设计鼓励额外的努力——他们提供了一个一瞥有趣的内容,一个令人信服的介绍吸引意象。那些创造引人注目和成功的长页的设计师是意识到褶皱-他们知道如何设计一个页面,鼓励用户去探索,而不是导航离开。他们优先考虑那些能引导用户浏览页面的内容,以及那些能让额外的努力获得回报的内容。

褶皱影响的证据

在界面设计的困境中,双方都有争论是很常见的,这就需要用户体验团队来评估哪个争论是最强的。在这种情况下,理论是非常明确的:交互成本是显著不同的材料上和下折叠,所以这两个领域将被用户不同的对待。

不过,如果有的话还是不错的支持理论的经验数据。而这一证据在折页的例子中比比皆是。在定性可用性研究中,我们观察到无数用户的行为都受到折页的影响——而且往往是坏的,因为网站没有对折页上方的内容进行适当的优先排序。用户在找到他们需要的信息之前就停止滚动,或者更糟的是,他们没有意识到还有更多的信息等待着他们。

也有定量证据:在分析中57,453眼镜固定,我们发现,在页面折叠的位置,用户注意力有一个剧烈的下降。折叠上方的元素比折叠低于折叠的元素:折叠高于100个像素认为多102%比折叠低于100个像素。

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

一份汇总的热图显示了57453个眼球追踪的注视点分布在大范围的页面上,不包括搜索和搜索结果页面。红色表示用户最常看的地方;黄色的地方看起来更少。白色区域几乎不受关注。顶部的黑色条纹表示研究中的页面折叠;后面的黑色条纹表示滚动后的每个额外屏幕。

第二组数据来自谷歌对显示广告的分析(PDF)跨越大量的网站。这项研究看着如何“可视化”广告是如何定义为50%的广告的像素屏幕一秒钟。折叠之上的广告具有73%的可见性,而折折的广告具有44%的可见性。在谷歌学习中,由褶皱引起的下降为66%,因为这就是在广告页上方的广告与在广告页下方的广告相比所能看到的广告数量。

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

两种定量研究产生折叠对用户体验的影响略有不同的估计。但两个数字都很大:我们没有谈论5%的差异或以上信息之间的差异为5%或10%的差异。该差异在66%-102%之间。如果您希望单个数字作为我们最佳当前的估计,让我们参加这个范围的中点:84%是用户对待上面和下面信息的平均差异。巨大的。相信信众。它就在那里,用户体验就在那里发生了巨大的变化。

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