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.
Photo credit: UXPin
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
Photo Credit: Slack
Slack, above, is a great app that does all three of these jobs in one package. The app allows users to communicate in a closed-loop chat, attach documents and tag one another. All the while, the app provides real-time updates (such as marking messages as read) and helps users navigate around. It also uses notifications and other small actions to keep users in sync with what’s being communicated.
Microinteractions impact the user and function of the app in a variety of ways:
- Turning things off or on
- Commenting in any digital medium
- Changing a setting or process
- Checking a message or a notification
- Sliding down the “screen” on a mobile device to refresh content
- Interacting with a data element, such as checking the weather
- Accomplishing isolated tasks
- Connecting devices, such as those for multi-player games, or printing from your laptop
- Sharing or liking a photo or video on a website
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 way.”
Photo credit: UXPin
In the example above designed with UXPin, we prototyped a website for finding fashion models. A card represents each model, showing metric measurements and a business card download when you hover over the person’s face. For this particular scenario, the microinteraction reveals information smoothly. The animation adds some discoverability, making the design respond more lifelike to the user’s actions.
What Do Micro-interactions Really Do?
As you can see from the list above – and in no way is it inclusive of every micro-interaction – micro-interactions serve multiple roles. But speaking less specifically, they should always create engagement.
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
Photo Credit: Elevate
The Elevate app above uses each of these components in the game-style learning interface. Users must touch the screen in order to answer the questions and correct answers while nifty animations serve to delight users. The app allows users to train their brains (the pictured game is designed to help you with grammar and usage). Users can share scores and results with friends and other app users.
It sounds like a lot for a simple game to do, right? But these are the kinds of things users have come to expect from almost every app.
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.
- Trigger: Initiates the microinteraction. For example, I click on a heart icon to favorite a page.
- 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.
- 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.
- 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.
Photo Credit: Wunderlist
It’s the same when checking off items on a to-do list, like the one above from Wunderlist. By ticking a check mark next to an item, you tell the app to trigger the micro-interaction of striking the item off your to-do list. In an instant, you now know which items are complete and which are pending. The satisfaction of completing a task further encourages you to complete more tasks, thus interacting further with the app.
While this is a really simple example, there is a lot to learn from it. Primarily, it shows us that users want to engage with a micro-interaction in a way that clearly creates a next step (the loop) and want it to work intuitively enough that it can evolve over time and usage.
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.
Photo Credit: Dark Sky
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.
Takeaways
Micro-interactions are the key component to an app design that people want to use. They help create engagement, contribute to function and delight users. Pull it all together and you need to create tiny moments that users don’t see, but need or want so that your app is a vital part of their daily lives.
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.
