I wanted to share an interesting article on Prototyping for smaller devices, known as MicroInteractions.
This article by GrandCentrix shows how to get the interaction you want, on paper, before doing it using scripts, to be able to display and mimic it in a presentation format:
Static wireframes are perfect for getting your information architected. But when it comes to bringing your app to life, you have to prototype the motion. Why? Because motion is emotion. And you can quote me on that.
Whether a coiling bar, a fluidic zoom, a physically realistic bounce, an amusing animation – movement brings apps to life. And interestingly enough, there are countless ways to design for even the simplest of interactions.
Prototyping microinteractions will be even more important when you’re designing for small interfaces like Apple Watch. And that became apparent to me the day we anxiously huddled around our conference room here at grandcentrix to watch Apple present its latest children to the world:
We conceived, designed and developed Apple Watch as a completely singular product. You know, you can’t determine a boundary between the physical object and the software.
So how do you blend the boundary between the physical and digital?
Forget about those ultra long text descriptions of complex transitions like this:
On load: The individual bars representing a degree fly into view from the left with such momentum that they spring back and forth until coming to rest in their final position. The appearance of each bar is staggered with the bottom bar appearing first in such a way that the entire column of bars moves like a Slinky.
By focussing on motion, you can
- suggest hierarchy or relationship between elements or views
- provide feedback for some tap, press, swipe or dial
- show a state change
- amuse the user
For more information, go to: Motion is Emotion: Prototyping Microinteractions for Apple Watch with Framer Studio.