While working on a prototype and applying interactions on components and screens, I found myself repeating the same interactions and sometimes not sure if the duration of an interaction I just applied to a component is consistent with similar components or page transitions.
Example:
Mobile keypad showing/leaving a page should have the below interactions
- “smart animate” or “Move In” with a direction
- “ease in and out”
- “10ms”
Every time I have to show a keypad on a page. I have to go through the above interaction. And make sure it’s consistent with other similar instances.
Suggestion based on above scenario
Where as to If i could set up the above as an interaction style. So when I apply an “on tap” event(on an input field) to trigger a page to show a keypad I can simply select a predefined interaction style named “show-Keypad”.
Value of this
- This is help designers and teams agree on animation styles for various components. And also help them stay consistent with the interactions.
- Ease in updating interactions across prototypes. (improve time spent on prototyping)
- Design hand-offs can also include animations