Hello. I'm Laurel Natale.

I'm a UX Designer living in Philadelphia, PA.
I design human experiences on digital devices.

Storytelling with Mini-animations

April 4, 2017

What if we could create micro-moments using mini-animations that tell a tiny story that is resolved by the user? Imagine if every story were like this:

Happy, romance filled, they saw each other and fell in love instantly, delighted by each other and lived happily ever after. The End. What a bore that would be! It would be boring for the tellers and boring for the listeners. The Hero's Journey, identified and named by Joseph Campbell, demonstrates how storytellers need to take their audience through a series of emotional events in order for them to relate and empathize with the main character/s. The individual leaves home, is tested and put through some sort of emotional ringer and eventually, just when all was thought lost, there is victory and a happy ending. In other words, a good story needs:

"Drama? I don't need no stinking drama!" I hear you Interaction Designers say, "We want to create Delight! We want to make our humans happy!" Then let me have you take a look at Google's Micro-Moments.  The three stages inside a micro-moment are:Immediate Action  |  Demand for Relevance  |  Loyal to Needs                                                                orHero Leaves Home  |  Go Through Challenges  |  VICTORY(please say victory  in your whispered "this is awesome" voice)

"OK," you say, "I get it. Stop being so dramatic. What's it all got to do with me?"

Before I go there (Oh, the suspense!!!), let's talk about micro-interactions. Micro-interactions are nicely packaged little parcels of animation that communicate something important and functional for our humans. In 2015 micro-interactions became the buzzword for the design community. Defined as,

“…small, preferably functional animations that support the user by giving visual feedback and displaying changes more clearly.”

micro-interactions are created  with the intention of communicating a large amount of information in a small amount of time. Here's a nice example from Sailesh Gunasekaran of a submit button that informs the user that the information as been submitted successfully.

Interaction and UX designers love things that create delight.That moment during a user testing session when a stakeholder’s customer lights up because something just made them happy? That moment is pure gold. It validates our work and we feel a personal accomplishment. It also makes the stakeholder happy which is a professional accomplishment. The graphic designer is praised for creativity, the developer is praised for impressive coding and the UX designer is praised for taking that human’s micro-moment and sprinkling in some good, old fashioned happy. Beers for everyone, it’s time to gather around the keg and and compliment each other on a job well done! Now... what if we could (speaking of beer) tap into other emotions which are tied to human needs? And..what if we could use micro-animations to create micro-moments inside a micro-moment that our humans would invest in because their actions would resolve the story's drama? MIND BLOWN, RIGHT? AM I RIGHT? I am..right, I am. Alright, so it's actually not as dramatic as that, but let me give you some examples of what I mean.Take this cute mini-animation from Alex Knight:

Something's in there, clearly. It can't get out. This little present wants to be opened! When I showed this to a few of my non-UX, non-designer, non-techy friends (why is there not a word for this?), a few of them became annoyed with it. It created a tiny sense of anxiety for them. Isn't that fantastic!?! They wanted to open it so they could stop the anxiety. Here's another mini-animation by Lingualeo of a shopping cart:

The shopping cart is  surprised that it's empty and then sad that there is nothing is in it, but put something in the cart and suddenly those tears turn into a big joyful smile. As if to say, "Yes, human, you just made me happy! You are the hero of this micro-moment mini-story!"Here's the super cool thing (as if this isn't already!) about applying emotions to micro-animations - they become universal. Back to the seventies, early seventies, 1971 to be precise, two researchers named Paul Ekman and Wallace Friesen decided to test Darwin’s hypothesis that certain facial expressions are universal and recognized by humans of all cultures, anywhere in the world. To test the hypothesis, they gathered up a couple people from the Fore Tribe in Papua New Guinea. An interpreter read stories to them, emotional stories that explained the emotions associated with them such as “her child has died and she feels very sad.” While the Fore members were listening to the stories, the researchers took photos of them and the facial expressions they made. Afterwards, the Fore members were asked to match photos of Americans’ facial expressions to the story. The researchers then took the photos they snapped of the Fore Tribe and showed them to Americans. Not only did the Fore Tribe and Americans recognize each others facial expressions but they recognized them because they both displayed the same ones. The same 6 ones to be exact - anger, disgust, fear, happiness, sadness and surprise. The research done by Ekman and Friesen proved Darwin’s hypothesis correct and, more importantly, gave Interactive and UX Designers a conversation chart to work with.

As designers of interaction, we can use all the human emotions and effectively communicate them to the humans we are designing for. Sometimes the delight comes after the frustration, sometimes we can provide relief by first creating sadness. Perhaps creating these Yin Yang emotional moments may eliminate the indifference that is produced from an animation created solely for delight? In any event, micro-animations can be created to trigger real human micro-expressions and actually create micro-moments that can be fulfilled inside the process of fulfilling another micro-moment. That sounds like a pretty big, and delightful, experiment. I hope you try and test emotional animations and tell me about them!