Microinteractions: Make Your Systems Delightful & Effective
“The details are not the details, they make the design.”
What are microinteractions?
Microinteractions are a small piece of functionality. They are a use case boiled down to a single moment, focused on a single task. Microinteractions provide delightful visual feedback, making the interface feel smoother thanks to the transitions.
The difference between a product you love and one you just tolerate is often how you interact with it. One of the most famous microinteractions is the Like button on Facebook, and this article by Geoff Tehan shows how much thought went into the recent changes to this button.
Where and how
There are a lot of potential opportunities for microinteractions. Where and how we implement them is basically defined by the specific needs of the interface.
- Accomplishing a single task
- Managing an ongoing task
- Viewing or writing a small piece of content (i.e., status message, comment)
- Connecting one device to another (i.e., computer to phone)
- Uploading and downloading
- Switching on/off (features, functions, or the entire UI itself)
- Social media sharing
- Pull-down and hidden menus
- Showing changes (i.e., an animation to show the Play button changed to a Pause)
- Highlighting calls-to-action
- Adjusting setting preferences or continual elements (i.e., volume)
- Preventing user error
When we talk about microinteractions we have to mention Dan Saffer (Interaction Designer). He explains that an effective microinteraction follow the following structure:
The trigger is the starting point, it is whatever initiates or motivates a microinteraction. Pushing a button is a trigger.
An important aspect about triggers is that the more frequently the microinteraction is used, the more visible it should be. The best triggers are those that launch users into the actual interaction: the rules.
Rules are what happen when a user triggers the microinteraction.
They determine how the interaction works. Basically, rules are what the microinteraction does. For example: if you push the button of a lamp, the lamp turns on.
Rules must reflect constraints. Business, contextual, and technical constraints must be handled. Do not start from scratch. The most prominent default should be the action that most people do most of the time.
The feedback is the verification that you get from the system. In other words, it is the indicator of the result of the microinteraction.
An important aspect of the feedback is that we must understand what information the user needs and when. All feedback relies on this understanding. Also, it is important to use common UI elements to provide feedback messages. Do not make feedback arbitrary. Link the feedback to the control and/or the resulting behavior.
The feedback should not always be visible, it can also be a sound.
Another important point is to always try to speak human language.
Loops & modes
Microinteractions are brief in nature, and they must be designed for repeated use.
The loops are considerations about how the microinteraction is reused, including how long it lasts and how it changes for different uses. Use loops to extend the life of a microinteraction.
Most microinteractions should be mode-free, but sometimes they are necessary. If you must have a mode, make it its own screen when possible.
This article is inspired in Dan Saffer’s speak session Microinteractions: Design with Detail at the UX Lx Conference.
Other sources: UX Pin, Dribbble