It is a long-known usability issue that slow loading times annoy users and affect their perception of the site and the organization. When time is precious, even the smallest delays in getting needed information as quickly as possible can become frustrating.
Slow response times are often due to loading large images, fancy widgets (such as banner carousels), or server delays due to complex data processing. However, in a recent usability study our participants were slowed down for a completely different reason: a visual effect that caused the main text content to animate into place only after the user had scrolled down to that area of the page. In the words of one participant: “I don't like how everything comes together when I’m scrolling down. … I hate that it has to load every single section. Sometimes I just want to see information there without having to see a cool little movement.”
While the reason for the delay was entirely different, the effects were the same: user frustration and a poor user experience.
Animations Add to Aesthetics
Animations are often used to attract attention toward certain interface elements, as well as to create a modern and innovative impression of the brand. Subtle animation and transition effects can add visual interest and positively impact the user’s perceived value 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 the aesthetic-usability effect.
Scroll-triggered animations have recently become popular, but — like many trends — they can be easily misused or overused. When done poorly, these animations meant to create delight are instead annoying: the user is forced to wait while the page “loads” the text. (They also demonstrate the limits of the users’ knowledge about technology. People don’t necessarily distinguish — nor should they have to — between actual system delays and delays due to visual effects.)
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 the Museum of Science and Industry site. Good scroll-triggered animations should not unduly draw attention away from the content and toward the interface itself. Designing an appropriate animation is a 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.
If you’re tempted to use scroll-triggered animations for your text, consider the overall purpose of the site and the top tasks of most visitors. Sites that support high-stake tasks (e.g., medical or health related, financial, B2B sites) cater to audiences that are goal-focused and easily annoyed by “cute” design features that make them waste time. Task-focused users don’t want to be wowed by a website — they want to get answers.
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.
In either case, it is important to consider how often these animations are to be encountered by a user in the typical journey throughout the site. Seeing a transition effect while scrolling down a long page might be a pleasant surprise once or even a few times; but seeing it multiple times on multiple pages quickly gets repetitive and wears down the user’s patience. Because the animation relies on an indirect 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 response time, and feel they are at the mercy of the system.)
2. Use scroll-triggered animations for secondary content.
To mitigate the risks of scroll-triggered animations, use them for secondary, supporting content rather than for the main bodies of text. When applied in this way, people are not forced to wait for every area of text to “finish loading” so they can continue reading, yet the overall visual-aesthetic benefits are maintained.
If users can read all areas of text without any artificial load time, they will succeed in their task of consuming important information, without getting delayed or distracted by the interface itself. Text tends to be the main information-carrying content on any website, so it’s critical to remove any friction from accessing it.
3. Ensure that any animation triggered by scrolling only occurs once.
Scroll-triggered effects should only be activated the first time the user navigates down the page. Subsequent views (as the user moves up and down the page to review information) should have all content readily available without re-playing the animations.
Conclusion
Animations can be an excellent tool to support branding and direct attention, but must be used with restraint. Designers or developers may love the look of fading, sliding, or otherwise transitioning in large chunks of content, but remember that these effects risk getting in the way rather than enhancing the user experience.
