Two products hit the market. Feature wise, they're nearly identical and they are competing pretty closely on price as well. The difference, though, is that people love using one of them and want to pull their hair out every time they use the other. Why is the experience of using one so great and the other so awful? More often than not, it boils down to microinteractions.
Microinteractions are the magic little things that keep us coming back to the products we love. They're the satisfying little details that happen when we perform a single task. They humanize products and make them more enjoyable to use. How so? Well Nick Babich was able to sum it up in one word, acknowledgement. Humans have a very real need to feel acknowledged. We want our actions to be accepted and validated and need that reassurance. Other humans react to everything we do, so it feels more human when the things we interact with do it too. Just think about it, in a world without them we would be constantly frustrated and second guessing if our actions caused anything to happen.
As designers, microinteractions challenge us to think small. They force us to focus on the tiny moments that people engage with a digital or physical object, the moments in which people are provided with assurance and ease. But because they are so small, they are extremely easy to forget about, which would be a huge mistake.
Take your car key fob for example. Its function is to lock and unlock your car doors. Simple enough. But how do you really know that the doors lock when you push the button? Your car assures you that it understood your action and performed the task by beeping and flashing lights. If you're looking the other direction the honk can reassure you. If you're too far to hear it, the light assures you that your car is safely locked. Satisfying right?
Now imagine if you clicked the lock button and you did not hear a sound or see lights flash, would you trust that the doors locked? How would you know? Would you feel satisfied? Probably not. More than likely, you'd feel enough anxiety to walk back to the car and pull on the handle.
It's the same for your digital products, when people click something, type something, or interact with your product in any way, they need feedback from this microinteraction to assure them their work is saved, their image is uploading, or that the action they've took has been acknowledged. When the system registered what they intended and makes that known, it prevents anxiety. In other words, your product needs to learn ways to be a good listener.
The 4 Components of a Microinteraction
In his brilliant book, 'Microinteractions: Designing with Details,' Dan Saffer breaks down microinteractions into four components: The trigger, the rules, feedback, and loops/modes. Each of these components are critical to building a successful microinteraction.
The Trigger: This is the event that starts the microinteraction. Triggers can be broken up into two groups. Manual triggers happen when someone interacts with the product intentionally. These are things like the flip of a switch or push of a button. In many modern devices, it could even a clap or a wave of the hand. System triggers are automatic and occur when certain conditions are met. Your toaster beeping when your toast is done or the chime you hear when you receive a text message are system triggers.
The Rules: These are the parameters the microinteraction follows. What happens when you push the button? What can or cannot be done? The rules define exactly what happens after a trigger is performed. For example, with your car key fob, when you push the lock button, your car door locks.
Feedback: This is the verification of the microinteraction, the signal to the user that their action has been acknowledged. It can be a sound, a visual cue, vibration, movement or something else. For example, an iPhone vibrates when it is switched to silent mode.
Loops and Modes: A loop determines the length of the microinteraction. It determines whether the interaction repeats or if it changes over time. When you finish a load of laundry, your washing machine will play a sound and if you don't open the washer door, it will repeat to remind you. You want to be reminded that your wet clothes are finished so they don't sit there and get moldy. In this case it's important, but not every microinteraction needs to be repeated. Modes change the typical way things function and operate. Examples of this are changing a location in a weather app or setting a 'Do not disturb' mode on your phone.
To sum it up: The trigger initiates the feedback, the rules define what type of feedback occurs, and the loops and modes help define special cases where that feedback occurs or not.
Give me a sign!
Of all of these 4 components, by far, the most important one is feedback. But why?
It assures users that something is happening. The animation of swiping to delete an email is very useful. When you swipe, the email moves in the direction of your gesture. We've encountered examples without that animation and instead there is a popup window asking to confirm the deletion. The animation is much more related and contextual to your motion, where the popup doesn't give you continual feedback as you're interacting with the email and it feels very disconnected. Apple's Mail app does a great job of this:
.gif?1478810015)
It educates users on what's happening. When you're waiting for an image to upload, the loading indicator assures you that the system accepted your image and is processing it. Without that loading indicator, you're left to wonder if anything is happening and might try to keep clicking the upload button. Or if there is an error, feedback will help guide them to know something is actually wrong and help them figure out how to fix it.
It can delight users with something unexpected. A surprising detail doesn't always have to serve a purpose other than to entertain and delight. These details make using your product fun and exciting. It's always fun trying to find Yelp's hamster:
.gif?1478809915)
It can create memorable instances for your brand. Some microinteractions are so unique and memorable that they become synonymous with brands and even go on to influence how other products are builts. 'Pull to refresh' was an interaction invented by Loren Brichter for the Tweetie app which Twitter later acquired. The action is now forever linked to Twitter and can be seen in many other apps. Another example is Facebook's 'Like' interaction:
.gif?1478810066)
How can we take those opportunities for feedback to assure users, educate them, delight them, and create a memorable product brand?
Share Me Details
To successfully work microinteractions into your product, they can't be an afterthought. They aren't window dressing you include after you've built your product, they're critical components to layer in throughout the process. Think of microinteractions and the acknowledgement they provide as a sort of guiding principle throughout your design and development process. By actively looking for ways microinteractions can enhance your product early, you can shape your product around delivering an amazing experience for the user.
That being said, mockups and prototypes can never fully replicate what it's really like to use your product. It's extremely difficult to think of meaningful microinteractions when our product only exists on paper or in a wireframe. Use your live product, iterate on it, and be brutal and critical with how the experience feels. By using your actual product in real usecases, you'll uncover opportunities to enhance it with microinteractions you may have missed in prototype form.
Ultimately, remember that we're designing for people, and people want (and need) to feel acknowledged. Products that are full of well thought out, meaningful microinteractions are products people love to use. All of us crave that confirmation that what we're doing has been accepted, is valid, and is generating a result. In these small ways, you can help satisfy that very human need in your user.