The Thinking Behind Micro-interaction

Many people have asked me how do I build cool animations or prototypes? Did I learn how to code myself? What did I study in school? What tools or software to learn or buy? What is the best tool for a beginner?

Actually, the best interaction is not the actual “cool,” “wow” animation or how it was actually coded. For example, Dribbble always showcases fancy and fabulous works, but some of the interactions and animations are unnecessary. The most important thing you need to keep in mind is

“UI is not Disney movie; please STOP crazy animation.”

Simply put, the complicated animation does NOT equal to good interaction. If you create a complex animation that engineers could not implement it, it is a bad design.

We need to start designing what I called “meaningful interaction.” Meaningful interaction is not about the actual tools you use to build it, but what kind of user experience you try to deliver. So I will take one of the simplest and common interaction as an example to describe how I think and build micro-interaction and the workflow I prepare before I start building micro-interaction. Check out the example below, pre-prepare something before open prototyping tool is necessary, even though it is a really basic drag and drop interaction.

credit card prototype, made by Framer.js ( Check out my dirty code 😁 http://share.framerjs.com/neo05zn07em0/ )

The thinking before implementation

Before I open Framer.js, there are a few steps that I always bear in mind. The first thing I love to do is to think about the story and purpose behind all of the features. Why would we need this interaction? What is the benefit for our users? Does this interaction delight the user experience? Can we reduce the restless loading and waiting experience? These are some of the questions that I continuously ask myself and explore possible solutions before the detail design. To give you a bit more detail, I have put together a few pointers and checklist to help you understand my thought process:

A. Hand sketch and map out the transitions of the interaction. First, I quickly sketch some ideas on my notebook. This helps decide the key interactions, animations, and elements on the screen that are needed. I would draw the interaction and take notes by using three different colors. Black for basic and static UI elements. Red for key points I want to keep in mind such as properties or staggered time. Yellow for special cases such as swipe, drag or long touch behavior.

generally sketch the the interaction possibility

B. Story: Before starting the visual design, it’s better to understand the core concept behind this design, what kind of story or message we want to deliver to our user. So that I can figure out which elements can be kept or disappeared on the next screen. Which part plays the key roles in describing the spatial relationship in this design.

visual design for credit card
http://share.framerjs.com/neo05zn07em0/

C. Behaviour/interaction: It’s always better to use simple and intuitive interaction rather than complex interaction. For example, the picker on the screen will automatically disappear when user stop drag it. User don’t need tap close button to leave a temporary screen.

analyze the micro-interaction for drag & drop behavior

D. Staggered time in a single screen : In addition to putting the thinking behind the design, I will also consider the display priority. Always remember to display UI elements and components in storyline order rather than showing it all at once. The fastest way to get micro-interactions done — whether it is having a cool prototype tool or finishing a prototype in such short time — is to estimate that detail staggered time of your entire UI elements.

staggered time plan

E. Logic between screens : Don’t just think about the interaction itself. Think in terms of screen to screen transition. Will two UI elements/components animate at the same time or independently? When will user swipe to next screen, or does it have a slightly staggered start time?

the process when I think about the logic between screens

I hope these tips will help you understand the importance of how micr-interactions can be beneficial to the overall user experience. Please remember, prototyping is the process of making user experience possible, and never underestimate the power of pre-preparation to improve the workflow before you open up any prototyping tools. The more you plan, the less effort you spend on the tool itself.