美文网首页移动互联网产品设计0岁的产品经理
【译】为什么首屏线(The Fold)依然管用

【译】为什么首屏线(The Fold)依然管用

作者: Stove3 | 来源:发表于2015-05-15 15:51 被阅读1080次

原文:The Fold Manifesto: Why the Page Fold Still Matters


译者注:前两天做了个着陆页,第一反应就是上GA找自家网站受众的浏览器、操作系统和分辨率数据,然后算首屏线的位置。后来发现这个LP面向的群体可能只占到网站流量的很小一部分,所以…其实也没什么用,说到底还是以768的高度去算首屏线,二八原则嘛。

做完以后想着去国外网站上搜搜关于The Fold的研究,发现Nielsen Norman Group年初正好有相关文章,就翻译出来了。


很多人都在讨论如今「首屏线」是否还有意义,我们的答案是它依然存在并且依然管用,即便它在不同的设备、不同的系统、不同的浏览器、不同的响应式设计中对应着不同的位置。

不过比起首屏线的测量意义,更重要的其实是它背后的理念:真正要紧的不是首屏线的位置,而是呈现在首屏的内容。用户之所以滚屏,一是因为首屏的内容让他产生了期待,二是因为不需要他进行多余的操作——任何隐藏、隐蔽或许需要跳转的内容都存在被发现的(交互)成本,而用户只会做他们认为值得做的,这在任何屏幕尺寸下都通用,无论是移动、平板还是PC。

关于交互成本:

  • 可见而又不需要多余的操作(比如滚屏)= 低交互成本

  • 不可见且需要操作去发现(滚屏,甚至点击等)= 高交互成本,它主要由2部分组成:

    • a: 心理上,想清楚有没有,再想清楚做不做;
    • b: 生理上,驱动身体去做;

我们不会去浏览那些无关紧要的内容,甚至盲目的认为干货藏在5屏之外。我们只会根据首屏的内容去判断是继续滚屏、跳转到另一个页面、另一个网站,还是直接关闭网页。这也是为什么长网页常常依赖于页面导航,因为用户需要了解页面里有什么。

然而随着移动互联网的爆发,人们渐渐养成了滚屏的习惯,即便常常毫无必要,但屏幕实在太小了,人们不得不这么做。不过这并不意味着人们喜欢滚屏,人们滚屏只是因为首屏的内容令他们期待「前方高能」。

滚屏需要理由

设计Web页面需要会「讲故事」,内容才是用户继续看下去的理由,毕竟视觉元素只能吸引用户的目光,而引人入胜的故事却能令用户沉浸。所以只有把最有趣的内容放在首屏,用户才可能一路看到页尾。

而只有零星内容的首屏会很难让用户觉得后面有干货,也许设计得很酷炫,但会存在无人滚屏的风险,因为用户可能误以为这便是完整的页面。

Mod记事本的首屏希望通过底部的箭头来暗示下面还有内容,但这个设计实在太蠢了。

相比而言,一旦用户开始滚屏,Mod进一步的引导做得还不错,包括基于页面内定位的导航,以及各种提示滚屏的隐喻。

如果用户找不到有用的信息,他们便不再滚屏。尽管在可用性测试中,偶尔也会有用户在浏览页面前先纵览一番,不过这你也信?

简而言之,首屏线之所以依然管用,原因就在于当用户需要获取信息的时候,滚屏无论如何都是一个附加的操作,就像等待页面加载、横向翻阅卡片、展开收起的内容一样,滚屏增加了用户额外的操作步骤。

该来点干货了

俗话说:有争论,找用研。但在用研看来,这尼玛都算争论?首屏和首屏之外内容的交互成本天差地别,对用户而言,它们是2个完全不同的区域。

我们通过定性研究发现,N多用户的浏览行为都受到了首屏线的影响,而且往往是负面的居多——当合适的内容并没有被优先放置在首屏时,用户会停止滚屏,完全不在乎下面还有多少内容没有浏览。

定量研究也揭示了这一点,一场由57,453人完成的眼动追踪实验发现:相比首屏,首屏线下方的视觉热度呈直线下降:首屏线上方100px位置的视觉热度要比首屏线下方100px位置的视觉热度高出102%之多。

下面的热点图综合自我们研究过的所有网站(除去搜索引擎页面)。

另一份数据来自Google对网络广告的分析报告。该研究着眼于广告的「可见曝光」,定义展示面积达 50% 以上、存续时间 1 秒以上的广告,视为1次「可见曝光」。报告显示,首屏广告的平均「可见曝光率」为73%,而首屏之外广告的平均「可见曝光率」则为44%,Google认为首屏线导致了66%的曝光衰减。

尽管2份定量研究的结果有所差异,但无论是66%还是102%,其结果都是巨大的,我们姑且取两者的平均数84%作为首屏线导致的注意衰减。所以不管你信不信,反正我是信了,首屏线就在那里,不增不减。

So…记住,用户滚屏不是手残或闹着玩,而是因为确实有需求。

相关文章

网友评论

    本文标题:【译】为什么首屏线(The Fold)依然管用

    本文链接:https://www.haomeiwen.com/subject/ezfkqttx.html