By changing the length and speed of your animations, you can create some very unique transitions, and even enhance the user experience of micro-interactions.
How something animates (i.e. its motion) is called an easing, and when smartly fine-tuned, these easings can help micro-interactions chaperone the user safely throughout your UI, contribute to a visual aesthetic, or even alter the user’s mood.
How? Lets take a look.
Easings Can Make Interfaces Animate Naturally
In real life, objects rarely move at constant speed. When we open doors, for instance, we open them quickly at first and then slow down towards the end, because that’s how our muscles work. If you bounce a ball on the floor, it rises quicker at first, slows down, and then drops to the floor due to gravity.
[caption id="attachment_144396" align="aligncenter" width="800"]
Part of how we navigate and interact with our world is dictated by our understanding of how objects move. Would you involuntarily try to catch an object if it were suspended in mid-air? Probably not. Would you attempt to board a moving train? Definitely not. Our brains understand natural motion, and that’s why crafting easings that animate in a natural way will help your users understand them more easily.
Let's take our first look at an easing.
Types of Easings
Seeing easings in action is the best way to understand them. Many programming languages (like CSS) and frameworks (like jQuery) have a set of ready-made easing functions built-in — if you take a look at Easings.net you’ll be able to witness a selection of them.
[caption id="attachment_144390" align="aligncenter" width="860"]
Consider a double-sided card interface (perhaps credit card information on the front, security code on the back) — you would flip the credit card to read the security code. You wouldn’t do this at constant speed (linear easing), but you also wouldn’t use any fancy motions to do it (elastic or bounce easings).
[caption id="attachment_144394" align="aligncenter" width="800"]
A simple ease motion would suffice, meaning that one state simply eases into another. If an element on the screen dropped from the top of the screen to the bottom, that might warrant a bounce easing because some objects bounce when dropped.
[caption id="attachment_144393" align="alignright" width="400"]
How Does Ease-In Differ From Ease-Out?
Ease-in is slow at the beginning, fast at the end — ease-out is the opposite. As a general rule you should use ease-in when something is moving out, and ease-out when something is moving in. Ease-in-out is slower at the beginning and end.
In fact, Google has some very specific ideas about how fast elements should transition in-and-out, and the acceleration/deceleration of the speed.
Easings Can Guide the User Safely
A bounce easing is more eye-catching, making it suitable for error messages and popup dialogs, whereas a simple ease transition doesn’t steal too much time and focus from the user, making them more suitable for micro-interactions.
The type of easing you choose should depend on how much attention the animated element warrants, and the sort of action is that is required from the user – different easings communicate different things.
[caption id="attachment_144395" align="aligncenter" width="800"]
Guiding the user safely is no easy task; it’s a collaborative effort between animation, color, and even the use of words; each can contribute to effectively communicating to the user what they should do next, or where they should go.
How Long Should an Animation Last?
For ease animations, something between 200ms-500ms is optimal; this gives the human brain enough time to “read” the animation and decide what the user should do next, without delaying the user too much. If the animation is too long the user is forced to wait; too short and it’ll feel uncomfortably sharp, both of which are very annoying to the user.
Elastic or bounce easings should have a longer duration (around 800ms-1200ms) to allow the animation to flow. Without this added time the animation will feel aggressively jolty.
Easings Can Influence Mood
In a similar way to colours and typography, animation can influence the mood of the user. You can fine-tine the duration and easing of an animation to influence how a user feels.
Slower animations can imply elegance or seriousness (depending on the nature of the app/website), whereas faster animations can convey something more upbeat. Your mood can affect your decision-making (i.e. a slower, more serious tone might convince you to donate to a charity, and a faster, more upbeat tone might make you feel more impulsive and more likely to spend money).
Since experts generally tend to agree on the duration of easings for micro-interactions, there isn’t much room to apply branding in this respect. Animation in branding is still a relatively untouched topic, however, as a rule, I would save complex animations for larger components (modals, et cetera) and illustrations (you can animate SVG in web design for example!).
Continue reading %Animations: Using Easings to Craft Smarter Interactions%
by Daniel Schwarz via SitePoint
No comments:
Post a Comment