Animated icons are a powerful tool that web designers and web developers can use to enhance their products. There are many different scenarios where animated icons serve as an effective way to communicate intent.
Our rates are legendary. With 15+ years in the game, no-one can beat us on price.
The finest securty in the business. Privacy is one of the core parts of our business.
Thousands of plant lovers from all around the globe in one place. You have to love that!
We have over 50 guides on Australian plants, including plants that grow in subtropical and arid climates.
There is a growing interest in animation and a growing number of tools for creating web animations. Examples include SVGator, Spirit, and Loaf. The hardware in our computers and phones are getting more powerful over time. Having animations as part of your interface is becoming less of a concern from a performance point of view.
With animation being such a powerful tool, how do we ensure that we are careful about using animations effectively? We don’t want to go back to the time of flashy banners and distracting colours. I think this is solved in two ways:
First we need tools that will help keep our websites and user interfaces simple and effective. If tools are designed which easily allow aggravating or distracting animations, it can cause issues for users.
Second, there is a responsibility on the designer to ensure that things remain clear and simple. Basic design principles lean towards simplicity while achieving the stated goal of the user. This ties in neatly with animated icons. For example:
In the above example a static icon would have worked just fine. The basic intent of the design would have been met. However a small splash of animation helps elevate the design. In this example, an animated icon is improving the design by accurately communicating the state of the system and giving the user peace of mind that the system is currently working to achieve their goal.
People like being treated nicely. If a user perceives that someone has gone out of their way to make things better for them, they will appreciate it and will reward you. If it takes 10+ seconds (an eternity on the web) to load a large dataset, displaying a fun animation to the user to occupy that time will be appreciated. It will help keep their attention focused on the task at hand more effectively than a static image. A static image can make it more likely for the user to get bored, open a new tab and get distracted.
Another benefit is that movement brings with it a sense of life. Generally graphical user interfaces are static. And that makes sense. In almost all cases, a GUI should be static. However there are times when an animation, or some amount of movement, is needed.
The most obvious example is the humble loading icon. This element, in all its different forms, has made a profound impact on how long we will wait for something to load. Can you imagine a world with no animated loading icon?
At the end of the day I believe it’s up to the designer to spot opportunities to make effective use of animated icons. Like the mobile-first movement, there is a large opportunity for designers to start using animations in a more integrated nature.
The aboves examples of icons were created using Loaf. The SVG format is a scalable, lightweight and performant way to implement animations, however other formats such as .mp4 or .gif also work well. Always ensure that the animation is serving the user first and your design sensibilities second.