By Alisa Moon

Ways to evoke emotion through microinteractions.

Experience design beyond the interface

Let’s rewind back to evolutionary biology — humans developed systems through evolution that determine when something in the environment is not “right” to protect against predators. In order to evaluate experiences, the subconscious processes an environment to create a baseline model of expectation, irregular events stand out among an experiential standard resulting in captured attention and a notice in change.

These types of curated reactions have pushed our response systems to new levels, especially when interacting with technology where we synthesize large volumes of information, alerts, notifications, and data — the subtle details that we interact with are referred to, in the industry, as microinteractions.

“Microinteractions happen through the functional, interactive details of a product, and details…aren’t just the details; they are the design.” — Dan Saffer

Orchestrating seamless interactions

The most commonly known way that interface designers integrate microinteractions into interface design is through animation, yet there is a deeper psychology behind a user’s subconscious that strives to naturally and clearly complete tasks.

When humans determine their level of satisfaction with an experience, they undergo a phenomenon referred to as “duration neglect” where the length of time spent is forgotten and the individual instead focuses on two specific moments:

1. The “peak” — the best or worst moment that resonates as a takeaway.
2. The ending — referred to as the “peak-end rule.”

Seem familiar? Similar to the story-telling paradigm of Freytag’s Pyramid, the key to effective engagement is creating touch-points or memorable “moments” that shine through routines and shy away from negative impact.

When achieved, positive surprises are created which trigger dopamine delivery to your users where the level of effectiveness multiplies three to four times above that of a habit-based reward. You get a record number of likes on a social media post? Dopamine delivery. You landed the job you had been interviewing for? Dopamine delivery.

Evoking emotion

Some moments are much more meaningful than others, attempting to shape a few “peak” moments not only stitches together a differentiated occurrence of events, but addicts users to that positive feeling — it’s what keeps them coming back for more.

Creating memorable moments

But what are these moments made of and how do we create them? In the book, The Power of Moments, Dan and Chip Heath reference a few elements that come into play when stitching together such experiences:

1. Elevation: Extraordinary events that rise above the “everyday” and provoke memorable delight rather than transient happiness. A love letter. A ticket stub. A well-worn T-shirt.
2. Insight: The light-bulb moment that enables the ability to see things as they are, referred to as “crystallization of discontent.” Quotes or articles that moved you. Diaries that documented your thoughts.
3. Pride: Milestones that make us feel like we have achieved something and capture us at our best, that turn into motivation. Ribbons. Report cards. Awards.
4. Connection: Social elements that strengthen moments by bridging with others, whether they are close or strangers that become close through the thread of encounters. Wedding photos. Family photos. Vacation photos. All the photos.

Recent studies have shown that the average time spent on a mobile deviceis exponentially increasing, to the point where some averages span up to five hours per day. This significant amount of interaction time encompasses an individual’s daily activities, hence creating a daily timeline of events — aka opportunities to illustrate moments of joy and engage an audience through a mobile interface.

Translating to interface design

The most common way to begin folding moments into designs is by embedding animations that highlight the experiences you have created as “icing” that tops and joins the layers of a cake. When you think about this example, each slice is glued together with delightful sweets and surprises that add variation to a taster’s palette. In design, motion commonly provides continuity in an interaction with smooth transitions and hierarchy reinforcement.

The layers

Dan Saffer breaks down the concept of creating microinteractions into dependent parts that waterfall into such continuity.

Think back to the last time you pushed a button or pulled a lever and nothing happened. How did you feel? The key of usability is to prevent this feeling of confusion or frustration in order for goals to be easily achieved.

The first step is to “trigger” or initiate the interaction using a control or condition. Humans have become accustomed to controls with affordances to provide a “next step” in the cause and effect process of a trigger. The more intuitive the trigger, the more usable the control or interface.

Norman doors are classic examples of false affordances that don’t properly follow through an interaction with a trigger. The rules of a door may be that interacting with the handle, a button, or sensor cause it to open, so a door may look like it is meant for pulling by the way its handles have been designed, yet do nothing when you pull on it. False triggers that cause a user to “hunt” for the proper feedback interrupt continuity and cause frustration.

The effect of an event being “accomplished” is understood through moments of feedback that shape the interaction.

Subtle microinteractions that occur with doors, for example, give us the feedback that it is “open” — the sound of it swinging, haptic vibration of the click of the handle, a change in lighting or temperature when entering the next room — all of these examples are events that play well with the subconscious to orient you into a new “mode.”

Usability increases and is positively influenced when continuity is exercised between task transitions. The sense of fluidity when navigating through events or simply from one screen/mode to another, create cause-and-effect relationships where users directly understand where the peaks and ends of each interaction occur.

The magic touch

Interactions like the door become routine and expected after you become accustomed to an affordance.

“Routine frees up your brain’s resources for more complicated actions. This is why our brains reward us for routine and encourage us to create more routines.” — Liraz Margalit Ph.D.

The probability of experiences becoming routine after a few interactions is a natural way the brain is wired and leads to decision making based on memories formed around routines rather than the event being experienced.Continuous habits often lead to expected outcomes, it’s capturing those moments and creating delightfully unexpected surprises that peak a user’s attention that keeps them coming back.

Balancing moments of joy and usability

After learning about how to create moments and fluidity, it’s tempting to want to jump into using methods like motion to begin creating pleasant interactions into your interface. Yet, there is a delicate balance between having too many events that overwhelm your users and too few that aren’t memorable.

We have all encountered what I like to call the “PowerPoint Syndrome” — think back to grade school when discovering that slides could have transitions and text/objects could animate in and out was revolutionary. Looking back to those wacky elementary school presentations, though, probably makes you say “What was I thinking?”

Designing interfaces and interactions uses the same paradigm.

One way of avoiding the PowerPoint Syndrome is by creating optimal “hooks” through operant conditioning where the memorable moments serve as positive reinforcement that are presented in a scheduled manner and within a short period of time between the behavior and feedback that modify your users’ routine behavior. This way, habits that you want to create and differentiation are properly formed.

The second way to avoid overload is to consider an event that you are creating between task transitions with subtle fluidity to create a pleasant, ease-of-use impression. Start by asking yourself the following questions:

1. Is the user performing an action? The entry point to this action will be the trigger that threads into the interaction.
2. Why is the user going to interact with this event and what does s/he want to accomplish? These are both the (internal) mental model and (external) guidelines that are established as rules for the user to interact with.
3. What would the user expect as an outcome? This is where you will present the appropriate feedback that the task has successfully ended/been accomplished.

After you have broken down the steps, evaluate the tone of the interaction and your brand. Is it serious? Playful and friendly? Calm? Energetic? The voice behind your interface will determine the appropriate types of motion and feedback to utilize. Evoke the natural association you would have with that tone.

Energetic

Include lots of overshoots/follow-through and anticipation to help convey a sense of energy.

Great for social elements and capturing a user’s attention quickly and in a focused way. Instances like gaming applications or personal training work great for this style. A bouncing intro or outro looks naturally energetic.

Playful and Friendly

Squashing and stretching convey playfulness, but can look childish or sloppy if done with a heavy hand. Add in small bounces to establish hierarchy and float in a friendly way.

Apps that allow messaging or educate children should be playful and friendly to familiarize the user with the context s/he is interacting with.

Calm

Use slower, small movements instead of large ones. This is great to use on apps that are more instructional or direct in nature like tools for productivity, healthcare tracking, news and article feeds, etc.

Transition between contexts with small tucks, fades in and out, and slight vertical orientations that tightly shift

Stable

Play with opacity and hue instead of significant movements to convey a sense of seriousness and stability or softness depending on how it’s used.

This is important for apps that establish security or that want to accomplish serious tasks for users and daily activities.

Whether it is using motion and animation, cognitive association principles, or usability standards — evoking an emotional connection with an interface is accomplished by combining a mixture of the correct instances for the app you are building. Evaluate your end-goals and establish the microinteractions that resonate with the user. If you are creating an informative experience, establish that feeling through the memorable moments in your interface. When does a user feel that “Aha!” or feel accomplished during an end-point?What did s/he interact with to get there?

Create fluidity and notable instances that get your users addicted to the feelings you are augmenting. Not all interactions need to be “moments,” establish solid usability that flows with your users’ stories and add in token moments at specific times that matter to make an impact.