Microinteractions are the functional, interactive details of a product. If a music player is a feature, then adjusting the volume or changing the track is a microinteraction within that feature.
Based on the insightful work of author Dan Saffer, a recent lunchtime lesson at MercerBell explored the foundations of microinteractions, breaking down their components to reveal methodologies to identify problems and improve the details (or ‘microinteractions’) of digital products.
Recently, a few projects have demanded knowledge on less-than-usual digital ecosystems. Kiosks, in-flight entertainment, virtual reality and wearables are all examples of areas that few designers have had the opportunity to work on, due to the specialty knowledge they require, or simply the newness of the technology. By taking things back to the details (or ‘microinteractions’) that make up any digital product, we can strengthen our methodologies for creating great experiences, regardless of the medium.
What makes up a microinteraction?
Microinteractions are made up of four parts. A well-crafted microinteraction is one that elegantly handles all four:
- The trigger is what initiates the microinteraction.
- The rules determine how the microinteraction works.
- The feedback presents the rules of the microinteraction to the user.
- And finally loops & modes are the meta rules that govern the microinteraction.
For example, consider the microinteraction of taking a photo on an iPhone:
The trigger is the circular button at the bottom of the screen. Pressing this initiates the microinteraction. Feedback is communicated to the user through a number of cues: a shutter animation plays over the top of the viewfinder, the trigger changes colour, and the photo that was just taken appears in the bottom left-hand corner. The flash, HDR and other icons are examples of modes – settings that modify the rules of the primary action. An example of a loop could be the microinteraction remembering the user’s settings next time they open the camera.
These are familiar concepts we encounter every day; however, by clearly articulating them, we can add method to our digital design and review process. For example, let’s write out the rules of an ‘add to cart’ microinteraction:
- Check to see if the user already has this item in their cart. If so, change ‘Add to cart’ to ‘Add another’.
- If the user holds shift and clicks the ‘add to cart’ button, a stepper appears.
- Clicking on the ‘+’ increases the count by 1.
- Clicking on the ‘-’ decreases the count by 1.
- User clicks button.
- Item is added to shopping cart in the quantity indicated by the stepper.
From here, we can ask ourselves some questions to identify problems and improve the microinteraction:
Are the triggers discoverable?
Hidden triggers, like the above quantity stepper aren’t necessarily a bad thing, but if they’re commonly used, it’s a good idea to make them easily discoverable.
Does each rule have corresponding feedback?
Using the list of rules, we can easily identify every point of user interaction. From here, we can ensure each one has suitable feedback. For example, we may find the price needs to update when the user clicks the ‘+’ symbol.
Are there any figures or characteristics articulated in the rules?
Figures and characteristics can indicate testing opportunities. In this example, it may be worth changing the count increments to 2 or more if the user was buying an item frequently bought in large quantities (such as wholesale goods).
Are there opportunities to evolve the rules? What happens when the user returns the second time, or the hundredth time?
What loop can we introduce to improve this experience over time? Perhaps if the user is logged in and their payment information is known, we could add a secondary ‘add and checkout’ button to speed up the purchase.
By working through these questions and more, we can greatly improve the experience users have with our products. We can turn seemingly inconsequential moments into instances of pleasure and delight. And these moments – or details, as Charles Eames famously said, aren’t just the details, they are the design.