It is a long-known usability issue that加载时间慢惹恼用户并影响他们对网站和组织的看法。当时间珍贵时,即使尽快获得所需信息的最小延迟也可能变得令人沮丧。

Slow response times are often due to loading large images, fancy widgets (such asbanner carousels)或服务器延迟由于复杂的数据处理。但是,在最近的可用性研究中,我们的参与者因完全不同的原因而减缓:一种视觉效果,导致主要文本内容仅为地点进行动画afterthe user had scrolled down to that area of the page. In the words of one participant: “当我滚动下来时,我不喜欢如何结束。......我讨厌它必须加载每个部分。有时我只想在那里看到信息,而无需看到很酷的小运动。

而延迟的原因是完全不同的ent, the effects were the same: user frustration and a poor user experience.

Animations Add to Aesthetics

动画通常用于吸引注意力对某些界面要素,以及创造现代和创新的印象brand。微妙的动画和转换效果可以增加视觉兴趣并对用户产生积极影响感知价值of the brand — provided that they are not jarring or disorienting, and are used sparingly and in appropriate places. In those instances, a good animation can increase the attractiveness of the interface and thereby take advantage of theaesthetic-usability effect

滚动触发的动画最近变得流行,但 - 像许多趋势 - 它们可以很容易地滥用或过度使用。完成时,这些动画意味着创造乐趣相反,令人讨厌:用户被迫等待页面“加载”文本。(他们也证明了这个限制users’ knowledge about technology。人们don’t necessarily distinguish — nor should they have to — between actual system delays and delays due to visual effects.)

On theMuseum of Science and Industry网站,页面的每个部分中的文本通过淡化和幻灯片动画显示。这些过渡动画旨在支持博物馆的品牌作为创新,互动和现代。

Let’s be clear: not all scroll-triggered animations are bad. Subtle ones often go unnoticed (or uncommented upon) in our studies — including the above example of the transition effects on theMuseum of Science and Industry地点。良好的滚动触发的动画不应过度引起远离内容和界面本身的关注。设计适当的动画是一个balancing act between making it noticeable yet unobtrusive, so that it does not distract from the current task or become annoying or repetitive.

3 Guidelines for Scroll-Triggered Animations

1. Consider the context.

如果您试图为文本使用滚动触发的动画,请考虑该网站的整体目的以及大多数访客的最佳任务。支持高股权任务的网站(例如,医疗或健康,财务,B2B sites) cater to audiences that are goal-focused and easily annoyed by “cute” design features that make them waste time.以任务为中心的用户不想被哇哇哇哇哇哇哇由网站 - 他们想要得到答案。

On the other hand, on leisure sites such as entertainment, art, ecommerce, or similar browsing sites, visitors may view scroll-triggered animations as an unexpected and enjoyable visual. For example, participants browsing the aforementioned museum website weren’t searching for any specific information, but were merely browsing to see what types of displays the museum had to offer.

在任何一种情况下,重要的是考虑用户在整个网站典型旅程中遇到这些动画的频率。在滚动下滚动的时候看到过渡效果可能是一次甚至几次的令人愉快的惊喜;但是在多个页面上多次看到它很快就会获得重复性,并削弱用户的耐心。因为动画依赖于间接trigger — the act of scrolling down the page — and is thus out of users’ direct control, be cautious about overusing it. While each animation may only slow down the users minimally, the effect of many such animations will become increasingly noticeable. (Remember, even one extra second is enough for users to notice a delay in the interface’s响应时间,并觉得它们处于系统的怜悯。)

2.将滚动触发的动画用于辅助内容。

To mitigate the risks of scroll-triggered animations, use them for二次,支持内容,而不是用于文本的主要机构。当以这种方式应用时,人们不会被迫等待每个文本区域“完成加载”,以便继续阅读,但保持整体视觉审美福利。

如果用户可以在没有任何人工负载时间的情况下阅读所有文本的所有区域,他们将成功消耗重要信息的任务,而不会被界面本身延迟或分散注意力。文本往往是任何网站上的主要信息载物内容,因此消除从访问它的任何摩擦是至关重要的。

Thewebsite uses animations only for supporting graphic elements, rather than on the main areas of text. Quick access to the text content allows users to continue reading without having to wait for the animations to finish.

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

滚动触发的效果只应在第一次启动页面时激活。后续视图(当用户向上和向下移动页面以查看信息),应在不重新播放动画的情况下随时可用。

结论

动画可以是支持品牌和直接关注的优秀工具,但必须与克制一起使用。设计师或开发人员可以热爱大块内容的褪色,滑动或以其他方式转换,但请记住,这些影响妨碍了妨碍而不是提高用户体验。