In our previous research, we discovered that the 5-5 breathing technique—inhaling for 5 seconds and exhaling for 5 seconds—can help people achieve a state of calm and relaxation. To enhance this experience, we decided to incorporate a visual guide into our interactive installation. The visual design is divided into two parts:
1. A fixed animation that guides the 5-5 breathing rhythm.
2. A dynamic graphic that responds to the user’s actual breathing patterns.
My role is to design the fixed animation, which serves as a clear and intuitive guide for users to follow the 5-5 breathing rhythm. However, this task has proven to be more challenging than expected.
Initial Attempts and Challenges
1. Rotating and Expanding Dots:
I started by experimenting with rotating and expanding dots, hoping to create a sense of rhythm and flow. However, this design conflicted with the dynamic sphere in the second part of the visual, creating visual clutter and confusion.
2. Expanding and Contracting Circles with Halos
Next, I tried using a circular design that expanded outward during inhalation and contracted inward during exhalation, accompanied by a glowing halo effect. While this was visually appealing, it still overlapped and competed with the central dynamic sphere, making it difficult for users to focus on either element.
Key Insight: These attempts revealed that centralized and circular designs are not suitable, as they conflict with the dynamic sphere that occupies the center of the screen.
3. Background Color Transitions
To avoid overlapping with the dynamic sphere, I shifted my focus to the background, using color transitions to indicate the breathing phases. For example:
Inhale: Transition from a cool color (e.g., blue) to a warm color (e.g., orange).
Exhale: Transition back to the cool color.
However, this approach introduced two new challenges:
-
-
-
Color Interpretation: Users might not intuitively associate specific colors with inhaling or exhaling, leading to confusion.
-
Transition Smoothness: A sharp transition between colors felt abrupt and unnatural, while a slow, gradual transition made it difficult for users to distinguish the exact moments to inhale or exhale.
-
-
Current Direction and Next Steps
Based on these challenges, I’ve realized that the fixed animation needs to:
Avoid Centralized and Circular Designs: To prevent visual conflict with the dynamic sphere.
Provide Clear Timing Cues: Ensure users can easily identify when to inhale and exhale.
Maintain Visual Harmony: Complement the dynamic sphere without overwhelming it.
Moving forward, I plan to explore the following solutions:
Edge-Based Animations: Create animations that occur at the edges of the screen, such as a progress bar or waveform, to guide breathing without interfering with the central sphere.
Text or Symbol Indicators: Use simple text (e.g., “Inhale” and “Exhale”) or symbols (e.g., arrows) to provide clear instructions.
Subtle Motion Cues: Incorporate gentle, non-intrusive motion (e.g., flowing lines or particles) that aligns with the breathing rhythm.
Conclusion
Designing a visual guide for the 5-5 breathing technique has been a process of trial and error. While my initial attempts faced challenges, they provided valuable insights into what works and what doesn’t. By focusing on edge-based designs and clear timing cues, I’m confident that the final fixed animation will effectively guide users toward a calm and balanced breathing experience.
