Motion is hard

Hey I wanted to share a new library reference I captured the other day.

Click here to learn how to sell motion to stakeholders

Whenever I encounter motion on my phone I tend to notice the design and execution. I quickly create a video capture for analysis. I add it to my resource library.  

But more than that, I challenge myself to learn from every encounter, think critically about the goal of the interaction, as well as the design and execution of the motion involved. I ask myself what's working, what's not working, and what would I do different? I look at the choreography. I look at the forest and the trees.

I look at the 4 hallmarks of good motion which I call Continuity, Narrative, Relationship, and Expectation. I look at mental models, affordances and signifiers. 

The other day I was using my phone and noticed this interaction from iOS.

At this point in my career I could probably write a book on everything I see going on here. I played with this interaction for about 5 minutes, running it nearly 30 times, slowing it down in my mind. If you want to design motion for products, I recommend you incorporate this methodology into your learning practice. 

What became immediately apparent to me is that the choreography is completely off.

The options menu should appear immediately and not be reliant on the upward swipe. In fact it took me a few attempt to even bring up the menu. Our mental model for the vertical chevron signifier is as a button, not an indication of swipe direction. The design of the menu should contain its own affordance: by seeing it cropped at the bottom, the gesture to swipe up becomes apparent.

In choreographing how the menu appears, it should appear without user gesture, and do so slightly after the main transition completes. Choreography is used for cognitively chunking areas of the UI as well as driving attention and establishing relationships between objects. 

What could have been a simple effortless sequence of gestures becomes confusing. It is completely at odds with our mental model of how the menu relates to the main content. 

Other takeaways: motion is hard. Gesture is hard. World class products like iOS have world class designers working on them. People have difficulty designing component motion that is part of a larger ecosystem. Motion relies on interaction. 

My biggest takeaway is still this: use motion to stress test screen design. What may not be apparent in the static design becomes much more apparent when time is added. Motion is not a magic bullet.

Good motion (and good component motion) will form a tight partnership with the UX and visual design (affordances and signifiers). The result should be intuitive, easy to use, and align with user mental models. 

What do you think? What are your takeaways? Leave a comment and let me know.