(翻译) 进度条效果研究

日期:2008 年 12 月 1 日理论 & 教程
译者按:这是一篇同事通过outlook分享的文章,概括了一篇关于进度条的研究报告,觉得蛮有意思就简单了翻译一下:

图片载入中...

作者: Dennis Koks
原文链接: The effect of the progress-bar

相信大家都一次又一次地遇上这样的体验:安装软件或者扫描图片的时候进度条稳稳当当地走到了99%却突然停了下来。这样的经历着实让人沮丧,但是现在我们可能有办法解决这样的问题。

来自Carnegie Mellon 大学的学者们做了一些关于进度条实际效果的研究,论文只有4页,但是为了方便大家阅读,这里简单做一下概括:


进度
研究者总共想出了9种不同的函数来表达进度:

图片载入中...
  • 线性 (Linear):递增率是常量

  • 前停顿(Early paus):类似于线性,但在25%进度附近进度递增非常慢

  • 后停顿(Late paus):类似于线性,但在75%进度附近进度递增非常慢

  • 慢速波状曲线(Slow wavy ):速度时快时慢,整个过程有3个周期

  • 快速波状曲线(Fast wavy ):类似于慢速波状曲线,但波长很短,有很多周期

  • 平方曲线(Power):进度的递增率不断在增加,也就是一开始很慢,随后越来越快

  • 反平方曲线(Inverse power):和平方曲线像反,一开始很快,随后越来越慢

  • 快速平方曲线(Fast power):类似于平方曲线,只是进度的递增率更高

  • 快速反平方曲线(Inverse fast power)和反平方曲线类似,只是进度的变化率更大


研究者们把这集中曲线都应用到了一个实际的进度条中对总共22个用户进行测试。每个用户会在同一时刻观察两个使用不同函数曲线的进度条,整个进度都是5.5秒,但是要求用户选出感觉上哪个曲线速度更快,然后分析一下所有的结果


结论
总共九个函数可以被分成三组:
三个函数在测试结果中表现出让人感觉比线性函数慢:后停顿(late pause), 慢速波状曲线(slow wavy)和 快速速波状曲线(fast wavy)。
四个函数表现出的结果相差不多,感觉上的速度都比较相似:快速反平方曲线(Inverse fast power),反平方曲线(Inverse power),前停顿(Early paus)和线性(Linear)
另外两个函数在测试中普遍让用户觉得速度比较快:平方曲线(Power)和 快速平方曲线(Fast power)

测试显示的结果告诉我们,凡是曲线中有明显停顿的,用户所感知的进度都比较慢,而进度中一直在加速的,用户都会觉得进度走得很快。研究者们还指出虽然一个稳定的系统应该使用线性的进度条,但是如果能应用加速型的进度条,确实能小幅地改善用户体验。但是当进度并不能被准确测量时,进度条并不是一个很好的选择,实际情况下可以选用不断重复的动画来代替

博文评论
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash