你的网站加载动画可能正在赶跑用户！

网页加载动画

在偶然等待期间，在实践中体验和使用重复动画的频率如何？研究者进行了三项试点研究，以证明为什么在等待时间中对动画的研究具有重要的价值。

研究者通过三项试点研究探讨了等待期间动画的使用情况及其重要性。在试点A中，195名被试回顾了过去7天内在美国浏览量最大的100个网站的等待经历，结果显示在线等待很频繁，常见反馈类型为无反馈（空白或静态图像/文本）或循环旋转动画，且常导致用户退出。试点B中，研究助理对100个流行网站和59个移动应用程序的等待情况进行收集和编码，发现等待现象普遍，移动设备等待时间比电脑更长，无动画比低速动画更常见，且动画速度差异大。试点C利用在线聊天服务公司数据，分析等待时间对客户参与度的影响，结果显示等待时间越长，客户参与度越低，退出率越高。这表明在等待期间合理使用动画对提升用户体验和参与度具有重要意义。

动画加载速度与感知时间之间的关系

人们对等待时间的感知与注意力分配密切相关。研究发现，当注意力从时间估计上转移时，会感觉等待时间变短，比如更复杂的视觉刺激能缩短主观等待时间。但有趣的是，适中的刺激复杂度能带来新鲜感而缩短时间感知，而过高的复杂度反而会因视觉疲劳导致等待时间显得更长，这种U型关系让动画速度对时间感知的影响变得复杂而值得探讨。

此外，动画速度会直接影响我们的视觉处理机制。实验显示，慢速动画能被清晰识别为重复动作，而快速动画会融合成模糊影像，这两种状态会触发大脑不同的神经处理模式。本文推测中等速度的动画最具视觉辨识度，能有效吸引注意力从而缩短时间感知；但当速度超过一定阈值时，动画会变得模糊，注意力分散反而让等待显得更漫长。

在线体验中，等待时间对用户行为有着决定性影响。数据显示，网页加载时间仅增加2秒就会让32%的用户离开，这种流失会直接转化为商业损失。过长的等待不仅增加购物车放弃率和客诉率，更会显著降低用户对服务质量的整体评价和满意度，这正是开发者需要优化感知等待时间的根本原因。

假设推理

关于动画速度凸效应的研究发现表明，动画速度与时间感知之间存在凸形（U型）关系，即与静态、低速或高速动画相比，中等速度动画会导致最短的感知等待时间。

在探讨前因变量时，研究发现当人们处于等待状态且不明确知道等待时长时，会依赖眼前的视觉信息（如加载动画的速度）来推测等待的时间长短，其中推断等待时间与注意力是两个关键因素：如果不需要推理等待时长，人们对时间的感知也不会受太大影响，如果需要推理未知等待时长，动画速度会显著影响人们对时间的主观感受，如高速动画可能让人觉得等待更短。研究提出动画的速度与它吸引的注意力直接相关，与静态图像或快速移动的动画相比，中等速度动画时在并发任务上的表现应该更差。

关于边界条件的研究表明，若高速动画比中等速度动画导致更长的时间感知是因为其吸引的注意力更少，那么通过改变动画的视觉设计以差异化地捕捉注意力，应能减弱该效应。研究提出复杂性和非典型视觉设计的调节因素。

在结果影响方面，研究发现在线体验中的感知等待时间会显著影响网站离开率和体验评价，我们预测动画速度与时间感知的凸形关系将反映在客户的在线行为及其后续评价中。

研究设计与结果分析

本研究通过十个实验检验以上假设。实验1a-1c采用多种动画速度、设备类型、待时长、动画旋转时长来检验动画速度的凸效应，实验2a和2b检验了等待时间不确定性和注意力是动画速度产生凸效应的前置因素。实验3a和3b检验复杂性和非典型视觉设计的调节效应，实验4-6检验时间感知的结果影响。

实验1a-1c旨在检验当呈现中等速度动画时，人们对等待时间的感知是否最短？在三个实验中，共有1457名被试参与。参与者被随机分配到三种动画速度条件之一（1a：静态、中等和快速；1b：无图像、中等和快速；1c：慢、中等和快速）。慢速动画旋转一周需10,000 毫秒，中等速度为2,000毫秒，快速为400毫秒。等待后，他们被问及他们感知的等待时间（1a：你认为前一屏幕中轮状动画的展示时长是多少？”；1b和1c：“你在这项研究期间感觉等待时间有多长？）。三个实验的结果显示，参与者在中等速度动画条件下感知的等待时间最短。

实验2a旨在检验等待时间确定性是导致动画速度的凸性效应产生的因素。采用了2（等待时间确定性：不确定vs.确定）×3（动画速度：静态vs.中等速度vs.快速）的被试间设计，共有1159名被试参与。在不确定等待时间的条件组，其设计与实验1c相同，不展示等待时间，在确定等待时间的条件组，展示文字提示：“页面加载时，请等待约9秒”。之后，参与者要回答与实验1相同的关于感知等待时间的问题。结果显示，仅有当等待时间不确定时，动画速度的凸性效应才会产生。

实验2b旨在检验注意力的中介作用。147名美国大学本科生参与，被要求完成10道算数题，被随机分配至三种条件（蜗牛动画速度：静态vs.中等vs.快速）之一，该动画在每道数学题与答案输入框之间会显示。完成计算任务后测量了主观和客观时间感知及注意力，主观时间感知测量为：“你觉得展示数学题页面的时间有多长？0-100”，客观时间感知测量为：“请估计你在数学题网页上花费了多少秒”。注意力测量如“当我做数学题时，蜗牛图片吸引了我的注意力”等3个题项。结果显示，与静态或快速动画相比，中等速度动画最能吸引注意力，被试的行为表现最差。

实验3a检验双重注意元素的调节作用。1,148被试参与，采用2（动画注意力类型：单vs.双）x2（动画速度：中等vs.快速）组间实验设计。单一注意力类型条件使用与实验1a相同的动画。双注意力类型的条件在单一注意力类型条件下加入了轮盘颜色变化，即用颜色变化来减弱动画快速变化的感觉。随后，参与者回答了与实验2a相同的感知等待时间测量。结果显示，双重注意力动画通过引入慢节奏视觉变化（如颜色渐变），转移对快速运动元素的注意力，从而削弱动画速度对感知等待时间的影响。

实验3b检验非典型性的调节作用，研究预测新颖的非典型动画应该减少动画速度的影响，因为它独特的外观应该引起更多关注。1,135名被试参与，采用2（动画类型：典型与非典型）x2（动画速度：中等与快速）的组间设计。典型的动画条件是来自实验1c的相同连续圆动画。非典型类型的动画条件包括一个搅拌碗，搅拌器上下移动。随后，回答了与实验3a 同的感知等待时间。结果显示，对于吸引更多注意力的非典型动画，动画速度的凸效应消失。

实验4检验了等待时间感知的两个关键下游结构：点击率，即点击广告后，在页面完全加载之前一直留在页面上的用户比例。在Facebook投放了一个防晒霜的广告，动画速度条件为静态、中等、快速。记录CTLR（即页面完全加载前未离开的参与者比例）和注意力分散率（即20秒等待期间点击跳出主浏览器窗口的比例）。结果显示，动画为中等速度下，CTLR最高，注意力在其中起到中介作用。

实验5检验了等待时间感知的一个关键下游结构：页面转化率。357名被试参与，他们被随机分配至三种动画速度条件（静态、中等、快速）的防晒霜的广告，记录被试行为。结果显示，中等速度下，页面转化率最高。

实验6采用激励相容的方式家检验了另一个下游后果：产品评估。361名被试参与，被随机分配至三种动画速度条件之一：静态、中等或快速。实验要求参与者想象自己在选购背包，并从10个选项中选出最喜欢的一款。并告知被试选择后有抽奖活动，被抽中的被试（6名）将获得其选择的背包。每次查看背包信息页前，会出现7秒的等待动画，最终，参与者需从10个背包中做出选择，并回答“你对每个背包的喜爱程度如何？0分=完全不喜欢，100分=非常喜欢”。结果显示，中等速度下产生了更高的产品评估。

营销人，你会怎么做？