Experience design beyond the interface

The hardest part of launching new mobile tech today is that you are competing for face time against Facebook, LinkedIn, Instagram, Whatsapp, Pinterest, Canva, Slack and many other major apps in the app stores.

You might not be building the next social platform, but every user has a certain amount of time they spend per day on their devices, and they are getting more conscious of this fact thanks to Apple reminding them, so even if you are creating an invoicing, payment, process gamification, or workflow management or any other admin related app for that matter, you are competing for face time against serious competitors. You have to design beyond the interface and reach out to end user emotions through clever micro interactions.

Many of the software applications that we design and develop are business automation tools like procurement, inventory, farming and warehouse management systems where users are kind of forced to spend time on the application from a business perspective, so for this reason creating an enjoyable experience to keep staff engaged is equally as important. But our solutions that seek unforced buy-in from users like our digital learning platform or file collaboration platform, this is where vital attention is given to the many small micro interactions that make up a broader experience of the technology. This is where you win over user buy in.

Their in or their out. Your win or your fail.

Really nothing much in between.

Let’s rewind back to evolutionary biology where humans developed systems through evolution that determine when something in the environment is not “right” or “out of place” to protect against predators. In order to evaluate experiences, the subconscious processes an environment to create a level of expectation, irregular events, good or bad, stand out among a standard experience resulting in a 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 combine large volumes of information, alerts, notifications, and data . These subtle details that we interact with are referred to, in our industry, as micro interactions.

Micro interactions 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 designers integrate micro interactions into our interface designs is through animation, yet there is a deeper psychology behind a user’s subconscious that strives to naturally and clearly complete tasks. The natural progression from one step or task to the next in a manner that comes natural and creates an exciting experience.

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:

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

Seem familiar?

The key to effective engagement is creating touch-points or memorable “moments” that shine through routines and shy away from negative impact. In the admin driven interfaces you want to break through the routine and the un-forced interfaces you want to keep the user interested, excited and engaged.

When this is 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. You get an unexpected but hugely rewarding interaction on the device in your hand. Dopamine delivery.

Even on our development team I can see a massive difference when they work on a really well designed interface versus something boring with no real reward. The excitement in a developer when they demo a process that produces these rewarding moments – dopamine delivery.

Evoking emotion

Some moments are much more meaningful than others, so attempting to shape a few “peak” moments not only stitches together a differentiated occurrence of events, but creates a positively addictive feeling that keeps them coming back for more. The reward of completing a task, the submission of an important and meaningful button, the sharing of a file, receiving a much anticipated push notification, the animation of a screen transition or unlocking of a new level badge.

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:

Elevation: Extraordinary events that rise above the “everyday” and provoke memorable delight rather than transient happiness. A love letter. A favourite edible delight . A well-worn T-shirt. A surprise breakfast in bed.
Insight: The light-bulb moment that enables the ability to see things as they are, referred to as “crystallisation of discontent.” Quotes or articles that moved you. Diaries that documented your thoughts. The coming together of conceptual ideas.
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. Badges. Being noticed.
Connection: Social elements that strengthen moments by connecting 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 device is 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.

It is in the palm of the hands of your prospects where you need to touch them most intimately in order to win and keep their attention.

Translating moments 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 micro interactions 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. There should be no moment where a user is left hanging between an achievement and not knowing where to go next.

The first step is to “trigger” or initiate the interaction using a control or condition. Humans have become accustomed to controls that provide a natural and obvious “next step” in the cause and effect process of a trigger – no thinking involved. The more intuitive the trigger, the more usable the control or interface.

Bad door design

Poorly designed doors are classic examples of false offers 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 as it needs to be pushed instead.

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 micro interactions that occur with doors, for example, give us the feedback that it is “open” — the sound of it swinging, touch 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 flow 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 it.

“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.

The balance between joy and usability

After learning about how to create moments and flow, 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 in school when discovering that slides could have transitions and text/objects could animate in and out was revolutionary. Looking back to those wacky primary 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 spontaneity where the memorable moments serve as positive reinforcement that are presented in a scheduled manner and within a short period of time between the behaviour and feedback that modify your users’ routine behaviour. This way, habits that you want to create and differentiation are properly formed. A highly important aspect of creating these moments is consistency. Take 3 to 4 subtle styles, and use them consistently. It is incredibly easy to over design these triggers or moments.

Energetic

Include lots of overshoots/follow-through and anticipation to help convey a sense of energy. Focus on direction, flow and moving in a way that makes progressive sense.

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.

A great example of a platform that makes good use of energy is monday.com both in their desktop browser platform as well as their mobile in app experience.

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 familiarise the user with the context s/he is interacting with.

Calmness

Use slower, small movements instead of large ones. This is great to use in apps that are more instructional, administrative 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.

Stability

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 micro interactions 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.

This is how you build relationships with users and gain their trust to win more of their time in your application.

Experience design beyond the interface – getting your users hooked on your interfaces