When you think of animations, what’s the first thing to come to mind? Is it the Sunday cartoons that children watch?

If so, you’re right — but that’s not the type of animation this article is about. This article goes over animating websites, mobile applications, and more. Adding animations to your digital marketing strategy can increase conversion rates, help with user engagement and retention, and decrease bounce rates.

What is animation?

In the marketing and design context, animation can include animated videos for promotion or animated elements on a website to enhance it. 

Some examples of how animation is used in web and mobile design include:

• An animated loading page, with a circular icon moving around
• Animated transitions when you move from one page to another
• Microinteractions when you hover or click on a button or when you pull down a page to refresh
• Animations showing the process such as a loading bar showing how long a page loads
• A decorative animation to enhance the aesthetics of your design
• Prompting the user to take an action, like an arrow pointing to a call-to-action (CTA) button
• Animations providing feedback for users, showing if they’ve performed actions incorrectly by displaying warning animations for invalid actions

Why is animation so important?

Animation can enhance your website and make users notice things they previously ignored. 

If you’re getting low conversion rates and users aren’t clicking a call-to-action (CTA) button, perhaps you can animate the button to further enhance it. This draws attention to your call-to-action and can lead to greater conversion rates.

Animations can also make your website or mobile application easier to navigate. It can show when a button has been clicked. This provides clear feedback for the user and can enhance further interactions, especially when the user is provided with clear expectations from animations of what to do next. 

Animations also tell users what has happened — if the user swiped to get somewhere, an animation could make it feel like the user is actually moving something, imitating the real world’s authenticity instead of simply blinking onto a new page. 

Lower bounce rates are possible with good animation. Animating pages makes your website or mobile application more unique, standing out from other non-animated competition. Because your website is more unique and engaging, users may want to stay on it more, which lowers bounce rates. 

One example of this is using a fun animation as a loading page — instead of clicking away or closing the tab, users are more likely to watch the animation. This increases the amount of fun and engagement they have, which can enhance the overall user experience.

One thing to be careful of is not to overdo the animations — having simple animations when a user clicks a button can enhance the user experience. However, overloading the user with many complex animations can make the user confused, distracted, and overwhelmed. Long, complex animations can also contribute to greater loading times, and users may get impatient and leave, increasing the bounce rate.

Interested in optimizing your digital marketing strategy? Let us do it for you.

The right way to use animations: steps and best practices

Do your research

Check out your competitors — are there animations on their websites or mobile applications? If not, do some research on what works best for websites outside of your field, and if the same type of animation could work for you.

Another important type of research is user research. Talk to your users — find out what they want from your website or mobile application and how you can improve it to give them what they want. Here are some questions you can ask your users:

• When you think of my brand, what do you think of?
• How would you describe my brand?
• Navigate through my website/mobile application. What was easy, and what was difficult?

Create guidelines

After researching and ruminating upon your brand’s personality, it’s time to create guidelines for animation. Instead of using “standard” animations, you can customize them to reflect your brand. For example, some brands are playful, and their animations are bouncy to reflect that. 

Your guidelines should state whether your brand’s animations should be simplistic and smooth or flourishing and grand. You can tailor small animations slightly to reflect this in implementation.

It is important to emphasize here that you should be pragmatic — just because something looks good or you like something doesn’t mean it will make navigating your website or mobile application easier for the user. 

For example, in your guidelines, you can mention that specific animations can or cannot be combined with other animations. For example, if rotating an element is too flashy, say that it cannot be combined with moving — an object or button on your website cannot move and rotate. 

However, things like scaling — moving elements to be a greater or lesser size — can be combined with other elements. Combining scaling and movement is doable because it can occur in a smooth motion and can mimic real life interactions and movement. Opacity is another animation type that can be combined with other animations to give the user a more dynamic experience.

You’ll also want to be mindful of the size of each screen that your user is using. For example, if the element is large and it covers a greater distance, the duration of the animation would be slightly longer than if the element was small and covered a short distance. 

The duration of your animations can also depend on how simple or complex each animation is — a simple motion such as colour changes has shorter duration than a complex motion like page transitions. Usually, the optimal speed for animation is between 200 and 500 ms, because animations shorter than 100 ms will not be noticed and animations longer than 1 second would seem like a delay.

In your guidelines, be sure to state which animations can be combined with other animations, and consider the duration of each animation depending on screen size as well.

Check out material.io for more details about understanding motion in animation.

Test it out

Now, you can create some animations and test them out. There are three main easing curves in animating websites and mobile applications that cover your essential needs. These curves ensure that your animations are more like real-world motion rather than mechanical robot-like movements.

The first curve is the ease-in curve, which accelerates as it begins movement. Imagine it like a car that starts up then accelerates out of the driveway. You can adjust the speed of the acceleration to match the guidelines you’ve outlined. For example, if you wanted your animations to reflect your brand’s minimalistic, straightforward style, then creating an ease-in curve that gets straight to the point is better than making one that starts out a lot slower and accelerates very quickly at the end.

The second curve is the ease-out curve, which is the opposite of the ease-in curve. This one is like a car pulling into the driveway — it starts out fast then decelerates to a stop. This animation helps bring elements into view.

The last curve is the ease-in-out curve. This one combines features of both the ease-in and the ease-out curve, and it moves elements from one area to another, similar to a car going from one stop to the next. You can see this animation in use when you click a button and it expands into a screen.

By testing these core animations, you can form an easing hierarchy. Similar to a type hierarchy, the animation that attracts the most attention would be at the top of the hierarchy. These types of animations would ensure that a certain element stands out more, emphasizing a point of

Interested in learning how website design can build your brand’s reputation?

Keep it simple

Like every other type of design, designing with animations follows the same rule: keep it simple. For example, if you’re animating a set of boxes set up in a grid (such as in a calendar), instead of animating each box one by one from left to right, top to bottom, animate diagonally (top left to bottom right). This makes the animation a lot smoother and faster, making it look a lot more natural.

Another way to keep animations simple is by animating things one at a time. For example, if you’re animating a tab opening to display more information, instead of moving the tab up to expanding and moving each textbox into the expanded tab, consider animating the tab opening first, then the text boxes appearing inside the tab.

Using animations to group data can also help enhance the user experience, preventing them from being overwhelmed by everything on the page. Adding transitions from one group to another can tell the user what to focus on as well as make the page more exciting. 

If your animation is effective, it should imitate the real world and not distract users from their task. Animations enhance a user’s experience and help them navigate your website or mobile application rather than distract or frustrate them. 

Evaluate and collect data

Similar to the first step (do your research), you’ll want to collect data to see how animations affected users of your website or mobile app. This pinpoints areas you did well and areas you can improve on. It’s wise to ask some users questions and observe how they navigate through your website or mobile application, looking at the process they take and improving based on their feedback.

Let us help

In addition to advising best practices for animation, Imagine Better Solutions also helps with website design, video marketing, and product photography. As a company that strives to be a one-one-stop shop for ease of management, we have all of your web needs covered. 

Contact us for more information at https://www.imaginebettersolutions.com/.