Mobile Design Trends 2016: Magical Micro-interactions

You understand and have created an app that looks amazing. It has a cool story and the visual design is impressive. But that’s not enough — it needs more, something that really connects with users and feels alive.

That’s where micro-interactions come in.

Micro-interactions are the secret ingredient when it comes to creating an addictive app. These design moments keep users engaged, create unexpected delight and are almost invisible to everyone but the designer. 

You come across micro-interactions hundreds of times a day.

Each time you end an alarm, see a text message flash across the screen, are reminded of your turn in a game, skip a song in a music player or even as you change course based on traffic alerts during your morning commute. Every one of these tiny moments forms a micro-interaction. And it’s likely that you don’t think about any of them, but each one contributes to why you continually use specific apps day after day.

What Are Micro-interactions?

A micro-interaction is any single task-based engagement with a device. Most of these engagements are barely noticeable, provided the flow feels smooth.

As described in Dan Saffer’s excellent book (highly recommended), micro-interactions help fulfill three specific functions:

  • Quickly communicate status or feedback
  • Visualize the result of an action
  • Help the user manipulate something on-screen

Simply put, a micro-interaction is an action from the user that triggers another action on the part of the device. Each of the interactions is based on a human-centered design concept, where the digital tool works and functions mirrors how a person would actually do something. And that’s the secret sauce to usability – interactions that behave as expected and in a “human”.

What Do Micro-interactions Really Do?

When you are considering how to design a micro-interaction, think not only about the specific action or task at hand but also what it should “do” as part of the overall user experience.

In essence, micro-interactions should make the user feel or do something physically:

  • Touch the screen
  • Smile with delight
  • Learn or understand something
  • Connect to another user
  • Elevate 

As explained in the guide Mobile Design Trends 2015 & 2016, these actions are at the heart of why micro-interactions work. These tiny, lightweight “digital moments” feel like and are perceived as an emotional linkage. The micro-interaction allows the user to feel something or reach out to another user or object.

Four Elements of a Micro-interaction

At the forefront of micro-interactions is Dan Saffer.

Just Google “micro-interaction” and his name is linked to almost all of the definitive information on the topic in some way. He wrote the book – quite literally – on this topic. Saffer focuses on a four-part structure for micro-interactions and it is truly the best way to understand how to create them.

  1. Trigger: Initiates the microinteraction. For example, I click on a heart icon to favorite a page.
  2. Rules: The way the interaction behaves. The user cannot “see” the rules, but only understands them through feedback (the next stage). In this case, clicking the heart icon will add that page to the user’s feed.
  3. Feedback: How the design communicates the microinteraction to the user. The heart icon filling with color and bouncing, accompanied by a dissipating “Saved to feed!” message informs users of what happened.
  4. Loops and Modes: Determines the length of microinteraction and how it repeats or evolves with time. For example, the micro-interaction we described now evolves to deliver us content from our favorited page, and might even remind us in 6 months when we first liked the page.

Each of these parts is present in every interaction to create a cycle for how things work. As Saffer describes, most users never even notice micro-interactions unless they break down.

Are You Considering Feedback?

Feedback is the most important part of the micro-interaction cycle. This is the stage of the micro-interaction where the user and interface connect. Feedback determines exactly how a micro-interaction will work.

Think about it this way. You need to get up at 7 a.m. and set an alarm on your phone. What happens when that alarm goes off? Do you get up and turn off the alarm? Or do you hit snooze? This simple action tells the app what micro-interaction comes next – reset the alarm for the next cycle or go off again in 9 minutes. The feedback loop between the user and system is now complete.

Without the initial feedback from the user, the sound of the alarm never stops. It does not reset. The open cycle allows it to work again over and over.

Designing Details is at the Heart of Micro-interaction

The way a micro-interaction is designed and how you handle the details will make or break your projects. Interaction is a must-have design element that you can’t ignore.

But how do you design it? What should you think about?

Micro-interactions must survive repeated use. Avoid gimmicks or animations purely for the sake of being clever. Remember your microinteractions must have longevity since they can’t feel annoying with long-term use.

Simplicity is the key. Straightforward language, clear typography, vibrant colors, structured design. Execute the fundamentals well and don’t add any more detail than you need to.

Micro-interaction must feel human. Text should read like people talk. The design should communicate emotion in all its forms.

Mind the copy. All copy should match the moment. Apply the correct tone so the text feels respectful, helpful, and as lighthearted as possible.

Create some fun with animation, but exercise moderation. Think about how the icons in OSX bounce as new programs load. The animation informs you that the program is responding but it doesn’t burden your current actions. Strive for the same usefulness in your animations since they are much more than just visual delight.

Seek harmony. Contrast is your friend, but use it carefully. When you get down to specific moments of a user experience, details like color theory matter more than you think. If your app uses a green color scheme, make sure the colors flow through your micro-interactions. Each moment should feel visually connected to the larger app design.

Think about how microinteractions evolve. Does the microinteraction behave exactly the same on the first and thousandth time? Or does it evolve over time? For example, think about how an alarm becomes louder as you keep hitting the snooze. If you want to stand apart from other designs, you must consider these details.

However, don’t obsess too much. Overdesign is the death of micro-interactions. Once you’ve communicated the message in a quickly and delightfully, get out of the way and smoothly transition back into the normal flow of tasks.

To learn more about useful mobile design trends, check out the free e-book Mobile Design Trends 2015 & 2016. Across 140+ pages, the guide deconstructs popular trends into simple techniques based off of 71 examples.

Full article here