Make body language of your design by using Animation 🤩
Below is an example on how effective animation can be.
We have these 3 characters, represented by different shapes, telling a story. The video shows how we can give life to objects using animation.
We don’t like apps that feel static. We want them to feel alive.
If something goes wrong, we have to let the user know. We also have to explain why the error occured.
Many apps need to fetch their data from the internet, and users will have to wait until it’s ready. Animations can be used to convey the progress to the user, making the wait feel shorter.
Animations can be overcomplicated, but overcomplicated animations can also look delightful.
As a user, apps will be more fun to interact with, and as a developer, this part is the most fun part to develop!
Give feedback to the user. Make simple animations in the beginning, and then try to be more advanced. It’s important to let the user know that the app understood what they tried to tell the app.
Always add animation between states. It looks better and improves communication with the user.
Character that fits the feeling of your app.
Feel free to implement this kind of animation, if that fits your brand. But I strongly encourage you to make all animations as simple as possible ❤️
The video is showing a user completing a longer process. When it’s done the app celebrates by animating confetti.
For each animation implemented, try out your app. Ask yourself if animations fits the way you look at your brand.
We all know this company. When thinking of Apple, I like to describe them as:
Now we will take a look at Apple’s old website, and compare animations to the way Apple is described:
These animations doesn’t look clean or simple, and the feeling I get doesn’t fit with the Apple I know.
Animations are customized and given character — a personality, really — by tweaking their bezier curves.
An animation is created like in this example.
The first example is a Timing Animation, and we have also initialized it with a bezier curve.
In the second example, we’ve initialized a Spring Animation, and we’ve tweaked values of tension and friction to make it more unique.
At this website you will find a list a predefined bezier curves. Copy values from one you like, then initialize your animation with these values.
If you want to be more adventurous, you make create you own bezier curve.
You may preview curves if you want to.
Lottie is a framework made by Airbnb. It is developed for React Native, iOS, Android and Web. Any Lottie animation can be used on all supported platforms.
This is the app we created for Ice. In the top right corner we have added a micro animation. The bell reflects whether the app has received any new notifications.
First off, you will have to create an animation. We created this animation in After Effects. After creating the animation we exported it as a Lottie-file by using an extension called Bodymovin.
The transition should help the user to orient themselves by explaining how information flows from one state or screen to another.
It also help to explain the apps hierarchy and gives the user information about where are you now in relation to where you came from to prevent the user from getting lost.
We are going to show some examples of good and bad transitions.
I play FIFA, and use the FIFA Ultimate Team app from EA.
It has no transition between the screens and it becomes very hard and unintuitive to understand what is happening.
The most common navigation transition on iOS is the “push pop” transition on iOS. It is based on a stack of screens, and when you navigate to the next screen, the new screen transitions in from the right, and is placed above the previous screen. It is easier to understand how the first screen is related to the second screen because you can see the transition between them.
When an element expands to fill the entire screen, the image fluidly flows from one state to another, and it’s easy to understand that the current screen is a child of the previous one.
The Pinterest app uses the same principles as the app store.
When the user taps an image, the whole screen zooms in, and all the other items fade out. You always know where you are in the hierarchy because you are taken there via a transition.
Do you want to make you app more unique?
Is it hard to know which bezier curve you should use?
Where do we find inspiration to make our animation and motion even better?
First off, use other apps and learn from them. There are a lot of brilliant apps out there.
Get inspiration from nature and the world around us. Try to design motion that feels intuitive with our own body and the world around us.
In the next video a bezier curve is defined based on the way the flower blooms.
A Rubik’s Cube is pushed over a surface. The physics tells the object to decelerate. A bezier curve is made based on position of the cube in time.
I hope you got some tips on how to work with animations!
I’ve also written an article about Fluid Interfaces that you can read here. In this article, I explain how to use animations when developing Fluid Interfaces.
This article was written by Mats Hauge.
Its based on a talk made by Jarand Millett & Mats Hauge.
Make body language of your design by using Animation 🤩
Research & References of Make body language of your design by using Animation 🤩|A&C Accounting And Tax Services
Source
0 Comments