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

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

虽然延迟的原因完全不同,但这些效果相同:用户挫折和用户体验不佳。

动画添加到美学

动画通常用于吸引注意力对某些界面要素,以及创造现代和创新的印象.微妙的动画和过渡效果可以增加视觉兴趣,并积极影响用户的感知价值品牌 - 只要他们不是争吵或迷失方向,并且谨慎地使用以及在适当的地方使用。在这些情况下,良好的动画可以增加界面的吸引力,从而利用审美可用性效应

滚动触发的动画最近变得流行,但 - 像许多趋势 - 它们可以很容易地误用或过度使用。完成时,这些动画意味着创造快乐相反,令人作呕:用户被迫等待页面“加载”文本。(他们也证明了这个限制用户对技术的了解.人们不一定区分 - 由于视觉效果导致的实际系统延迟和延迟,也不应该 -

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

让我们清楚:并非所有滚动触发的动画都不糟糕。微妙的经常在我们的研究中忽视(或对) - 包括上述过渡效应的例子科学与工业博物馆地点。良好的滚动触发的动画不应过分引起远离内容和界面本身的注意力。设计适当的动画是一个平衡在使其明显不引人注目之间,因此它不会分散目前的任务或令人讨厌或重复的注意力。

3滚动触发动画的指南

1.考虑上下文。

如果您想要为文本使用滚动触发动画,请考虑该网站的整体目的以及大多数访客的最佳任务。支持高利害任务的网站(例如,医疗或健康,财务,B2B站点)迎合观众,这些观众是专注的,并通过使它们浪费时间的“可爱”设计特征轻松恼火。以任务为中心的用户不想被哇哇哇哇哇哇哇通过网站,他们想要得到答案。

另一方面,在娱乐,艺术,电子商务或类似浏览网站之类的休闲网站上,访客可以将滚动触发的动画视为意外和愉快的视觉。例如,浏览上述博物馆网站的参与者没有搜索任何特定信息,而是只是浏览,看看博物馆必须提供哪些类型的显示。

在任何一种情况下,重要的是要考虑用户在整个网站典型旅程中遇到这些动画的频率。在滚动一个长页面时看到过渡效果可能是一次甚至几次令人愉快的惊喜;但是在多个页面上多次看到它很快就会重复,并磨损用户的耐心等待。因为动画依赖于间接触发 - 滚动页面的行为 - 因此远离用户的直接控制,对过度使用它是谨慎的。虽然每个动画可能只能尽量微小地减慢用户,但许多这样的动画的效果将变得越来越明显。(请记住,即使是一个额外的第二秒就足以让用户注意界面的延迟响应时间,并觉得它们处于系统的怜悯。)

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

要减轻滚动触发动画的风险,请使用它们其次,支持内容而不是正文.当以这种方式应用时,人们不会被迫等待每个文本区域为“完成加载”,以便继续阅读,但保持整体视觉审美福利。

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

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

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

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

结论

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