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.
The simplest - an expanding circle.
2 second expand.
Expanding past the edges of the screen feels good. But weight too flimsy.
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.
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
Blur as an attempt to visualize a “low pass” for warming.
Looks shmutzy :)
Rather than blur, adding glow to the wave - much better!
Has a rolloff while maintaining fidelity.
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.)
Nah. Starting to look “trippy,” looses the zen too.
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?
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.
Two sine waves for more waves :)
One is cropped within the circle for some depth.
Sine wave in the circle half transparent for more separation.
What if it’s slow?
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.
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.
Personally I would go with 02b for warm and 02c for cooling and add the indicator from 05.