Summary
Micro-interactions are a product’s functional and interactive features. They are the design, not simply details. Design that makes interacting with the product easier and more pleasant. We can utilize micro-interactions as a tool to help users understand complex situations.
Background
Before the establishment from this framework designers implemented micro-interactions based on their feelings without any guidelines or consistent principles. This led to different movements and inconsistent experiences.
Research
Motion can bridge our physical and virtual worlds. To create familiar motion in our apps, we need to adapt how an object moves in the physical world. By using analogical thinking, we can compare our experiences in virtual spaces to our everyday experiences in the physical space. This approach helps create a tangible and intuitive experience in the virtual space.
Vienna, 2023
The purpose of micro-interaction in our team
During the process of designing this framework, we aimed to understand the current usage of micro-interactions by consulting other designers about when they applied these features. We conducted desk research and benchmarked several established frameworks by other companies, such as Fluent by Microsoft, Carbon by IBM, Spectrum by Adobe, Photon by Firefox, Material by Google, and Lyft Design.
In general, micro-interactions matter beyond just visual appeal. They serve functional purposes: communicating state changes, providing real-time visual feedback, guiding users (informative), and gaining users’ attention (visual cues).
Then, we developed our own goals, aligned with company values, resulting in these three principles: educating users with minimal effort, capturing users' attention to guide them toward their goals, and delivering sincere feelings to bring joy.
Functional Purposes
Vienna, 2023
Design Principle
Vienna, 2023
Educate
Vienna, 2023
Focused
Vienna, 2023
Expressive
Formula
Vienna, 2023
Functional Purposes
+
Vienna, 2023
Principle
Based on the functional purposes from micro-interaction combining with defined principles used as the reason to develop micro-interaction formula by rules how, when, and where the designer should apply the motion. Later on the application will be controlled by the framework, and pushed the designers to critically thinking the purpose of implementing motion. This way successfully reduce an unimportant implementation of motion, and make the usage are more effective.
Framework Guideline
Vienna, 2023
Based on the functional purposes of micro-interactions combined with our defined principles, we developed a formula to guide how, when, and where designers should apply motion. This formula, governed by the framework, encourages designers to critically consider the purpose of implementing motion. Consequently, this approach successfully reduces unnecessary implementations of motion and enhances its effectiveness.