Key points:
- The ability to animate web pages has never been easier.
- It is almost invariably impacting conversion.
- Be subtle at best and always with an eye on UX.
Flipping a web page on its head, shaking it and exploding your images into shards all sounds great until you peer through the lens of UX.
Conclusion: Dial the animations back and focus on Accessibility instead.
Fancy animations and scroll effects are so easy now.
The various design tools and front-end tech stacks available today are phenomenal in terms of the ease with which fancy animations and scroll effects can be achieved.
Tools such as Figma, frameworks such as Webflow, and the latest JavaScript animation libraries such as Anime.js enable designers to create visual effects, animations, and transitions that genuinely make UX and UI pop.
While we should clap for technological advancement, are we enabling designers and front-end designers to easily tank conversion with all this animation and movement?
I suspect so.
Scroll-jacking is an absolute felony.
We must get our definitions right here before there is a pile-on.
I am not referring to animated videos in this article. There is consensus that video and animated video can play an important role in conversion: users engage with video and such animations, which can be a great way to educate, inform, and excite.
I’m also not necessarily talking about transitions; distinguishing between transitions and animations is essential.
Transitions are fine and can play a good role in informing actions and supporting the UX. Transitions can help focus and guide users on actions, essential information and CTAs.
Animations.
Animations that add no UX value take up time and distract are simply that.
Visually impressive yes, arguably brand-building too (though I’ll come to that later), though distracting from the user’s intent and goal.
Scroll-jacking
Scroll-jacking techniques such as parallax scrolling are true UX violations.
For example, media companies often use parallax scrolling to showcase full-screen, interstitial ads while you read a news article. Of course, they do this not to improve the reading experience but to improve the viewability of the ads, a metric critical to ad-supported business.
Parallax scrolling changes the speed and nature of scrolling, and that goes against Jakob’s Law (a fundamental Law of UX) which instructs that you shouldn’t screw with the expectations of users.
And that is precisely what parallax scrolling does.
Scroll-jacking really takes off when, suddenly, the page stops scrolling and moves horizontally instead.
The opposite of what you expected or wanted. Completely disorienting, like being asked to walk sideways.
You also inherit slower load times and issues with SEO, as crawlers cannot properly index your content.
Tell me, how does this intrusion - nobody asked for- for help conversion?
And no, I do not buy that such atypical, unexpected or creative jolts to the user experience are a positive wake-up call to users: they’re a jolt and jolts should be limited to amusement rides, not web pages.
eCommerce sites don’t use fancy animations and scroll effects because they’re bad for business.
In my industry, we often point to Amazon or AirBNB as proof of what to do or not what to do.
My argument that unnecessary animations and hijacked scrolling are harmful to conversion comes from three theories:
- I am yet to see data that points to improved conversion from animation and scroll-jacking. Which is not to say I have data to the contrary, though there are stats on everything and I have never seen any stats point positively to animation etc.
- eCommerce websites don’t do it. And I am willing to bet that if Amazon saw a 0.001% upside, it would do it. Though it doesn’t.
- Animations and scroll-jacking absolutely impacts Accessibility and impacting Accessibility absolutely impacts conversion and not only for those that rely on it to interact with your website.
Your budget for Accessibility should come from your animation budget.
Accessibility is just good practice aside the legal and moral imperatives that websites must be accessible.
Accessibility means a person with a disability has the same opportunity to access your content, interact, and otherwise have the same enjoyment as someone without a disability such as vision impairment or epilepsy.
There is a sliding scale of Accessibility requirements, and typically, you would choose where on the scale your website sat, depending on your primary audience:
- Must do (A)
- Should do (AA)
- Could do (AAA)
Whilst it is true that the further up the scale you go, the more demanding things become, the payoff is remarkable.
If you have ever engaged with a Level 3 (AAA) website - and I have only ever worked on one - the usability is insane. It is brute usability.
Links are underlined and properly labelled. The content is purely legible and with good contrast. If need be, pages can be enjoyable to access through a screen reader.
Designers hate underlined links because they look so 1998.
But underlined links are clickable and without them, nothing is immediately clickable.
And that simply isn’t optimal usability, which will impact conversion whether your user is vision impaired or not.
Moreover, animations and scrolling effects are exclusionary by definition. Their use will disadvantage at least some part of your audience.
So why do we do it?
Because we can: the tools we have today have lowered the bar so much that we seem to have largely lost sight of the progressive, overuse of animation in contemporary web design.
Because it looks cool.
Because clients ask for it.
Because it makes us look cool.
Because we have taken our eye off conversion.
Not all businesses are eCommerce businesses. The argument might be those animations add a premium feel that elevates a brand and the experience it is trying to extrude.
Indeed, where I point to Amazon and Airbnb, you could also point to Apple and their use of animations.
But Apple is Apple and it isn’t comparable to anything else. Apple can get away with it.
Doing things because a digital agency or client thinks it is cool should not be the yardstick for doing them.
They’re definitely impacting conversion.
Should we do it at all?
I believe that subtlety and relevance are the two keys here:
- Is my animation subtle such that that it is not distracting?
- Is my animation relevant to helping users:
- Focus on a task or piece of content.
- Understand cause and effect.
If my animation, however, takes away from Accessibility, the answer should be no, or modified in a way that it doesn’t take away from Accessibility.
As I stated previously, I have no issues with transitions when they are done right. Transitions can add to good UX.
If you can experiment, absolutely do so and let the data inform your direction. Please tell me the results!
Though finally, whilst it isn’t the hill I am prepared to die on, the answer is always no to scroll-jacking.
What about infinite scrolling?
Infinite scroll is where a page scrolls indefinitely, eliminating the need for pagination.
Infinite scrolling ultimately comes down to your site, your content, and how you handle it: Do your pages load new content infinitely or only after a user clicks ‘Show more’?
I think the biggest argument against infinite scrolling is cognitive load.
We simply tire after a period.
Eye-tracking tests have repeatedly shown that as we scroll, we become less focused, which increases the risk of taking users away from their initial goal.
Infinite scrolling also comes with other downsides:
- Finding previously seen content can be difficult.
- The obvious inability to literally access the end of a page.
- Inaccessibility issues.
- Heavy and heavier pages.
- And poor SEO outcomes.
On the upside, infinite scroll reduces interruptions and interaction costs, especially on mobile.
If you’re a social media company, go all in. Users don’t have a goal and probably don’t scroll back up to find something they previously saw.
Anything else, proceed with caution.
.png)
© the product agency 2021-2024 | Sydney, Australia | Privacy Policy | Terms of use