菜单 关闭

《折页宣言》:为什么折页仍然重要

通过 艾米谢德2月1日,二千零一十五

总结:页面顶部显示的内容与不管屏幕大小,隐藏的内容都会影响用户体验。用户处理信息的平均差异高于褶皱以下为84%。


屏幕尺寸不断变化,设计可以manbetx官方网站手机版响应这些大小,而不是一个固定的大小。所以当客户manbetx官方网站手机版设计师,开发人员,或者营销人员谈论的是“折叠上面”的内容,这是从报纸术语中借用的一个术语,用来引用网页上可见的内容而不滚动。-它有意义了吗?

对。褶皱仍然存在并且仍然适用。尽管不同装置之间折叠的确切位置不同,它存在于每个屏幕上的每个用户。从技术角度来看,最常见设备大小的折叠可以通过查看网络流量、设备和浏览器统计数据来确定。响应式设计可能有2个,manbetx官方网站手机版三,4,或者更多不同的褶皱,针对设备和屏幕尺寸进行了优化设计。manbetx官方网站手机版每个目标设备都有自己的折叠需要考虑。

但不仅仅是测量,折叠是一个概念.折叠很重要,因为出现在页面顶部的内容很重要。用户可以滚动,但前提是上面的内容有足够的前景。在页面上不需要任何操作就可以看到的是鼓励我们滚动的内容。在任何尺寸的屏幕上都是这样,不管它是移动的,片剂,或者桌面:任何隐藏的和用户必须发现的东西只有在用户认为值得麻烦的时候才会被看到。

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

  • 可视的无需采取进一步行动(即,在褶皱上方)=低交互成本查看
  • 隐形的并要求将一个动作显示出来(即,在褶皱下面,或以其他方式隐藏)=更高的交互成本,包括(a)在心理上的努力,猜测某些东西是隐藏的,并且必须做出积极的决定来揭示这些内容,以及(b)为查看内容所做的体力劳动(例如,滚动页面)。

我们不去看一页,看到无用和无关的内容,从盲屏中滚动出来,希望有有用的东西可以隐藏5个屏幕。我们在页面顶部找到的内容帮助我们决定要继续滚动,导航到另一页,尝试其他网站,或者完全放弃任务。所以,长页可以从中受益路标在页面顶部,通过链接或内容,让用户知道接下来会发生什么。

随着屏幕变小,我们不得不滚动更多,出于必要。当一个小的移动屏幕的顶部几乎看不到,我们在下面寻找更多。但我们不这样做,因为我们喜欢滚动。我们这样做是因为我们期望在价格下面有更多对我们有价值的信息。

鼓励滚动

网页需要建立一个坚实的故事.通过给用户提供充分的理由,可以鼓励他们滚动。视觉元素可以把视线引下页面。引人注目的内容可以吸引用户。如果最有趣的信息是页面顶部,用户也可能会被诱惑访问页面底部。

当任何大小的页面在顶部提供很少的内容时,用户很难知道页面上还有其他可用的内容。它可能会成为一个有吸引力的页面,但这可能是以阻止用户滚动为代价的。这样的设计manbetx官方网站手机版可以创造“假地板”,让用户以为他们看到了整页的内容.

mod notebook的网站从一个完整的页面图像和一个视频链接开始。以下内容的唯一可视指示是箭头,试图打破假地板。manbetx官方网站手机版设计不需要箭头来告诉用户滚动。
相比之下,一旦用户开始滚动,国防部笔记本网站在鼓励进一步探索方面做得很好。该网站提供了基于锚的导航选项,帮助用户跳转到感兴趣的主题。在各种尺寸的屏幕上,文本和图像跨越页面,引导用户了解更多信息。内容组织得很好,建立了产品的故事,鼓励读者继续滚动。

当用户看不到有价值的信息时,它们停止滚动。在可用性测试中,偶尔的用户会做一个“土地的一部分”的滚动,以便在参与之前了解页面上的内容,但这种行为远不规范。有理由时,用户可以滚动。

折叠总是很重要的,因为滚动是一种额外的操作用户访问内容所需的。就像等待页面加载,翻转旋转木马,或打开手风琴查看文本,滚动添加了一个额外的步骤,用户必须采取这些步骤来实现他们的目标。

当然,在吸引用户滚动的同时,在页面顶部成manbetx官方网站手机版功提供的设计很少。成功的设计鼓励额外的努manbetx官方网站手机版力-他们提供了一个一瞥有趣的内容,令人信服的介绍引人入胜的图像.那些创造引人manbetx官方网站手机版注目和成功的长页面的设计师是意识到褶皱-他们知道如何制作一个鼓励用户探索的页面,而不是离开。他们对引导用户进入页面的内容进行优先级排序,使额外努力得到回报的内容。

褶皱影响的证据

在界面设计的困境中,manbetx官方网站手机版双方都有争论是很常见的,要求用户体验团队估计哪个参数最强。在这种情况下,这一理论异常明确:上述材料的相互作用成本与在褶皱下面,因此,这两个领域将被用户以不同的方式对待。

仍然,有了它就很好了支持理论的经验数据.在翻页的情况下,证据是充分可用的。在定性可用性研究中,我们观察到无数用户的行为受到折叠的影响——通常情况更糟,因为网站没有对折叠内容进行适当的优先级排序。用户在找到所需信息之前停止滚动,或者更糟的是,没有意识到在折叠处下面有更多的信息等着他们。

还有定量的证据:在分析57453目镜固定装置,我们发现,在页面折叠的位置,用户的注意力急剧下降。折叠上方的元素比折叠下方的元素更多:折叠上方的100像素浏览量增加102%比折叠下方的100像素还要低。

下面的heatmap汇总了我们研究中的所有站点(不包括搜索引擎和搜索页面)。褶皱下面的内容确实收集了一些外观,但并没有折叠上面的内容那么多。

一个综合热图显示57453个眼睛跟踪固定跨越广泛的页面,不包括搜索和搜索结果页面。红色表示用户最喜欢的地方;他们看起来不那么黄。白色区域几乎没有任何外观。顶部的黑色条纹表示研究中的页面折叠;随后的黑色条纹表示滚动后的每个附加屏幕。

第二组数据来自谷歌展示广告分析(pdf)通过大量的网站。这项研究着眼于广告的“可视性”,可视性定义为广告像素的50%在屏幕上显示一秒钟。折叠上方的广告有73%的可视性,而仅在折叠下方的广告则有44%的可视性。在谷歌的研究中,这个褶皱引起的下降率为66%。,因为这就是折叠上方的广告可见的程度,相比之下,广告的价格就低了一点。

当我们以102%的比例来衡量折叠的影响时,为什么谷歌要以66%的比例来衡量折叠的影响?原因在于采用了两种不同的指标。谷歌测量广告是否显示在屏幕上,以便用户看到它,如果他们碰巧看到那个地方。我们测量了人在哪里实际上看起来在屏幕上,他们花了多少时间来寻找。

这两项定量研究对折叠对用户体验的影响做出了略有不同的估计。但这两个数字都很大:我们说的不是5%的差异,也不是10%的差异。在褶皱下面。这个差异在66%-102%之间。.如果你想要一个数字作为我们目前的最佳估计值,让我们以这个范围的中点为例:84%是用户处理信息的平均差异。褶皱以下.巨大的。相信折叠。就在那里,用户体验在那个地方发生了巨大的变化。

用户不会为了好玩而滚动。它们滚动是为了某种目的。所以,如果说折叠,重点放在第一页上,让我们继续对话。