设计课堂|计育韬:轮播广告,几张图最合适?来看哈佛大学理论著述。

学术视角

轮播广告,泛指具备循环播放多张图片特性的动画广告结构,在公众号排版中往往基于 SVG 代码驱动。在《以SVG展示商品?26款轮播/滑动模板任你选择。》中,我们也介绍了诸多适用于不同场景,呈现出不同效果的轮播组件。

但是,轮播的数量应当如何设定?它是越多越好还是有合理的选择区间?本期我们邀请技术顾问计育韬老师为大家从专业学术角度,结合哈佛大学乔治 · 米勒教授的相关著述,充分掌握它的科学结论。

计育韬老师长期致力于新媒体交互设计学方面的研究,著有《硬核运营:新媒体技术流养成》、《Prezi 完全解读:从入门到精通》等理论教材图书,过往他于浙江传媒学院和复旦大学传授相关学术内容时,往往会在实践教学基础上广泛结合心理学、实证主义哲学内容,引导学生从方法论本质掌握交互设计学。

乔治 · 米勒,曾经担任洛克斐勒大学、麻省理工学院心理学教授、哈佛大学心理学系主任以及普林斯顿大学的心理学教授。他也是牛津大学的 Fulbright 研究伙伴,以及美国心理学会会长。他对人类信息记忆能力的研究,让「短时记忆」在当代认知心理学中成为特别受到重视的主题。他为以信息加工理论研究记忆开创了学术道路,自此出现了一系列对记忆错觉的定量研究。

信息量与比特

轮播广告,几张图最合适?

这个问题看似简单,其实细想之下是非常复杂且混沌的。对于一些物理客体的测算,我们往往掌握多种单位工具进行定义——长度、重量、时间等,都具备极为精确且易于常人理解的单位供你选择。但是「轮播广告」作为一种信息概念,「合适」作为一种感觉认知,都很难用传统单位进行度量。

而在乔治 · 米勒教授对「短时记忆」的研究中,引入了重要的信息量单位「比特(bit)」以开展实验,它的定义是“对两个有同样可能的选择对象作出决断所需的信息量(The amount of information that we need to make a decision between two equally likely alternatives)”

同理,我们将用户观看轮播图视作一种短时记忆行为,而用户对轮播内容的区分记忆或落地页点击选择则都可以视作「决断」行为。那么根据上述的定义,2 比特相当于对 4 个轮播图的准确区分记忆,3 比特相当于对 8 个轮播图的准确区分记忆,4 比特相当于对 16 个轮播图的准确区分记忆,5 比特相当于对 32 个轮播图的准确区分记忆……以此类推。

鉴于轮播图的图片之间往往拥有一定相关性甚至相似性,「比特」就尤其具备在研究中的应用意义。其实在既往的科学实验中,学者们往往会选择比「轮播图」更简单的判断目标,如音高/音响、溶液咸度、几何图形等来探寻人脑信息加工能力的极限——

参考实验:纯音辨别

Pollack 实验要求不具备乐理训练经验的普通参与者在听到一个纯音后,回答一个对应数字作为记录。在 2~3 个纯音时,参与者基本不会将它们混淆,4 个或 5 个开始出现记忆偏差……

将纯音弹奏和判断反馈作为信息输入和信息传递行为,实验从 2 纯音一直到 14 纯音(既信息量为 1 比特到 3.8 比特),实验结果发现多数参与者只能做到 2 比特向 2.5 比特渐近的信息量判断准确性:

参考实验:音响辨别

Garner 实验要求不具备乐理训练经验的普通参与者在 15~110 分贝的强度范围内进行声音响度的区别。相比音高,人类对音响的辨别能力更弱,极限信息通道容量大约在 2.3 比特:

参考实验:咸溶液味觉辨别

Beebe · Center、Rogers、O'Connell 实验要求普通参与者在 0.3-34.7gmNaCl/l00cc 浓度范围内进行味觉辨别,结果得到了只有 1.9 比特的信息通道容量极限,可见人类对味觉强度的辨别能力要比听觉强度更低:

参考实验:几何图像辨别

Hake 实验则进行了视觉层面人类辨别能力的实验,要求参与者在 2 个端点之间辨别特定的位置。实验首先分别用 5 、10 、20 与 50 个不同位置进行刺激,随后让观察者用 0~100 中的数字去做出全部标记,接下来再进行了一次不限制标记数量的相同实验。结果两次实验得到的函数依然非常相似,也就是说外部的限制条件变化并不影响人脑在视觉目标上 3.25 比特的通道容量:

7±2 法则

从上述几个实验参考,人类感官能力的辨别差异大约在 1.9 比特到 3.25 比特,也就是 2 的 1.9 次方选项到 2 的 3.25 次方选项之间——当然,前提是选项简单到如实验中的内容一般——那么可想而之对于更复杂的事物,人脑的「短时记忆」能力是多么有限。

乔治· 米勒的 7±2 定则

根据上述实验,哈佛大学的乔治 · 米勒教授首先提出了 7±2 的脑科学理论,它后来也演变为交互设计学「七大定则」之一。对于任何一种具有趋同性的交互设计形式,其极限都不应超过 9,普适选择 5 - 7 作为合理的数量。这个数组并不是从天而降的结论,而是由记忆比特值区间对应取整的自然数结果。

当然,7±2 并不是泛指人脑的记忆广度,毕竟长时间记忆一直是人类最擅长的能力。同时,7±2 也并不是指人脑的短时记忆上限,而是当超过它时,我们的记忆往往会发生混淆和模糊,相比 7±2 的区间我们的记忆效率反而是更低的。

为什么人脑的信息通道如此狭窄?

就哈佛大学的相关研究看,1.9 比特到 3.25 比特的信息通道虽然看似反常识,但是它更适合人类在进化过程中保全自我——相比从周遭环境中读取大量信息再进行判断,只选择少量关键信息作出分析并决策更有利于生存。

回到「轮播广告」设计

所以无论是「轮播图几张合适?」还是「H5 几页得当?」,大多数新媒体广告设计情景中,对于一些具有阅读重复性和短时性的界面,5 - 7 都是最科学的解决方案——超过这个范围,正常的人类读者既记不清你的广告内容,又降低了产品落地页的转化率。

同理,一款科学的低代码设计工具也应引导用户遵循交互设计学原则进行创作。尽管从技术角度看,5 张图的轮播和 50 张图的轮播没有任何开发难度差异,但多数 E2.COOL 黑科技 SVG 编辑器中相关组件数量都是有限筛选在米勒定律中的。

下次如果你的甲方再提出匪夷所思的数量要求,自信满满的你就可以侃侃而谈这条交互设计学基本定则,拒绝无意义的反人类排版设计了。

还有哪些你在交互设计中遇到的棘手困惑?不妨评论留言告诉我们,计育韬老师会在未来通过更多专业学术分享为大家解读。

更多海量模板,平均不足 1 元!

E2.COOL 秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,E2 将竭诚思考代码转化的可行性。

E2 平台官网

https://www.e2.cool/

会的比别人多一点

  • 12
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值