Do you think your website looks a bit dated and it’s time for a redesign? Browsing the Internet to look for inspiration and latest trends could convince you that livening up your website with eye-catching animations is the way to go. But is it?
The human brain is biologically trained to be attracted by things that move and you can see the desire to capture movement and change in a vast number of artistic creations.
Although the web has started out as a fairly static medium of linked documents, developers didn’t take long to work out ways to introduce moving and blinking stuff to add more spice to web pages.
The big jump in the quality and complexity of animation on the web came with Flash, a software by Adobe. Despite being something of a usability nightmare, Flash allowed developers to do pretty amazing things on the Internet, including interactive games.
Today is a magic time for animation on the web. We enjoy more standards supporting browsers, fast Internet connections, and high resolution retina screens to deliver immersive animated content. Developers and designers have mostly stopped using proprietary technologies to embrace web standards and open source libraries to play animation directly in the browser. Here’s a rundown on what’s out there.
By the middle of the last decade, the World Wide Web Consortium (W3C), the international community responsible for developing open standards for the web, was working on making animation part of the CSS specification. In 2009, they released the first public draft of the CSS animation spec.
Here’s a basic example of CSS transitions and animations on CodePen to illustrate the point:
Enjoy this fantastic collection of Velocity-powered demos.
Head over to Sarah Drasner’s CodePen collection for a taste of what’s possible using GreenSock.
WebGL stands for Web Graphics Library. This fantastic open source, cross-platform piece of technology lets developers create super fast, standards-based animated 3D graphics that run straight in the browser. It’s perfect for games as well as highly immersive experiences like 3D models for architecture, entertainment and art. Think of the educational and scientific uses WebGL makes possible: why not design a 3D human model and then interact in real time to learn about how organs function, cells replicate, diseases develop, etc.
If you’re curious about what WebGL can do, check out these cool Chrome experiments.
When used correctly, web animation can be a compelling tool in the service of your brand and business. Animation brings 2-dimensional objects to look and respond more like real objects, which engages web visitors by interaction and emotional connection.
It’s no wonder that animation is more and more assimilated with user interface design and experience.
Whether applied to small interface components or to the entire page, there are some telltale signs that single out great animation from a botched job. I find Google sums them up pretty well in Material Design, its visual design philosophy for websites and apps:
There are also technical details interaction designers need to pay attention to. For example, calibrating the right type of easing, adjusting the timing of the animation, targeting the most suitable point from which a zoomable icon grows in size when users click on it, etc. If you’re eager to learn more, head over to Google’s Material Design spec dedicated to animation.
In a nutshell, well-executed animation makes sense in terms of cause and effect, flows smoothly in a timely manner, guides visitors and responds to their actions while delighting rather than annoying them.
Nowadays, it’s unlikely you find a website without some kind of animated content.
Next time you browse the web, take note of what really drives you insane with frustration. Is it the choppy animation sequence that takes ages to complete? Is it the scrolling of the page that gets out of sync with what you’re trying to read? Or is it the pop up dialog that gets in the way of the information you’re trying to find?
When a website presents these kinds of issues, visitors are likely to navigate away from its Homepage as quickly as they land on it.
As much as bad grammar and poor quality images, badly implemented animation makes your website look unprofessional. Don’t forget, your website is the public face of your business on the Internet. Lack of professionalism undermines trust and nothing can hurt businesses as much as loss of trust.
But that’s not all. Animation that is not in the service of user experience can hurt your website visitors. It’s been some time since people reported how the aggressive animations and parallax effects present in the iOS 7 operating system of their iPhone and iPad were making them feel sick. This episode raised awareness about people who may suffer from visually induced motion sickness as a result of watching disorienting and large-scale animations on the screen. To learn more about responsible motion design, a good place to start are the Web Content Accessibility Guidelines related to animation.
While you’re looking for an expert to design the right animation effects on your website, consider eliminating everything that moves, blinks, or pops from the page, except for subtle background or color transitions in response to user interaction. Doing so allows your visitors to enjoy the information you provide for them , after all that’s the main reason they land on your website. Also, without distractions, visitors can now share your blog post, subscribe to your newsletter, purchase your product, etc. In other words, they can now focus on those calls to action that are so important to building a relationship with you and learning about your products or services.
Earlier I pointed out core traits of great web animation and how much badly executed animation can alienate and even harm your website’s visitors.
Here I’d like to emphasize this point: great animation is powerful and developers can harness it to attract and guide users’ attention, draw visitors in, keep them entertained and interested.
User experience design has in web animation a strong ally. Animated progress bars while content is loading in the browser, buttons wobbling under a mouse hover, animated sequences to illustrate a complex process, products promptly jumping in a shopping cart as users select them, storytelling that connect customers to your brand, etc. are just a few examples of how you can use animation to improve the experience visitors enjoy on your website.
Give visitors a great experience while they’re browsing your website and you’ll soon have them tweeting about it to their friends and taking whatever action you have planned for them.
In short, awesome UX increases your chances of converting visitors into customers.
To conclude, here’s a piece of actionable advice for you. Next time you have a discussion with a web professional about adding animation to your website, focus on these two questions:
And don’t forget, web animation is also lots of fun!
QA takes work! We use the best tools and processes to make it easier.
Get in touch with your website's SEO health with the best auditing tools