Symbols are a key part of any form of communication. They do everything from identifying objects and ideas, to issuing commands and instructions. The advantage they have over words is in their near-universal understanding. They’re able to accurately deliver meaning or the intent of a product, while being far more visually pleasing to the eye. Animation takes this idea and raises it to another level. The user experience is greatly enhanced by clear, captivating micro-interactions, leading to an increased appeal, and ultimately, a higher conversion rate.
Principles of Symbol Animation:
When you incorporate animation into your projects, you’re adding the element of time to your work. This allows you to communicate on a whole different level to when you use static icons, something other design principles can’t always convey such as color, shape, and type.
Animation by its nature attracts attention, helping highlight any important information among a group of similar information. While color, type, and layout are the foundation of a static hierarchy, you can use animation in a more positive way to either reinforce that hierarchy, or redirect attention to where it’s needed more. It’s ultimately a lot more dynamic.
Reduce Cognitive Load
Some things are more difficult to do than others. This mental effort we expend in trying to understand and complete a task is called the cognitive load. Think of it like a computer, and the processing power it needs to perform tasks. Viewing a webpage won’t take as much effort as, say, running a design software, but there’s still a load all the same.
In design, we want to avoid there being too much cognitive load on the user. The easier it is for them to understand your message, the better the chance of it landing. This is where animation comes in. Sometimes, you can design an animated solution and it just feels like a much better option than a static equivalent, but you’re not sure why. This is because the cognitive load needed to understand the symbol is much lower — and therefore ideal for the user.
While animation can offer more to your designs in terms of clarifying meaning, it can also provoke delight in a user. An unexpected twist, or a playful turn, can ultimately reinforce the message you want to send — after all, we tend to remember the things that make us smile or laugh, however small or fleeting they may be.
Consider an animation hidden behind a static icon. At first they see a regular icon, but when interacting with it (such as hovering over it), they are surprised by flawless motion — strengthening the core principle of the visuals.
Animation is a great way to manifest completing a process. For example, this could be gratification after an achievement, a successful purchase, or completing a rafter hefty form. This gratification can come in different forms. While some can be instant, such as an achievement popup, others can help build up tension, such as with a loading screen.
Using tension in your animation can heighten the sense of gratification your user gets, which in turn increases delight. Speaking to the emotional side of your user can often result in a greater payoff in your user experience, and its impact on their engagement with your product. It also helps your product stand out in a crowded market.
There’s no denying that animation looks good, and by using it, you will enhance the user experience. You want your audience to be captivated and engaged, but you also want them to enjoy the experience.
Picture Superiority Effect
According to Paivio (Dual Coding Theory states that says we can recall images better) and Nelson (Sensory Semantic Theory states that people notice differences more readily in images than in words), it is safe to say that visuals can convey up to six times more information than words alone. When you add animation to the mix, you strengthen this effect even further, creating a long-lasting impression for your user.
Research has shown that when offering both a want — a form of instant gratification — and a should — a more valuable reward that we have to earn — then we’re more likely to go after that juicy delight. Adding interactive elements to things like forms or really long articles feeds into this idea. A distraction or release halfway through filling in a form will increase the likelihood of the user continuing with the task, rather than giving up and being distracted by something external, like checking social media. It’s highly important to keep the user within your task.
You could do this by adding animated icons next to the titles of paragraphs, something which would guide the user through the task rather than stress them out. It’s all about reducing the cognitive load, remember?
Too many animated icons on one page won’t deliver the intended effect. While you may want to distract the user, you don’t want to take their focus away from the main task at hand. The whole purpose of animated icons is to direct your user’s attention towards something, not away from it. Use them as signposts to key elements of your user interface.
The Dark Side of Looped Animation
Don’t assume that a constantly looping icon will work in all cases. There’s always a point at which there’s too much. WCAG standards support this, recommending that you don’t use looping animations just for the sake of accessibility.
Five seconds is about the maximum you’ll want to go for with your animations — long enough to draw your user’s gaze, but not too long to completely distract them. This is why consider using animation triggered on "hover", rather than the one that plays on a "loop".
From delight to the annoyance
While we’re aiming to delight by using animation, there does come a point where that delight becomes an annoyance. The element of surprise we use to create this feeling must be done right, or we risk harming the user experience.
Remember, the animation is there to support your message, pointing the user in the right direction. Too many animations and the user’s gaze will be averted from the goal. They need to be relatable, so you’ll need to stick to some ground rules.
Another thing to remember when planning to incorporate animation into your project is whether or not it’s natural. If an animation looks or feels out of place, the overriding user feeling is going to be one of confusion.
Familiarity is the key to keeping your user on board with your message. If an animation bounces off the edge of the screen for no reason, or it somehow breaks the natural laws of physics, it’s probably not going to fit the purpose. Anything that forces you to question the order of things is a negative type of attention. Irregular movement is an example of an animation that doesn’t quite fit with the real world, and can leave your user feeling somewhat unsettled.
Animation is a very powerful tool when making a product accessible. For example, when we want to make something stand out, by using motion we won’t exclude those with color vision deficiency or low vision by relying exclusively on color to communicate contrast. However, if we take it too far, and introduce any kind of extreme flashing or flickering motion we will harm the user experience. The last thing we want when designing animated icons is to instigate dizziness, nausea, disorientation, migraines, or even seizures.
Animated icons make the user experience better, and create positive sentiment in a number of different ways. However, you do need to be careful with how you use them. Don’t overload your content with them, as you’ll distract from the message you’re trying to convey. But don’t neglect their use, either, as you could be missing a trick when it comes to hooking your user.
The scales tip heavily in favor of incorporating animation in your UX design, whether that’s a web application, a social media presence, or a presentation. If you do your research, and correctly apply an animation, then you can reap the benefits of both engagement and entertainment. This, in turn, leads to conversion.
A great animated design will strike the balance between innovation and learnability, information and delight. Make sure you don’t miss out on successful communication of your message, while ensuring your users don’t miss out on a great experience.