How to represent inhalation and exhalation periods with visual and audio during a breathing exercise?

Question

I am thinking about designing a mobile application that would guide the user through a slow breathing technique. Typically, inhalation and exhalation would have a fixed duration of a few seconds each. Graphical and audio feedback should provide clear indications of when to inhale, when to exhale, and how to adapt the pace to meet both end-points (empty or full lungs) at the right time.

Existing solution

Found examples of such applications mostly display a vertical bar filling at constant speed from bottom to top during inhalation, and emptying from top to bottom during exhalation. Here are a few downsides to this approach, apart from the absence of sound:

• The constant speed of the filling and unfilling does not fit the way we breathe: lungs fill quickly at the beginning and slow down when approaching the end-point (full lungs). This can be compared to car breaking, when strong force is applied on the pedal initially and gradually released to adjust to the stopping point.
• A thin, vertical bar is not adapted to minimalistic UI design: the screen space should be used as much as possible.

Possible improvements

Presence of both graphical and audio feedback:

• providing a compelling experience when using both,
• relying on the graphical interface when in a noisy environment, such as public transportation, and allow for hearing-impaired users,
• enabling the user to practice while closing the eyes, and allow for visually-impaired users.

The user should also be able to quickly adapt his/her breathing pace, in order to avoid taking too much air too quickly (resulting in an almost-apnea during the last phase of intake), or too few air (resulting in a rushed end-phase of air intake). The above vertical-bar solution proves to be subpar in this area (I realized it as soon as I tried it).

Finally, the aeshetics should have an organic feel to them. For example, the process could be represented as a growing and shrinking circle, moving at an "organic" pace.

What graphical and audio feedback types and techniques do you think would suit this breathing motion?

Answer 1

I just saw this "Paced Breathing" app on the Play Store. I think some of it's features fulfill your criteria like - a variable but linear path of breathing pattern, adjustable session times, visual, audio and haptic cues, custom breathing profiles and color themes.

You can make a few changes in the visual representation. For example, replace the lines with a proper trapezium (Isosceles Trapezoid to be precise). I think a growing and shrinking circle represents normal breathing but not the kind of paced breathing that you do during meditation (more deep).

As you mentioned, it's not entirely constant. For this case, an Isosceles Trapezoid structure makes sense - increasing slowly, a period of holding the breath and then releasing slowly.

Hope this helps!

Answer 2

A dot that grows and shrinks—which you request because it has an organic feel—can signal the breathing rate by switching from expansion to contraction, showing when to breathe in and when to breathe out.

If the dot that grows and shrinks is inside a circle that represent lung capacity, then you can help the user see when to take shallow breaths and when to take deep breaths.

You can combine the two. Maybe it's better to put the circles in a box rather than in a circle, because too many circles look like eyes, eggs, or other organic objects.

Sound

I suppose you could also combine this with sound, and you could make the volume correspond to how deep/full the breath is. That would allow users to close their eyes or to focus their eyes on something else.