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

原文: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…记住,用户滚屏不是手残或闹着玩,而是因为确实有需求。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,613评论 4 59
  • 销售小白如何寻找高端客户。 做销售是一件很刺激的事,会让你尝尽酸甜苦辣,当然收获也是蛮大的! 如果你是销售小白,首...
    心纯见真阅读 718评论 0 0
  • 怎样减肥(二) 我知道读者们都喜欢干货,但干货不是对每一个人都适用,基于每个人的体型都不一样,减肥的方式也各种各样...
    安小成阅读 2,930评论 9 30