The modern attention span is going down faster than Facebook stock, and the design solution is simple: throw all the bells and whistles at your web page to keep audiences tuned in.
People like shiny things… and things that move… and things that respond! So, lots of animations with every interaction should increase engagement, or that seems to be one mantra. Research, however, indicates that using animations incorrectly can have a reverse effect on your traffic and bounce rates.
A recent usability study out of the Nielsen Norman Group shows that scroll animations and other visual effects can negatively affect user perception of your brand and website.
Users dislike scroll animations and widget effects that slow down their consumption of information. In fact, the negative impression caused by misplaced carousels, scrolls animations, and widget fades coincides with the same negative effect of slow load times. Users don’t differentiate between a lapse in consumption caused by technological shortcomings or design choice.
This is not to say that all scroll-triggered animations, and certainly not CSS animations, should be avoided for the sake of usability. It does mean that there are certain best practices to keep in mind when implementing them.
Consider the Context
No one appreciates the process of taking out a second mortgage. When users are processing information crucial to their financial or physical well-being, they don’t want to be distracted by all kinds of design innovations. Straightforward and to the point is the goal here.
Entertainment, fashion, and leisure are contexts where users are more willing to sit back and be delighted with novel interactive aesthetics. It shouldn’t come as a surprise that industries driven by design use innovative web design practices.
Avoid the Main Body
The design of a scroll-triggered fade-in supports information – blurbs and tid bits. Similar to hover-over animations, scroll triggers work well with peripheral information to greet users paying extra attention. When scroll triggers or any other interactive design aesthetic is applied to the main body of the text, it becomes a nuisance.
This approach tackles the ageless challenge of pacing in writing. While many writers would cherish the opportunity to dictate how fast someone should proceed through their writing, in practice, people don’t like being restricted in their reading pace. Fast readers don’t want to be bogged down by a text fade every other paragraph.
Pull the Trigger Once
The comparison of scroll-triggered to hover-over animations has its limitations. The nature of a scroll trigger means that it’s unavoidable and part of a planned progression through a piece of content. So what about when the user goes back?
Don’t do it again.
It’s common to bounce between sections of text, especially in longer pieces with technical concepts. It doesn’t help user engagement to go through five scroll triggers to get back to a term that they lost track of halfway through your piece. Trigger the animation once, and let it be.
CSS Animations en Masse
Some of these pitfalls to scroll-triggered animations apply to CSS animations as a whole, which may have you considering the utility of these animations altogether. As with any aspect of design, it’s true that poorly-placed and poorly-thought-out implementation can hurt your brand, but that’s never a reason to avoid creative approaches to web design.
In fact, there are plenty of contexts in which animations will help with engagement. Some examples include:
Loading sequences: This is a perfect opportunity to showcase some of your CSS skills. High-traffic and data-dense websites require some load time, and since your user is already in-store for a wait, a loading sequence can add a fun anticipatory element to the experience while showcasing your brand. Just don’t accidentally banish your users to the land of the eternal loading screen with bad coding.
Task Feedback: Every once in a while, static forms fail to provide adequate feedback to indicate a completed task, and users must resubmit forms ad nauseam. A quick “thank you” animation or “submitted” pop-up can indicate that your user has completed a task with the added benefit of a Pavlovian treat.
Scroll Prompts: Redirecting within the same page through links is a hit-or-miss practice because it isn’t always clear when it occurs. When a user clicks a button on the navigation bar, s/he expects to be navigated to a new page. You can leave your users feeling frustrated when nothing starts loading. If you’re determined to use the nav bar for on-page navigation, a coinciding animation can help provide feedback to your user regarding what’s going on.
From Gmail to Spotify to Uber, intentionally-placed and subtle animations are an industry standard in web design and app development. Used correctly, these type of aesthetic elements can enhance brand perception and add a fun creative twist to tasks as simple as checking your email or hailing a ride on the weekend. Much like your impetus for hailing that Uber, a similar principle applies to employing CSS animations:
Use responsibly.
