Embr Waves

April 20, 2019

 


What do temperature fluctuations look like? What do they look like when they are fairly frequent (within 1-2 seconds per pulse/pause) and infrequent (5 seconds per pulse, 30 seconds in between).
Is there a difference between how warm and cool feel?

Constraint 1: Design something that does not bloat the download size of the app. This excludes GIFs and video files.

Constraint 2: Design something quickly that one can assume is implementable by the dev team. This calls for reasonably available shapes and animation parameters within Objective-C/Swift or Java, without getting stuck installing additional cross-platform graphics libraries.*

*There is a light-weight set of tools for SVG animation export, from After Effects to web / mobile native. It is called Lottie/Bodymovin and was made by Airbnb. We could look into this later if we decide we want something that would alleviate some development work. But having gone through this process, I don’t think it’s necessary. The content below gives us a solid foundation to see if the visualizations help perception and engagement. I’ve described the steps I took for each visualization which could probably be implemented in much the same way in code.

One core belief in all these experiments is: although the temperature rises and falls on what is a linear axis, it’s probably more appropriate to think of it as pressure and dissipation, rather than forward and backward (or up and down, or bigger and smaller).

Put another way - like a warm gust of wind hits your face then dissipates (rather than pulls back). Or a pebble hitting the water.

 

EmbrWaves_0.gif

01a.

The simplest - an expanding circle.
2 second expand.

Expanding past the edges of the screen feels good. But weight too flimsy.

EmbrWaves.gif

01b.

Increase in intensity displayed as an increase in line thickness. From 2px to 150px.

This feels like the right track! Feels like more before going away.

EmbrWaves_1.gif

01c.

Added transparency ramp (from 100% opaque to 0% transparent) for more dissipation.

Surprisingly (for me) this works counter the increase in intensity of the thickness ramp in 01b.


Warm vs Cool

EmbrWaves_3.gif

02a.

Blur as an attempt to visualize a “low pass” for warming.

Looks shmutzy :)

EmbrWaves_4.gif

02b.

Rather than blur, adding glow to the wave - much better!

Has a rolloff while maintaining fidelity.

EmbrWaves_5.gif

02c.

If warmth has fuzzier edges, maybe cold stays sharp.

Most obvious way to reinforce the nature of the temperature (without coloring the waves) is changing the background color.

Coloring the waves on a flat background would be much less effective. As the sensation is in the foreground, and white comes forward and darker recedes.

(Also snow is white, and the interior of a fire is white.)

More “stuff?”

EmbrWaves 2.gif

03a.

Nah. Starting to look “trippy,” looses the zen too.

EmbrWaves_7.gif

03b.

How about some turbulence for more “watery?” Don’t know if it’s necessary - the experience doesn’t really have turbulence.

(Also don’t know how the developers would easily do this sort of thing - food for thought though.)

 

What about that sine wave?

EmbrWaves 3.gif

04a.

Not bad! Kinda pretty. The sinewave amplitude increases during pulse. Somewhat on brand.

The troubles I have with it are: the directionality doesn’t match the experience on the wrist (which is radiating outwards from a central source) so it’s more of a cerebral representation rather than an experiential one.

In my opinion the circle expanding from the middle feels more peaceful and like breathing which may also go along with future meditation features of the app.

But let’s see what else we can do.

EmbrWaves 3_1.gif

04b.

Two sine waves for more waves :)

One is cropped within the circle for some depth.

EmbrWaves 3_2.gif

04c.

Sine wave in the circle half transparent for more separation.

What if it’s slow?

EmbrWaves_8.gif

05.

This one is easy.

We give the user a timer, but use degrees instead.

Here is a demo of: the band reached it’s pulse height and is returning to baseline. At which point it would rise with whichever visualization we chose.

And we use decimal points if the time between pulses is long, so there’s always action.

This is a four second return with four decimal places, and it already feels like too many decimals.


06.

Some miscellaneous sauce.

Short of loading some 3d package into the apps, I can’t think of any reasonable way to implement this. But it looks interesting and high tech.

Final Thoughts.

Personally I would go with 02b for warm and 02c for cooling and add the indicator from 05.