About Micro Interactions

New week-long project: prototyping (care about) micro interaction. Just a simple "pick a topic, work on it" method and the tutoring was provided by Jorge Furuya and Paulo Coelho from Google Android (yay). 

Our group started by reflecting about how sharing content lives on your daily routine using our smartphones. Our scenario considered how we access our contacts, considering that today one person can be reached through multiple channels. After initial discussion, we agreed that the amount of steps and the focus on the channels didn’t represent how we deal with information.

The first level of discussion happened on paper. Using quick sketches, we discussed if the problems we identified were related to visualization, flow or microinteraction. After establishing a common workflow, where the receiver is picked before the channel, each one of us worked on a different perspective of a microinteraction.

My personal perspective was to enable sharing on a multi level context. First, the user can pick with person he or she recently interacted by dragging the native share button down. Secondly, the user can have access to a regular list view of all other contacts, alphabetically ordered.


The first interaction is helpful to share information within a context. Example: if you are in the middle of a conversation or if you frequently talk to someone. The interaction of dragging on a single movement saves times and avoid mistakes by the positioning of each contact on the screen, as well as the animation fading the background and allowing a more focused task.

To explore the provided tools and the subject, it was first decided to explore a gestural interaction using Principle. After testing, it was clear that these two gestures were clear and effective to this use case (dragging in one movement to share and dragging the share icon down to a more complete view). After that, a quick demo prototype was created using framer.js. Many variations in animations were created to also avoid the finger covering the profile picture of contacts. The last step was to add name labels to support the identification of the contacts.

Although the sharing redesign was inspired by other elements on the Android interface, the button positioning still fails in communicate that it is a draggable element. Posterior tests confirmed this hypothesis and two or three iterations could have better approached the situation of multi-level sharing. The second step, picking the channel, was not addressed and it could impact the sharing itself, since it’s not visualized on the first moment.

Prototype demo: http://share.framerjs.com/vunjt2j6uhtw/

Presentation: https://goo.gl/8S2Ywj