SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
Animation has become an essential part of application design. We may not even notice all the microinteractions such as animated buttons, sliders or loading screens, but they are all there, thoroughly crafted to enhance user experience.
Speaking of the web, animation is not that widespread just yet. Surely, web production agencies make use of website animation—after all, it allows them to show potential customers what they are capable of.
At the same time, most businesses, even if they come from creative industries, are rather slow to incorporate animation into their web design.
Landing page animation today is a great opportunity to stand out, a long-term investment in your brand. It can bring a truly memorable experience to your website visitors, who will then become your customers.
But for this to happen you need to make things right.
In this post, we’ll briefly go through the benefits animation can bring to your website, will go deeper into UX animation techniques you can make use of and finally will list some pitfalls you can come across on your way.
So, without further ado, let’s get started.
Website animation is a versatile tool that can change the way users interact with your landing pages in many different ways. Thanks to the variety of available animation techniques it can be fun, functional or both—it all depends on your goals.
Animation can live up any landing page, so simple page motions can be added just to give your landing page a prettier look and create the right mood.
For example, last winter, SE Ranking created a falling snowflakes animation for our holiday wishes campaign to give our landing page a truly Christmasish feel.
You may take it one step further and make your animation interactive. Then, some objects on your landing page would start moving whenever a user hovers over them with a mouse.
The movement can be really gentle or more noticeable, but it will still add dynamics to your landing page.
Depending on the overall page design and the animation techniques you choose, such aesthetic animation can become a means of embellishment, bring in some fun or support the impression of a top-notch company offering high-end services.
Animation is a powerful tool for telling stories, and people love stories. What they love even more is being a part of the storytelling process, and this is something you can achieve with the help of gamification.
You can use animation in a way to invite your users to interact with your landing page and every such interaction would make the story evolve.
In the example above, a user has to hit the start button on the landing page screen and then press keyboard buttons multiple times to follow the track of an apple that eventually becomes a cider.
So, with this kind of animation, you just need to be creative and think of how you can engage your users into the story of your product.
And if you manage to come up with an original idea, such a playful landing page will surely create a truly exciting experience for your users.
If the product you offer is a software, either cloud or desktop one, you can use animation to let your potential customers test it out right on the landing page.
Create an animated prototype of your product, put it on your landing page and invite users to take a live demo.
By navigating through different sections of the prototype and pressing all the buttons users can get the feel of the product. And it can have a tremendous impact on conversion rate.
In addition to being beautiful, fun and engaging, animation can also be functional and improve your landing page UX. You’ll just have to stick to the principle of semantic animation and treat the motion elements as a part of a bigger whole.
For example, nobody likes waiting for the landing page to load. And that’s the reason animated preloaders exist. If implemented properly, they can turn waiting time into a pleasant and entertaining experience.
From simple loaders to more complex animation solutions you have plenty of options to choose from. And before you make the choice, just take a look at the two loading animation samples below.
The first one is a loading spinner that is based on the agency’s logo.
The second one is more complex: it includes both a spinner and animated letters, basically it includes all the elements located at the top of the landing page and makes them load gradually.
So, ask yourself why do you want to have loading animation on your website? Simply to distract users’ attention from waiting or to enhance the first impression?
Tip: Don’t use decade-old loaders such as dots moving in a circle – they are too basic to distract users and can even make things worse as such loaders are strongly associated with waiting time.
To make the most out of loading animation, try to use these few seconds to start telling the story of your brand. Using animation to present your brand name can help you make a statement from the second your website starts loading.
If you have a lot to tell and show to your users but want to keep your landing page design clean and simple, animation can help you as well. By using animation you can present multiple ideas to the users while using limited screen space.
You can use animated text to fit several messages in a single block. Depending on the message you want to convey, you can animate just one word...
...or the whole sentence.
The same goes for visual elements—moving picture slideshows can help you demonstrate many pictures at a time without grabbing too much space. It may be really game-changing if you have a photography project like the one below.
When using animation for this purpose, you give users a choice: to spend some time reading all the messages and watching all the pictures or to keep scrolling.
In the case of pictures, chances are the user will not stay long enough to watch them all unless the pictures themself are truly captivating. After all, slideshows are not a new thing.
At the same time, animated texts look fresh and because of that, they are still attention-grabbing. So chances are that users will, after all, read them all.
Tip: Make sure the speed at which texts or pictures change each other allow for easy reading/perceiving.
Animation allows for fancy navigational transitions. For example, as you scroll down the landing page each new section can make a bold appearance as its elements load gradually in an animated way.
Such animation adds dynamics to the landing page and allows you to focus users’ attention on some most important elements.
To make it clear for the users that an object – like a picture or an icon – is clickable, you can use hover animation. The movement can be rather gentle like in an example below where the panel with the page name starts sliding slightly up when you hover.
Or you can make the hover trigger more complex animations like in the following example.
Tip: When creating animated navigational transitions, make sure animated elements do not load for ages forcing users to wait.
Also, keep in mind that hover animation works perfectly well on a desktop, but you may have some issues with mobile devices as there we have no cursors and all the actions are triggered by taps.
This is something your developers will need to care of so that mobile users get unhindered experience when visiting your landing page.
Animation can be used to draw attention to important page elements and encourage users to perform an action. For this purpose, you would animate the object you want users to focus on while leaving all the objects around it non-animated.
You can animate buttons, forms, their elements, or any other object that would make users notice something you want them to spot.
In the example below, just the three dots after the CTA message are animated, but as the button is placed on a sticky header menu panel, it grabs users’ attention wherever they go across the website.
In the following example, the moving figure of an astronaut encourages users to play the showreel.
Tip: There’s a fine line here between being noticeable and being annoying, so bear it in mind when animating objects for attention-grabbing.
If some of your landing page elements encourage users to perform an action – like filling in a contact me form or signing up for a newsletter – animation can be helpful at giving them visual feedback.
In the example below, once you press the Send button of the newsletter subscription form, the button name transforms into Processing providing visual feedback. Nice, isn’t it?
But you can go even further. Let’s say you created a rate-us page for your NPS survey. With the help of an animation, you can make the rating process interactive and even fun, if you create a rating widget similar to this one by Darin Senneff.
So, animation is a creative alternative to the standard visual feedback such as “Thank you for signing up” message. It offers greater reinforcement because it looks fresh and unusual.
Tip: Nothing should go wrong here, just come up with some appropriate image and animation style that resonates with your brand.
Now, let’s go a little bit techy. The thing is all the techniques described above will only work if you do things technically right with respect to the basic principle of animation.
Violating these rules can make the animation work against you and kill your animated landing page UX.
From following some of Disney’s animation principles to considering device compatibility, here’s what a motion designer needs to bear in mind to make animations look convincing.
You want your animation to look natural, which means you need to make your moving elements obey the rules of physics. And one of these rules is avoiding linear movements, as they look mechanic and artificial.
In the physical world, an object either starts moving slowly and then speeds up or starts moving quickly and then slows down.
Make your animated object move the same way to achieve a more natural look – in animation terms this technique is called easing.
Another important motion rule taken from the physical world around us is moving objects along the arcs. So to look natural, your motion element should follow an arc as they move.
If your animation includes several elements, don’t make them move simultaneously. Because if you do so, users will try to follow all the moving objects jumping from one element to another.
As a result, they will suffer from cognitive overload, and may not even grasp the idea you were trying to convey.
Now, take a look at the animation sample below.
It violates all three rules with all the objects moving simultaneously in an artificial linear manner.
And here’s the same animation done right. Objects are animated one by one, which makes things easier to grasp. Elements here are moving in arcs easing in and out.
This animation was designed for SE Ranking’s Page Changes Monitoring landing page to better explain how the tool works, and thanks to the proper transition choreography, it performs its function perfectly well.
When you animate several objects, their motion should be perceived as a flow guiding users’ attention in one direction.
So, if you have several elements placed horizontally in one row (like in the example above) or vertically in a list, and they are equally important, such elements should appear one by one at the same pace.
But what if you have a big collection of objects with several rows and several objects in every row? It’s more complicated as, in this case, the user’s focus should be directed diagonally.
To achieve this effect, make objects move from the top-left to the bottom-right corner.
Another crucial factor is the duration of animated motion. It shouldn’t be too fast so that users could notice the transition, and it shouldn’t last too long not to force users to wait.
According to the research, optimal timing is between 100 and 500 ms, as the human brain cannot recognize any motion faster than 100ms.
So, which one between 100ms and 500ms should you choose? The general rule is the bigger is the object and/or the distance it needs to pass, the slower the animation.
And speaking of the distance, you need to bear in mind the type of the screen where animation is reproduced.
Mobile devices and desktops are placed here at the edges of the scale with the fastest pace being recommended for mobile devices because of the smaller screen space.
For tablets, a bit slower pace is more appropriate and when animating for desktops, you’ll have to slow things down even more.
This last rule is not really the animation principle. It’s a precaution to resist the temptation to use all the animation skills at once.
The right approach would be to pick the animation style that suits best the brand identity and stick to it across the website.
Using different animation styles on different landing pages makes a website look incoherent, so try to avoid this. Besides, not every animation effect will suit every brand.
Bounce animation, for example, looks great, but using it when animating a website of an insurance company may be not such a great idea.
Whether you’re adding animated graphics to your landing pages or coding the animation into your website, consider each of these fun animation types and animation principles before diving in.