Motion
Motion helps us to enrich our UI, crafting a better user experience of our products and the way they communicate.
Motion Principles
Friendly
Motion is engaging. It’s easy to understand and designed or intended to satisfy specific user needs.
Informative
Motion always communicates. It provides understandable information with a clear and simple hierarchy of the elements at stake.
Clear
Motion is unambiguously and consistent. There is no doubt about the usage and function of motion and no unnecessary motion is used.
Styles
Since we conceived the playground as the first encounter that one has with an engaging learning experience, we take three pieces from the playground that will guide us in the construction of different levels of complexity for the animations. Each symbol is an element of the playground that defines the behavior for different styles of movement.
Slide
It’s a movement that doesn’t necessarily need to be initiated by an external force. It’s simple, straightforward and fast. Most of the time it is executed only once. Its complexity is very low.
Swing
The swing is a movement that must be triggered by the action of an external agent. It’s smooth and elegant. And to achieve it, it needs more time to be well executed. It’s relatively easy so it presents medium complexity.
The spring rocker
The swing is a movement that must be triggered by the action of an external agent. It’s smooth and elegant. And to achieve it, it needs more time to be well executed. It’s relatively easy so it presents medium complexity.
Motion in UI
From microinteractions to advanced and playful animations. From hovering over a simple button to the way Pommes celebrates user achievements. Motion always contributes to building a user-friendly yet engaging experience. For this purpose we have defined the following parameters that will guide us in the proper use of motion.
Slide
Easing curve:
0.40, 0.40, 0.40, 1
Duration:
Fast: 0.24s
Normal: 0.48s
Slow: 0.72s
When we use:
The slide style is used to give easy and low complexity visual feedback (expected or not) to users. We usually find this style applied to buttons or flash messages.
Swing
Easing curve:
0.80, 0.00, 0.30, 1
Duration:
Fast: 0.48s
Normal: 0.96s
Slow: 1.44s
When we use:
We use the swing style for slow and smooth animations that provide context and engage users. Some components that take advantage of this style are progress bars, reveals and input fields, among others.
The spring rocker
Easing curve:
0.40, 0.40, 0.40, 1
Duration:
Fast: 0.72s
Normal: 1.44s
Slow: 2.16s
When we use:
When we want to drive users to enjoy a dynamic and playful experience, we use the spring rocker style. Rating our videos or interacting with Pommes on sofaheld can be good examples of this style.