Summary
Micro-interactions are functional and interactive elements of a product—they are integral to the design, not just minor details. They enhance the user experience by making interactions smoother and more enjoyable. For this project, we established design principles to guide motion rules across the tiket.com apps and website. These principles reflect the companies design values and are inspired by real-world object movement based on physical rules. By leveraging micro-interactions, we help users understand complex tasks while maintaining a natural, intuitive experience aligned with real-world behaviors.
Background
Before this framework was established, designers often implemented micro-interactions based on intuition, without any consistent guidelines to follow. There were multiple requests to integrate micro-interactions for different features, but we often found ourselves uncertain about the appropriate style, movement, and purpose. This lack of clarity made it difficult to ensure that the micro-interactions effectively addressed user needs or aligned with product objectives.
Research
Motion can bridge the gap between the physical and virtual worlds. To create familiar and intuitive motion in our apps, we adapt how objects move in the physical world to virtual environments. By applying analogical thinking, we compare users real-world experiences to interactions in digital spaces. This approach ensures that motion design feels natural, creating a seamless and engaging experience.
Vienna, 2023
During the development of our micro-interactions framework, we explored current design usage by consulting designers and conducting desk research. We benchmarked frameworks like Microsoft’s Fluent, IBM’s Carbon, Adobe’s Spectrum, Google’s Material, and others.
The functional purposes of micro-interactions: (1) indicating state changes, (2) offering feedback, (3) guiding users, and (4) capturing attention. Were identified through a thorough research process involving a literature review, an analysis of similar projects, and a review of internal team requests. By analyzing recurring patterns in team requests, we ensured that these purposes align with real design needs. This research-backed framework helps designers implement micro-interactions with clear, and goal-driven intentions.
With this understanding, we established three core principles aligned with company values: educating users effortlessly, guiding them by capturing attention, and delivering joyful, emotionally engaging experiences through sincere interactions. This ensures functionality, consistency, and delight in our design.
Functional Purposes
Design Principle
Educate
Vienna, 2023
Focused
Vienna, 2023
Expressive
Formula
Functional Purposes
+
Vienna, 2023
Principle
The development of a micro-interaction formula is guided by both functional purposes and established design principles. These principles serve as a framework to define how, when, and where designers should apply motion, ensuring that animations are purposeful rather than arbitrary. By incorporating structured rules, the framework encourages designers to think critically about the intent behind motion design, reducing unnecessary animations and making their implementation more effective.
In this approach, design principles control the overall aesthetic, ensuring coherence in motion dynamics, duration, and user experience. Meanwhile, functional purposes govern the goal-driven aspects of micro-interactions, shaping how motion contributes to usability and interaction efficiency. Together, these elements determine the foundational structure of the micro-interaction framework, balancing both expressive and functional aspects of motion design.
Framework Guideline
Vienna, 2023
The circular framework serves as a structured approach to defining and implementing micro-interactions. It functions as a step-by-step guideline for designers, ensuring a purposeful and well-thought-out application of motion.
To use the framework, designers begin from the innermost circle by first determining the fundamental purpose of the micro-interaction. They need to specify key factors such as:
Where: The location of the micro-interaction within the interface.
When: The right timing for triggering the motion.
Who: The user’s emotional state and context when encountering the motion.
Once these foundational aspects are defined, designers can refer to predefined common patterns for micro-interaction applications. During discussions with the motion design team, they refine the direction, style, and emotional intent of the interaction. This process is guided by functional purposes and design principles, which categorize the motion into specific styles based on intent.
For example:
Expressive interactions are vibrant and playful, suitable for celebratory moments such as confirming a successful payment or applying a discount.
Focused interactions are designed to draw attention, making a specific element stand out within the interface.
Educational interactions provide subtle guidance, such as a sliding card animation to encourage users to swipe.
By following this structured approach, designers can make informed decisions about motion speed, style, and timing—ensuring that micro-interactions enhance the user experience meaningfully rather than being added unnecessarily