MICROINTERACTION

WHAT IS A MICROINTERACTION?

Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.

Microinteractions impact things like:

• Turning things off or on
• Commenting in any digital medium
• Changing a setting or process
• Viewing a notification or message
• Sliding down the “screen” on a mobile device to refresh content
• Interacting with a data element, such as checking the weather
• Accomplishing any single task
• Connecting devices, such as those for multi-player games, or printing from your laptop
• Sharing or liking a photo or video on a website

Four Parts of Micro-Interactions

• Trigger: Initiates an action
• Rules: What happens in the interaction
• Feedback: How you know what’s happening
• Loops and Modes: What happens next

Every interaction includes these parts to create a cycle for how things work. According to Saffer, most people don’t even know or think about micro-interaction contact unless something goes wrong.


When you get down to the visual design of these elements, keep a few things in mind:

Micro-interactions must live on through repeated use. What’s fun and quirky on first use might become annoying after 100 uses. Be cautious of gimmicks or odd design cues.
Simplicity rules. Simple type, simple language, simple colors, and simple design. Don’t make the design any more complicated than the action.
Give each micro-interaction a human voice. Text should read like people talk, not like a machine.

Add a fun divot with animation, but don’t go crazy. Consider the bouncing icon in the dock of your MacBook as a program loads. It lets you know the program is responding with a simple animation but does not get in the way of what you are doing.
Create a visual harmony with other elements. If your app has a blue color scheme, micro-interactions should use the same hues so that the visual connection to the parent design or app is there for users.

Don’t overthink it. Overdesigning a micro-interaction can be lethal. Let’s go back to the simplicity of the text message notification. Just a simple, singular display on the screen with enough information to be effective – who the message is from, what the message contains and a way to respond.

Consider each detail with care. Because micro-interactions are so small, every element of the design matters. Ensure that every detail, down to the last pixel, is perfected before launch.

Think about further adaptations or how subsequent micro-interactions will work. Does the exact same thing happen every time for every user? Or are there changes to the micro-interaction over time? (Consider the alarm that gets louder each time after the snooze button is hit.) These smart details will set the best micro-interactions apart from everything else.