Microinteractions: small details with big impact
Bet you’ve never thought about how the buttons in an elevator light up when you push them. That light signals that you’re headed to the right floor, or to every floor if that bratty kid thought it’d be funny to smash all the buttons.
Consider your phone. The click when you wake it up or put it to sleep. The vibrate when you mute it. The ding when your crush finally messages you back. You probably don’t give these details a second thought. But, take away one, and you’ll likely start searching for your next phone. These little interactions — microinteractions — between you and technology are subtle and often completely overlooked, but they add up to round out your experience.
It’s also these invisible microinteractions that can enhance our experience online. When microinteractions are well designed, they help us navigate a website, instructs us on how to use it, prevents us from making errors, and ultimately engages us and keeps us browsing. Design isn’t just aesthetics. It’s a marriage of form and function.
Microinteractions, according to Dan Saffer, designer and author of Microinteractions: Designing with Details, are “contained product moments that revolve around a single use case.” A single microinteraction should accomplish a single task, and a successful microinteraction takes into consideration all four of its parts.
- The trigger, which initiates the action. It’s when we push a button in an elevator.
- The rules, which dictate what happens and what can’t happen. The elevator inevitably takes us to our desired floor.
- The feedback, which lets users know something is happening or about to happen. We know we’re headed to our floor because the button’s light is on.
- Loops and modes, which determine the meta-rules of a microinteraction. If the power is out or the elevator needs servicing, the button won’t function as usual, but whenever we step into a working elevator, we know the drill. Hit a button, it lights up, and the elevator takes us to our floor.
How might a microinteraction work online? In its simplest form, it’s the small state change that confirms our suspicion that this bit of text is a link and not just plain text. (Up your hover game, folks!) But let’s take a look at a slightly more complex function: the zoom feature on the product page for Nike and Reebok shoes.
On Nike’s website, there is nothing to suggest an option to zoom except (and I’m reaching here) the default pointer indicating that the image is also link. Click it, and a larger photo of the shoe pops out of nowhere and fills the window. To exit the zoom, we have to click the close button all the way in the top right corner. Sure, it gets the job done. It’s fully functional, but it feels a bit tedious and very mechanical.
Reebok, on the other hand, offers a more intuitive solution. As soon as we hover over the shoe, the cursor becomes a plus sign that nods to our understanding of zooming in. Click, and a zoomed-in preview pops up off to the right and even moves with our cursor. The cursor has also transformed into a minus sign to indicate the option to zoom out. Click again, and it closes just as we expect. This interaction is much more efficient. It feels natural and, dare I say, more human?
When an action fails to meet our expectations, it disrupts our experience and leaves us feeling unimpressed or frustrated. We might feel compelled to close our browser. When it does meet our expectations, it adds to an overall positive user experience. Even though we don’t think about it, it keeps our browsers open. Microinteractions are the tiny details that affect how we feel without us noticing. They’re intuitive and virtually invisible, and together they offer a seamless user experience.
