This topic cropped up recently with a customer that had a preference for stationary websites without movement, and we thought it made a good topic of conversation. Are website animations pointless, or do they serve a purpose?
We’re very much of the view that animation is an essential part of delivering a modern website experience and an standard of interface that people expect, we’ll attempt to explain why though and go through and exceptions that prove the rule.
Engagement
The internet is full of websites, specifically it’s full of websites attempting to grab your attention so you use them over similar competitor sites. Anything you can do to grab the visitors attention is a good thing. Bland websites are boring, people don’t enjoy or remember browsing boring websites.
By adding movement on a site you can draw attention to specific areas, points or features. Maybe you want to highlight you top 3 services on your homepage? Even a subtle animation here would ensure the visitor is immediately drawn to them.
Fun
Do you have a brand that’s fun and energetic? Perhaps a thoroughly modern company that embraces technology? Using animation is a great way to further convey the core ethos of a company if used correctly.
For an example of this in action, take a look at the Apple iPhone 12 page: https://www.apple.com/iphone-12-pro/key-features/. As a lifestyle brand Apple does a great job of conveying the selling points of the product while making you want to scroll down to see what other interesting features / animations / videos are there.
Depth
You can use more subtle animation to give the illusion of depth and substance to a site, fooling the eye into thinking that it’s more than just a flat 2d visualisation. The first mainstream site to do this was the award winning Nike “Better World” microsite (https://www.awwwards.com/sites/nike-better-world).
A parallax layer is basically an element that scrolls at a different speed to the rest of the content, in the case of Nike they used it to float trainers that scrolled more slowly than the page content. This was a great eye catching effect (from 2011) and still very common on the Internet today. You’ll often see it used on background images for extra depth.
We love to play with parallax effects, they can be incredibly effective in capturing the interest of visitors. Take a look at our website “Our Process” page that uses animation to make the whole experience a lot more interesting: https://darkcherrycreative.co.uk/websites/our-process
When to avoid animation
Although it’s great and fun, there are times when a flat page is best. Examples of this include:
- Statistical data
- Tables
- Websites where a “straight-laced” corporate tone is the aim
A special mention should also go to the “prefers reduced motion” (https://web.dev/prefers-reduced-motion/) setting present in modern web browsers. Ideally sites should honour this request if visitors don’t like movement. An example of this would be for epilepsy reasons, movement of pages could be found to be nauseating if it’s too extreme. Well worth considering if you’re considering some bold movements.