We're back with the design series and this time we'll be talking about animations. Nowadays its hard to imagine digital user interfaces (UI) without animations. You see them more often in mobile apps: elements and objects moving all over your screen. Eye candy! Although, animations can be appealing for the eye, they also have to be meaningful. I'm not talking about motion graphics in games or illustrations, but meaningful animations added into user interface elements. For example, everybody recognizes that spinning wheel when you are loading a page or content. It can be as simple as that!
So what is the added value of animations in UI?
As mentioned above, animations should be meaningful when added into UI elements. It should enhance the understanding of the interaction between the user and UI. Animations can also help to understand how the app is organized, so you don't get lost easily.
Animations in UI should provide:
- A guided focus between views;
- Hints at what will happen if a user completes a gesture. Read more about it in our micro interactions blog;
- Hierarchical and spatial relationships between elements;
- Distraction from what’s happening behind the scenes, like fetching content or loading the next view;
- Character, polish, and delight.
We can find these points in today's mobile operating systems. Most of the animations for specific elements across different operating systems are similar as they are deeply integrated in our user pattern. Next to the basic OS animations there are many other examples out there with custom approaches. Let's take a look at todays animations in apps and find out what we selected as our top 5 most meaningful animations:
#5. Open & close menu
This is an example from a pizza ordering concept flow. It's all about customising and easily switching back and forth with a thumb slide. You directly see the result of the sliding options in the related interactive visual. Hungry for more?
#3. Pull to refresh
In this app they made smart use of the loading time to refresh your screen. Loading time = cooking time! Instead of staring at that spinning wheel, we are 'distracted' from what's happening behind the scenes as well as entertained. Delightful!
#2 Smart form labels - Phonak Support
Here we have an example of an animation from one of our apps, the Phonak Support app. It often happens that you have to fill in a form or profile. We want the user to be guided through these steps and keep track of what they're doing, so that they don't get lost when entering a form field.
#1. Focus on content during transition - Material design
This example perfectly shows that most interactions should do justice to the content that's been displayed. Pages don't just pop out of nowhere when pressing a button. It enhances the guided focus between views.
It all seems logical, and that's what we do as interaction designers at aFrogleap: the trick is to make user interfaces look fun and interactive yet simple with the appliance of meaningful animations. In our next blog we'd like to tell you more about 'When an icon makes a difference'. Let's keep in touch!