30 Mar How to Create Animated Landing Pages Without Killing the UX
How to Create Animated Landing Pages Without Killing the UX
From simple sliders to animated buttons but landing pages are definitively animated.
However, web designers have to find a balance in animation, as too many micro-interactions result in less responsive pages.
On the other hand, a landing page without animations can prove tedious for visitors.
Therefore, you should find a way to create animated landing pages without killing the UX using innovative animation techniques.
Overcoming spatial restrictions
Animation is perfect for website owners who have a lot to show to their customers but are facing spatial constrictions in the digital realm.
Cramming all the data and images into a single page won’t make the page clean and simple, which is the ultimate goal of a solid SEO strategy.
When you choose to use animated text, you can fit several messages in a single info block.
It is up to you whether all the words or just a single letter will be animated.
Visual elements function in the same manner. A picture slideshow is better than a single still image, no matter how large it is.
Freedom of choice
Furthermore, animations give users a choice when the material is abundant.
They can either take their time reading and looking at a particular photo, or they can idly scroll through all the slides at once.
Without animations, visitors would be forced to watch what you have chosen for them.
Since you are giving users a choice, you have to your best to upload moving visuals.
Images, for one, have to be high-res and captivating to draw the visitors’ attention.
The animated text should be equally attention-grabbing but not too tacky.
Animated online demos
You can use animations on landing pages for all sorts of products and services.
However, if you sell software, then an animated landing page can double as a testing platform.
Upload an animated prototype of your product and allow potential buyers to take a live demo.
As users navigate the product, testing its various features and soaking in the visuals, you can expect the conversion rate to soar.
Even if you don’t sell software, you can put animations to good use. For instance, an online game is a great way to award website visitors with a free coupon for your products.
Gamification of storytelling
Games on animated landing pages are of particular interest to children, so candy manufacturers often use them to increase sales.
Animations are great for games, but they are also suitable for storytelling. Namely, people love stories, so why not address them in this fashion.
For example, if you run a brewery, upload an animated story of how barley gets processed into beer bottles ready for sale.
These animations are fun to watch as they have a straightforward plot and a tagline at the end.
However, the best use of animations for storytelling is gamification.
Namely, the animated story should stop at some point, offer the user to interact with the landing page.
This could be a trivia question or a puzzle, just enough to fuel the visitor’s interest in the content.
“Loading…”
If there is something children hate when playing games, then it’s the “loading” screen, regardless of how short it is.
Luckily, you have animations at your disposal to make the wait fun. In this sense, landing page animations are highly functional, as they help improve UX.
Paradoxically, animations are suitable for webpages that take ages to load.
In the case of slow-loading pages, you can utilise pre-loaders.
When implemented correctly, such animations make visitors forget entirely they are waiting for a page to load.
Thanks to carefully created animations, you won’t lose any potential leads.
What is more, these waiting animations can further strengthen online brand recognition.
For instance, an animation can begin and end with the company’s rotating logo.
Simplicity is the key
As you have seen from the example of the rotating logo and mini-games, animations on the landing page don’t have to be intricate.
It would be best if you could make them as simple as possible. For instance, a winter theme can consist only of snowflakes falling across the screen.
Instead of complex animations, design an interactive landing page.
When visitors hover the mouse cursor over a particular image, it should come alive, i.e. contain an animation.
This movement can be inconspicuous, or it can be sudden and attention-grabbing.
If you aim for a dynamic landing page, then go for noticeable animations to grab a visitor’s attention.
You should think of individual animations as embellishments, just like manuscripts were once illuminated to grab the reader’s attention.
Objects ought to move one at a time
The trick to generating the perfect animation is to make it appear as natural as possible.
You achieve this by making all of the moving elements obey real-world physics laws as much as possible.
For instance, linear motions are rare in nature, so they will always feel artificial and mechanical.
Few things in nature speed up in an instant.
Therefore, animations should have a short transitional period in which a letter or figure gains speed, i.e. starts moving quickly.
The same is valid for slowing down and coming to a halt.
The proper term in animation for this process is easing.
Instead of using linear trajectories, go for arcs.
Everything in nature moves in arcs, and so should your animations.
More importantly, don’t animate several objects at the same time.
The human eye is not fast enough to follow several independent movements, so you will baffle visitors instead of impressing them.
How to approach CGI
Computer-generated imagery (CGI) is abundantly used in movies and the gaming industry.
However, your animated landing pages can be significantly improved if you find a reliable CGI company to apply computer graphics to create stunning imagery.
CGI is a developing industry predominantly associated with the use of 3D computer graphics from simulators to commercials. However, landing page animations can benefit from 2D models as well.
These include animated characters, special effects, and even whole scenes, such as the storytelling above.
Keep in mind that the laws of physics do not constrain computer-generated imagery, so don’t exaggerate.
Visual feedback is more straightforward than you think
Providing feedback is one of the most challenging parts of designing a digital marketing strategy.
An animated landing page can help here as well since feedback can be visual.
Namely, if any of the landing page elements are interactive, i.e. they prompt users to fill out a form or move a slider.
Visual feedback can instantaneously inform them if they did things correctly.
These feedback animations can be intricate, but it’s best to keep things simple, as mentioned earlier.
For instance, if you have a mascot or an anthropomorphic logo, it can advise shoppers whether they have filled out the order correctly.
These animations are so simple that users and even website owners fail to notice them at all.
Essentially, every time you send a message on a messaging app, the transition from “send” to “send” is a micro animation.
Every time visitors are asked to input any data, from rating your service to simply entering their e-mail address, they should be “rewarded” with a likeable animation.
This will keep them interested as the number of dropout leads decreases.
Animated Landing Pages are Excellent Attention Grabbers
We have already mentioned that you can use animations to grab a user’s attention instantly.
Web designers use landing page animations to draw the visitors’ attention to essential elements, such as the discounts banner or an action button.
In this sense, it is crucial which landing page elements are left unanimated. When you want to point out an animation further, all of the surrounding elements will stay inanimate.
This way, when someone opens the landing page, they will immediately focus on the animations, regardless of how simple they might be.
What can be animated?
When you think of a typical web page, there isn’t an element that cannot be animated.
One can animate buttons, various elements of forms, menus, links, videos, etc.
The complete list is endless, as all is fair in the struggle to grab the user’s attention.
We should point out once more that just because you can animate pretty much anything on the landing page, this doesn’t mean that you should.
However, there is a fine line between being interactive and becoming plain annoying and irritant.
If there is too much animation on a web page, visitors will leave; don’t doubt that for a second!
Another benefit of animated landing pages is that it enables impressive navigational transitions.
A typical example includes gradual animations of new web page segments as you scroll down.
This is how some of the most iconic Windows screensavers used to work back in the day.
These transitional animations make the landing page more interactive, and more importantly, they add dynamics to the whole website.
Animations act as guides that help users navigate the landing page.
The ups and downs of hover animations
Hover animations, which we partially covered when we spoke about animation simplicity’s importance, are commonly used navigational tools.
When users place the cursor over an actionable button (an image or an icon), they will start an informational animation.
The best thing about hover animations is that you needn’t write any text like is the case with Windows (place the mouse cursor over the status bar and wait for the dialogue boy to appear).
Animations can turn a button green, light it up, and even make an affirmative beep.
The only thing that can go wrong with hover animations is the waiting time.
Namely, when large-scale landing page animations lag, users might stick around to wait (or not). When a hover animation fails, on the other side, users lose out on valuable information.
Also, there is cross-platform compatibility, as hover animations might have trouble loading on smartphones and tablets.
Laptops and desktop computers aren’t a problem, but when mobile devices enter the equation, you better have a skilful developer and graphic designer working for you.
Staying with the flow
Another important segment of landing page animation is the order in which elements are revealed.
Animating several objects (but not simultaneously) means that their motion should be perceived as part of a flow that guides the users’ attention to the desired content.
One example of this animation technique is when you have elements placed horizontally in a row or follow one another in a vertical column.
Sometimes, when there is an extensive collection of objects, they can be displayed diagonally.
It will prompt the user to look at the centre, i.e. the bullseye.
Getting the timing right
In general, animation is all about timing.
The duration of animated motion is influenced by many factors, as it shouldn’t last too long, so users have to wait prolonged periods, nor should it be too fast, so users don’t see anything.
The optimal transition time for a single image is anywhere from 100 to 500 milliseconds since the human brain finds it hard to recognise motions faster than 100 milliseconds.
Any motion lasting up to 200 milliseconds is considered fast.
The golden rule of animation suggests that the bigger the animated object, the slower the animation.
The distance the object has to pass also plays the role, as the greater the distance, the slower should it be animated.
As mentioned earlier, mobile-friendliness plays a significant role in the timing of animations.
If you know that users will assess your website via mobile platforms, then create slower animations on the landing page, over 200 milliseconds.
There is nothing worse than a landing page animation that is poorly executed.
Such sloppiness will hurt the overall UX of your website, so you have to act fast.
From timing animations just right to hiring professionals to take care of CGI, we have listed the top 15 actions you can take to have killer animated landing pages.