Understanding Icon Animation
Icons 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 quickly and 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. This leads to increased appeal, and ultimately a higher conversion rate.
Being able to recognize this impact is why we’ve put together this brief on the pros, cons, and principles of animated icons. Whether you’re looking to improve your interface, a presentation, or your next social media post, we want to help you offer the best experience.
Principles
Inform
Animation makes your message more understandable.
Focus
Guide your users by using animation to draw their attention.
Accessibility
Enable all users to understand your product and message.
Feedback
Effortlessly communicate the system activity, status or results of an action.
Express
Convey emotion with animation, from celebration to adding personality.
Charm
Add polish or a sense of playfulness to your user experience with animations.
How animated symbols increase user experience
Communicate
Why animated icons are the best way to communicate your message.
When you include animation in your projects, you’re adding the element of time. This allows you to communicate on a whole different level to when you use static icons. Other design principles can’t always convey things such as color, shape, and type.
Movement always draws our attention, and we’re always curious as to why something moves. Using our shared experience of real-world physics adds legitimacy to your animation, and is something that you should absolutely leverage.
Using rules of the physical world in designing micro-interactions is a great way to define how your audience engages with your work. You have control over how your message comes across. Whether deliberate design or ‘accidental’ intention, your message becomes more meaningful.
Remember, adding animation will always communicate something more than a static image. It’s simply a question of whether you’re getting your message across and communicating effectively.
This is backed up by research, in particular from Apple’s Human Interface Group (HIG). Their work solidifies the idea that animated icons are great at adding more to user interfaces. They’re easier to understand, better at relaying instructions, and perfect for explaining methods of use. This is true whether they represent functions within an application or the application as a whole.
When an interface isn’t immediately understood, questions naturally arise. Apple’s HIG found that animation can help with these queries, in the form of answers they can convey.
- Identification: What is this?
- Transition: Where have I come from and gone to?
- Orientation: Where am I?
- Choice: What can I do now?
- Demonstration: What can I do with this?
- Explanation: How do I do this?
- Feedback: What is happening?
- History: What have I done?
- Interpretation: Why did that happen?
- Guidance: What should I do now?
The conclusion was that when static icons failed to communicate how a tool was meant to work, adding animation resolved those issues. They also found that simpler animations were sometimes more effective.
Checklist
-
Evaluate the message you wish to convey with an icon, and try to break it down to its core parts.
-
Find an area where you have a static icon representing a complicated action, and replace it with an animated one.
-
Where possible, simplify the animation without sacrificing the action’s meaning.
Sources
Grab Attention
Icons on text boxes animate when hovering over them.
Animation, by its nature, highlights important information contained within a larger body.
Take animated ad banners online, for example. They’re designed to draw your attention, distracting you from reaching your main goal. The same principle applies to those inflatable air dancers you see outside car dealerships, drawing your gaze in the hope that you’ll stop and make a purchase.
When it comes to content design, there’s a particular hierarchy in which the most important information is emphasized. A news website, for example, might load its most important, and up-to-date content toward the top.
While color, type, and layout are the foundation of a static hierarchy, you can use animation to either reinforce that hierarchy, or redirect attention to where it’s needed more. It’s ultimately a lot more dynamic.
This phenomenon is well known as the Von Restroff effect. It essentially says that when faced with several similar stimuli, the one that stands out the most will be the more likely to be remembered. Imagine a New York taxi driving down the street — you’re going to remember the yellow taxi, not what color a regular passing car is.
If we apply this to design, then we can create that distinctiveness through differing the attributes of an icon. Size, shape, color, spacing, and the animation itself are all effective in drawing attention.
Checklist
-
Try to carefully add animation to make important information or key actions visually distinctive. Consider content design hierarchy and Von Restorff effect when deciding on your message strategy.
-
Attentively consider users with motion sensitivity when using motion to communicate contrast. This means to not use too aggressive motion. Subtle loops or animations triggered on hover should work well.
-
When looking for the right means to highlight a piece of information/element, keep in mind users with special needs. In the case of color vision deficiency, animation may be a better solution than color. Learn more about accessibility.
Sources
Cognitive Load
Make your message easier to understand by reducing the 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, working with 3D 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 add an animated icon 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 visual is much lower — and therefore ideal for the user.
There’s plenty of research to back up the idea that animation reduces cognitive load. A pair of studies from Erasmus University Rotterdam concluded that you can reduce cognitive load through well-designed animations. Certain cueing techniques in complex animation could also ease the cognitive load for more efficient learning.
This was supported by a study from the University of New Mexico, which found that a group of students using animated study aids outperformed counterparts without. Naturally, less cognitive load meant more efficient learning.
So, when you’re designing an animated interface and your gut feeling tells you it’s a better option - the research largely backs that up. Of course, not everything you design will automatically be improved by adding animation. Trust that instinct, and you’ll often help the user understand your intention all the more.
Reducing cognitive load in developing manual tutorials.
Never has this been more relevant than with the Internet of Things, and then by evolution, web content. We often skip tutorials when consuming new products, instead preferring to find our own way. Research from Penrose and Seiford shows that less than 30% of people in a study bothered to consult manuals before using a product.
We’re less concerned with written instructions these days, and that’s something we have to consider in our designs. We need to find another way to attract attention, and animation helps with that.
Checklist
-
Use your instinct — check whether the information you want to convey is clear to the user and the effort required to fully understand it. Consider whether you have chosen the correct media to convey your message (visual/non-visual, static/dynamic etc).
-
While explaining complex ideas, try to use simple animations to reduce cognitive load.
-
Consider explaining your business with an animated or live action video explainer.
-
Introduce users to your app using simple steps, through basic text and animated instructions.
Sources
Defining microinteractions: animation in UX by Maria Lomakina
Minimize Cognitive Load to Maximize Usability by Kathryn Whitenton
Making Instructional Animations More Effective: A Cognitive Load Approach, Paul Ayres and Fred Paas.
Study on Constructive and Corrective Skills Development by Penrose and Seiford
Delight
Add a spark of enjoyment and make your project more memorable.
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, visitors see a regular icon. When interacting with it (such as hovering over it), they are surprised by its flawless motion. This strengthening the core principle of the visuals.
Delight can be divided into functional and entertaining
Functional delight
Functional design is incredibly important to the user experience. People want smooth movements, as it’s visually more appealing than tired, static designs.
You’ll often see this type of design in things that cannot be in two states at once, such as on/off or play/pause switches. A small, simple animation can make using a service a lot more alive.
Entertaining delight
Animations can also entertain us. The first example of use could be a loading screen. Sometimes, the content will need to load — drop an animation to draw users’ attention and they’ll forget the inconvenience of waiting. Shake up your roster of loading icons and keep your users on board.
From cookie pop-ups to dashboards, reaction buttons to error screens, animation can delight in many places. They highlight interactive moments and make annoying or repetitive moments less frustrating.
Building tension
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 digital product 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. This impacts their engagement with your product, and helps your product stand out in a crowded market.
Delight keeps the user focused
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. You don’t want them to give up and be 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. This will guide the user through the task rather than stress them out. It’s all about reducing the cognitive load, remember?
Checklist
-
When the user ends a given process, try to think about using animation to delight them.
-
Try to use occasional animation in commonly used places, such as in voting or adding an item to a cart.
-
Consider whether instant gratification or building tension is the best course of action in regard to offering delight in the user experience.
-
Adding too many animated icons or too long sequences may become a real distraction and frustration for the user. Read about it in the “From delight to annoyance” section.
-
Make long lists or forms more tolerable by adding animated icons.
-
Aim to make animated icons a form of gratification.
Sources
Aesthetic Matters
Impress with well-implemented, aesthetically pleasing designs.
Let’s face it, how something looks is incredibly important to the user experience. People will often judge the quality of something based on its appearance. This has been true for quite some time, and will likely remain so for a long time to come.
Ultimately, the aesthetic matters, and you should use this in your designs.
There’s no denying that animation looks good, and by using it, you will skyrocket the user experience. You want your audience to be captivated and engaged, but you also want them to enjoy the experience.
You can set the brand values and tone of your product voice through design or animation, just like you can through words. Leverage this, and enhance your brand values in the process. It’s a win-win situation!
Checklist
-
Create an aesthetic experience that hooks your user at the first glance.
-
Think of how you can strengthen your brand value using animation.
-
Think about what kind of icons will best reflect the values of your product
Sources
Picture Superiority Effect
Make your user want to engage with your product through a satisfying payoff.
According to Allan Paivio (Dual Coding Theory states that we can recall images better) and Douglas L. 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.
Checklist
-
Choose icons that are clear in their content, so that they are easily recognized and understood. They should also work well together and coordinate well with your other content.
-
Stick to using icons from the same family, so that your brand message remains consistent.
-
Don’t discount text completely — use it smartly to back up the message the icons are sending.
-
Make sure your icons are clear and visually prominent. Users are more likely to remember them, and therefore create a lasting impression.
Sources
What makes a poor web animation experience?
Overload
Be mindful not to bombard your user with too much visual information.
Too many animated icons on one page, especially when set all on loop, 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.
Too many animated icons may become a distraction, especially when set on loop. This will harm the user experience.
Try to reduce the number of animated icons. You can also set their animation triggers to hover, so they don’t distract user attention. This will make for a positive user experience.
The purpose of animated icons is to direct your user’s attention towards something, not away from it. Use them to highlight key elements of your user interface
Checklist
-
Avoid overloading your user with too much visual information all at once.
-
When using animated icons on the web, try to set an animation trigger on hover, so the animation is only initiated after user interaction.
-
Try not to overload your design with animated icons. Add them only to the sections that need visual representation.
-
Keep the animation organic, so that it remains tied into the message you want to convey.
The dark side of looped animation
Avoid the common risks of using looped animations in your designs.
Don’t assume that a constantly looping icon will work in all cases. There’s always a point at which there’s too much. For example, using them as a website loader is a good use, but in a standard dashboard they just become an unwelcome distraction.
Icons that are constantly animated in the dashboard become a distraction. Consider setting them up to play on hover.
WCAG standards support this, recommending to not use looping animations just for the sake of accessibility.
Animations on your page that loop, blink, or scroll can be a major distraction. This will especially affect those with attention deficit disorders. They’ll lose focus on the page, and most likely move away from it as a result. This isn't an ideal solution.
This looping icon can distract users from reading the article. Try setting a trigger for when users scroll up, or play it once when the user launches the app.
Sometimes, technology won’t allow you to add animations to a presentation or email marketing campaign. You may need to use GIF files, which can be set to a loop or played once. If you are looping, try to add a 2000-5000 ms delay between the looping sequence. This helps create an appealing aesthetic.
An animated icon designed to work as occasional animation doesn’t work with a perfect loop.
An icon designed to work as an occasional animation can work as a constantly looping sequence, but only when combined with 2-5 second delay.
Checklist
-
Try not to include more than three constantly looping animated icons on one screen.
-
When using animated icons as a looped GIF, try to add 2-5 seconds delay time between each loop, so the animation doesn’t distract the audience.
-
If you plan to add animated icons that are initiated without user interaction, set them up on a loop. Add a 3-5 second delay between the looping sequence.
Sources
From delight to annoyance
Where "too much" can cause a bad user experience.
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 or transitions 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.
Too many transitions and unnecessary screens with animations divert users’ attention from the main goal. This lessens the experience.
Make your interactions quick and hassle-free. A subtle animation on completion will be enough. It will do its job without creating unnecessary distractions.
Like all good things, delight inevitably comes to an end. You need to factor this into your design and try to avoid your user experiencing a sudden comedown. Look for the right opportunities to add delight in the right context:
- When the user first launches a product.
- When they finish setting up an account.
- When they make a purchase.
- When they are on the page with a lot of information.
- When a new feature is introduced.
- When they complete an important action for the first time.
- When there’s an empty state.
Don’t create animations that exceed the boundaries of the text box.
Keeping the animation within the boundaries of the text box is enough to inform the user of an error.
The length of the micro-interactions shouldn’t take too long. These micro-interactions shouldn’t last too long. This is especially true with commonly repeatable actions, such as saving changes, clicking radio buttons, or interacting with animated icons in the menu. Motion length here shouldn't exceed 500ms (0.5 seconds) for animated icons initiated by the “click” trigger.
Animations that are too long end up out of sync with the click action.
Quick animations delight, and keep up with the click speed.
A user may like a longer animation the first few times they click it, but this will quickly change. Clicking this button several times times a day may result in the longer animation becoming a significant distraction, harming the attractiveness of your user interface. Remember, our goal is to draw user’s gaze, not to distract them.
The same situation occurs with decorative animated icons that initiate on hover. People's time is valuable, which is why longer animations will not meet with positive feedback. We have found that the sweet spot for animated symbols initiated on hover is between 1500-3000 ms (1.5-3 seconds). The more complex the symbol, the longer the animation may take to complete.
Animations that are too long become unwelcome distractions. If you need to present several steps, consider breaking it down. Multiple short icons will be better than one very long animation.
Make your animations straightforward.
Checklist
-
Look for opportunities to add delight in the right context
-
Match the size, length, and complexity of the delighter to the use case
-
Keep the micro-interaction movements within the initial section. Do not scale them up, so they cover the entire screen.
-
Do not add icon animations as action buttons initiated on “click” that last more than 500ms (0.5 seconds).
-
Do not add icon animations initiated on “hover” that last more than 3000ms (3 seconds).
Sources
Non-realistic animation
Keep movement grounded in reality.
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 unnaturally for no reason, or it somehow breaks the natural laws of physics, it’s probably not going to fit the purpose.
Animations that break the natural laws of physics leave the user unsettled.
Correct dynamics help users associate movement with real-life situations.
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.
So, you need to design your user experience around this. Smooth motion and accurate movements will be more relatable, and as a result, more likely to be accepted.
Try to avoid unnatural 3D movements.
A correctly animated 3D spinning cube.
An incorrectly animated walk cycle doesn’t reflect real-life physics.
A walk cycle done accurately is instantly recognizable to the user.
As well as the motion itself, we also need to keep in mind the meaning of the movement. It’s great if the animation supports and strengthens the meaning of the icon. Conversely, if the animation doesn’t convey the message accurately, then it will confuse the user.
Disorienting the user destroys the icon’s message, which in turn can put your users off your product.
The wave and wiggle animations here don’t support the meaning of a home security icon.
Keeping the animation organic strengthens the meaning of the icon. This adds real value.
In a nutshell, every movement must serve a purpose, reflect real-world physics, embody precision, and communicate clearly.
Checklist
-
Study real-world movement and apply the same principles to any corresponding animations you design.
-
Avoid unnatural, jarring movements.
Sources
Inaccessibility
Consider all of your audience when integrating animation.
Animation is a very powerful tool when making a product accessible. Using motion won’t exclude those with color vision deficiency or low vision from understanding your message. This is in contrast to some static icons, which rely exclusively on color to communicate contrast.
However, if we take it too far, motion is trickier for a user to process. The last thing we want to achieve, when designing animated icons is to instigate dizziness, nausea, disorientation, migraines, or even seizures.
For this reason, you need to design your animations with both accessibility and aesthetics in mind.
Using Flashing elements
You shouldn’t really need to incorporate any kind of extreme flashing or flickering in your user experience. Users with motion sensitivity disorders or who are prone to seizures are at risk if you do, so try to find ways around this.
For example, you can look to the frequency or speed of flashes, so that the triggers are far less prominent or more manageable.
Extreme flashing may cause issues for some users.
The same animation, executed in a smooth, harmless way.
Visual impairment
For those with visual impairment, consider using equivalent text so that accessibility tools like screen readers can also convey your message. This is especially important if the icon is key to understanding the context of the content.
Ultimately, accessibility shouldn’t be an afterthought, but a core facet of your design.
Icons without labels are often misunderstood and cause confusion.
Labeled icons ensure the meaning is conveyed easily and is consistently understood.
Checklist
-
Design with accessibility in mind, so that you’re not excluding potential consumers.
-
Don’t assume that something will be automatically accessible.
Sources
Summary
The use of animated icons in your product isn’t always a guarantee of success. They do make the user experience better, and create positive sentiment in a number of different ways.
Choosing to use animated icons is all about balance. Try not to overload your content with them, as you’ll distract from the message you’re trying to convey. Use the right icons at the right time to charm your user in a way that doesn’t create an overwhelming effect.
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 better user experience, and as a consequence positively influences conversion rate.
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.
References
Animating Anthropomorphism: Giving Minds to Geometric Shapes, Jason G. Goldman on March 8, 2013:
Designing Interface Animation by Val Head
BRINGING ICONS TO LIFE: Ronal Beacker, Ian Small and Richard Mandel
Von Restorff Effect - Wikipedia
Von Restorff Effect - Laws Of UX
Defining microinteractions: animation in UX by Maria Lomakina
Minimize Cognitive Load to Maximize Usability by Kathryn Whitenton
Making Instructional Animations More Effective: A Cognitive Load Approach, Paul Ayres and Fred Paas.
Study on Constructive and Corrective Skills Development by Penrose and Seiford
Using Web Animation to Enhance Usability by Caroline Liu Chang
Microinteractions in User Experience by Alita Joyce
Dual Coding Theory by Allan Paivio
Sensory Semantic Theory by Douglas L. Nelson
