这是一个众所周知的可用性问题缓慢的加载时间惹恼用户并影响他们对网站和组织的看法。当时间很宝贵时,即使是在尽可能快地获取所需信息方面最小的延迟也会令人沮丧。

缓慢的响应时间通常是由于加载大图像、花哨的小部件(例如横幅旋转木马),或由于复杂的数据处理而导致的服务器延迟。然而,在最近的一项可用性研究中,我们的参与者却因为一个完全不同的原因而放慢了速度:一种导致主要文本内容动画到位的视觉效果用户向下滚动到页面的那个区域。用一位与会者的话来说:我不喜欢当我向下滚动时所有的东西都在一起。我讨厌它必须加载每一个部分。有时我只是想在那里看到信息而不需要看到一个很酷的小动作。

虽然延迟的原因完全不同,但效果是一样的:用户沮丧和糟糕的用户体验。

动画增加美感

动画经常被用来吸引注意力以一定的界面元素,以及创造现代和创新的印象品牌.微妙的动画和过渡效果可以增加视觉兴趣,并积极影响用户的感知价值只要它们不刺耳或不让人迷失方向,并且在适当的地方谨慎使用。在这些情况下,一个好的动画可以增加界面的吸引力,从而利用aesthetic-usability效应

滚动触发动画最近很流行,但就像许多趋势一样,它们很容易被误用或滥用。如果做得不好,这些动画就意味着创造快乐而不是恼人的:用户被迫等待页面“加载”文本。(它们也证明了用户对技术的知识.人们没有必要区分——也不应该区分——实际的系统延迟和由于视觉效果造成的延迟。)

科学和工业博物馆网站,文本在每个部分的页面显示通过淡出和滑动动画。这些过渡动画旨在支持博物馆作为创新、互动和现代的品牌。

让我们明确一点:并非所有滚动触发动画都是糟糕的。在我们的研究中,微妙的因素经常被忽视(或未被评论)——包括上面的例子科学和工业博物馆网站。好的滚动触发动画不应该过度地将注意力从内容转移到界面本身。设计一个合适的动画是一个在引人注目和不引人注目之间取得平衡,这样它就不会从当前的任务中分心,也不会变得令人厌烦或重复。

滚动触发动画的3个指导方针

1.考虑上下文。

如果你想在文本中使用滚动动画,考虑一下网站的总体目的和大多数访问者的首要任务。支持高风险任务(如医疗或健康相关、金融、B2B网站)迎合那些以目标为中心、容易被“可爱”的设计功能惹恼的用户。以任务为中心的用户不希望被赞美通过网站,他们想要得到答案。

另一方面,在娱乐、艺术、电子商务或类似浏览网站等休闲网站上,游客可能会将滚动触发的动画视为一种意想不到的、令人愉快的视觉效果。例如,浏览上述博物馆网站的参与者并不是为了搜索任何特定的信息,而只是想看看博物馆提供什么类型的展示。

无论哪种情况,重要的是要考虑用户在整个网站的典型旅程中遇到这些动画的频率。在滚动很长的页面时看到过渡效果可能是一次甚至几次的惊喜;但在多个页面上多次看到它很快就会变得重复,并耗尽用户的耐心。因为动画依赖于间接触发——向下滚动页面的行为——因此是用户无法直接控制的,小心不要过度使用。虽然每个动画可能只会最低限度地降低用户的速度,但许多这样的动画的效果将变得越来越明显。(请记住,即使多一秒也足以让用户注意到界面的延迟响应时间,他们觉得自己受体制的支配。)

2.对次要内容使用滚动触发动画。

为了降低滚动触发动画的风险,使用它们其次,支持内容而不是正文.当使用这种方法时,人们不会被迫等待每一个文本区域“完成加载”,以便继续阅读,但整体的视觉美学好处得到了维护。

如果用户能够阅读所有文本区域,而不需要任何人工加载时间,那么他们就能够成功地完成消费重要信息的任务,而不会因为界面本身而受到延迟或分心。在任何网站上,文本往往是主要的信息载体,所以在访问它时消除任何阻力是至关重要的。

网站使用动画只支持图形元素,而不是文本的主要区域。快速访问文本内容允许用户继续阅读,而不必等待动画完成。

3.确保任何由滚动触发的动画只发生一次。

滚动触发效果应该只在用户第一次向下浏览页面时被激活。后续视图(当用户在页面上上下移动以查看信息时)应该有所有内容,而不需要重新播放动画。

结论

动画可以是一个很好的工具来支持品牌和直接关注,但必须克制使用。设计师或开发人员可能喜欢大块内容的褪色、滑动或其他过渡效果,但请记住,这些效果可能会阻碍用户体验,而不是增强用户体验。