Like a good website, a good mobile app must boast a great interface design and an engaging user experience. When used properly, UI animations can help reduce cognitive load, attract and direct users’ attention, and make an experience easier to follow. But use too many animations or use them in the wrong places, and it can create an irritating or noisy experience. Every animation must have a rationale, and must look natural. So let’s take a look at the various parts of an app or website where animations would be applicable:
| Animation placement | Description |
|---|---|
| Launch/splash screens | Animated launch screens distract users who expect instant loading, and make it seem shorter. |
| Login screens | Background animation on login screens entices logins and adds momentum to the process. |
| Onboarding screens | Helps new users get familiar – reduces risk of abandonment due to lack of understanding. |
| Progress/activity indicators | Circular indicators for quick operations; linear indicators for longer than 3 seconds. NB: Informs users of system status. |
| Visual feedback | Crucial for any UI – tells users they’re on the right path and whether or not an action has succeeded. |
| Navigation | Transitions user seamlessly between sections and makes the navigation seem simpler; shows clear hierarchy. Also indicates a change in function, e.g. a hamburger menu that changes to an X. |
| Visual hints / prompts | Subtle hints to the user about how to perform an action in the app. Saves time, makes interaction seem natural. Good example: Tinder’s famous swipe action (which other apps are mimicking). |
| Notifications | Unobtrusive animations can make important information noticeable without being irritating. |
| Just for fun | Without complicating the app or wasting time, unique animations create moments of delight by making interactions with the app memorable. E.g. pull-to-refresh animations. Possibility for gamification (rewards, badges, etc.) – emotional appeal. |
Why SVG is the future: a shifting market
Although Scalable Vector Graphics have been around for more than two decades, their usage is becoming increasingly popular in both apps and websites, not only because they make scalable and compatible visuals, but also because of their immense potential for animation.
The emergence of a diverse world of devices with their ever-changing screen sizes has made it a necessity to ensure professional, interactive and responsive brand communication. Although SVG has been on the web for most of its existence, it was limited by a lack of native support in browsers. Since 2011, all major browsers support SVG as embedded objects or inline code.
See the below chart from W3Tech’s report of yearly trends regarding the usage of various image formats. Notice that SVG has overtaken GIF.
This is partly due to the many advantages SVG has over GIF, and partly due to Google’s prioritisation of page speed as a factor for ranking websites since 2010, accelerated by the same being applied to mobile search by 2018. Mobile responsiveness having been a factor since 2015 also had an effect.
| GIF | Video | Animated SVG | |
|---|---|---|---|
| Image quality | Non-scalable raster, artefacts | Non-scalable raster, quality depends on size | Resolution-independent vectors |
| Colours | Limited colours, some photographic visuals | Full colour gamut, photorealism | Full color gamut, but photographic visuals are too complex |
| Transparency | Limited binary transparency | Some alpha transparency | Fills specific shapes; transparency is natural |
| Animation techniques & performance | Always a compromise between animation quality and performance | Video playback dependent on device, location of the file (in-app or online), and file size. | Low device impact, length of animation barely affects file size |
| Modifications | Editing requires re-exporting from software | Editing requires re-exporting from software | Either re-export from software or edit the code |
| File size | Difficult to reduce, not as large as video | Largest | Smallest |
| Platform support | Almost universal | Depending on codec and format, mostly universal | Almost universal, less browser support than the other formats |
| Control | Limited control – can’t be stopped without extra images & requests. | Control dependent on embedding. | Full user control built-in. |
| Content accessibility | Content indiscernible by screen readers beyond image description. | Limited accessibility by screen readers. | Accessible & semantic – animated content can be described and made accessible to screen readers and enhanced by ARIA roles and attributes. |
| Interactivity | Non-interactive | Non-interactive (besides controlling playback) | Fully interactive – hover & click interactions (and more), even on individual elements. |
| Responsiveness | Non-responsive | Non-responsive | Responsive – can be modified to adapt to different viewport sizes and contexts without the need for extra assets. |
Animation Technologies
Conclusion
It’s clear that animated SVGs are a benefit to any UI. But there are certain applications where video would be better, such as realistic videos or photographic representations. Thus, we suggest using a combination approach: use animated SVGs where necessary; static SVGs for all image assets; compressed video for any tutorial / demonstration / lifestyle video that needs to be included in the app.
Animation should only be used where it has meaning and doesn’t distract the user from completing the task they set out to do. Michael Villar suggests testing this by disabling animations – then, if the flow feels broken, the animations add value.
Animation should also have longevity – it needs to remain just as delightful or helpful for a long time and through repeated use.
Done correctly, animation can greatly improve UX. It can transform an app from a sequence of static boxes into a dynamic set of experiences that both attracts and retains users.
So let’s get started!
Either chat to us on Whatsapp or fill in the contact form. Try to fill in as much detail as possible, as this will help us figure out your specific requirements.