Do you notice those tiny animations and microcontent that make apps come to life? Classic examples include pull-to-refresh or??slide-to-archive in mail apps.
They’re not quite features, but if you want users to love your interface, they’re also not??optional. These actions are called microinteractions.
What is a Microinteraction?
Microinteractions are contained product moments that revolve around a single use casethey have one main task.
Microinteractions Provide:
- Nuanced Visual Feedback
- I see that a section of this form turned red. That must??mean I need to enter something.
- Emotionally-Infused Confidence
- I see a gear icon spinning, then coming to stopping??with a green checkbox on top, so I am satisfied and??confident my settings were applied.
- Reassuring Confirmation
- I can see that my order status animated joyfully from??In-Progress to Complete, so I know my payment was??accepted.
IRL the message on the left is an interaction, while the message on the right is a microinteraction.
When designing interfaces, the microinteraction guidelines below describe how we approach these elements here at LimeRed.??Dan Saffer, literal author of the book on this topic,??provides the insight that’s our North Star:
Think Physical
When brainstorming animations, consider the corollary in terms of a physical interaction and take a reductive approach. In this??example, offering someone choices during sign in??could be compared??to politely offering someone a tray. Hence, the unfolding action makes sense in this case.
Dont reinvent the wheel
When it comes to audio??interfaces, whether analog or digital, a round red button means record, and a square means stop. Keeping it simple aids comprehension and keeps cognitive load low. This interaction also allows the user to keep their finger poised in one location. Unintended touches are much more likely when a??user needs to visually track a new click location to start and stop actions.
Take the Opportunity to Be??Interesting
Target and Amazon both use your phone’s camera to scan items and locate offers, reviews, and other data relevant to the scanned item. However, Target’s scanning visualization is just a set of red crosshairs. This works well with the overall look and feel of the rest of the brand, but it’s not very dynamic.
Crosshairs as a tool are also inextricably linked to guns. This makes the interaction feel much more serious that it should, especially in this cultural moment.
The textual notification (microcontent) is also a missed branding opportunity. I don’t feel very happy??when I’m told to “Please wait while we??search for??offers.” That notification should??be something mildly delightful??like “Offer wheel spinning!”??or just simply??a fun-to-watch animation.
For all of these reasons and more, I prefer Amazon’s scanner??microinteraction. The dancing blue bugs (as I like to call them) are useful: they highlight??the edges of the scanned??items and give a sense of progress when identification has occurred. They also introduce??a twinkly slice of??personality into an otherwise mundane operation.
Lead With Data
Waze does a great job??providing??data that the user hasn’t even requested. In the app start up??process, Waze automatically locates the user, scans for??surrounding Wazers, then reorients??the map and provides an animation that indicates the traffic speed of the nearest major road. That’s a lot.
All of those animations happened without any touch gestures from me, and??all were subtle but helpful. I especially like the radar animation when searching for other Wazers. It’s instantly recognizable and not too busy. The shimmer around the Waze icon in the lower left corner is another helpful animation, as that’s the icon users select to begin navigating. It draws the eye and helps new users understand where to begin.
That said, fewer??animations or specific, directional microcontent would help here, since it’s a fairly safe assumption that users open the app in order to begin navigation. While the icon shimmer animation does draw the eye, it’s not perfectly clear that it’s the next step since many other items on the screen are also moving.
Reinforce Positive Associations
We’ve all been in situations when our phone is about to die, leaving us in dire straights. When we find a power source, it’s a??wonderful feeling. With the advent of wireless charging, software developers had to devise??a new notification. This is the bare bones message that would do the trick. It’s the phone equivalent of “Pet accepted.”
Happily,??Samsung designers did better than a dozen??boring words. When placed on a charge pad,??a single ripple of cool blue power appears to flood the device??and then dissipates.
??The notification is clear for young and old, readers and non-readers.??Zero language translations needed.
It’s calming, but powerful. I could watch it all day.
This animation??makes me feel good. And that’s the point of microinteractions: to give feedback and create??positive feelings when someone uses your interface.
To recap, when creating microinteractions:
- Think Physical: Brainstorm animations by starting IRL
- Don’t Reinvent the Wheel: Use familiar iconography
- Take the Opportunity to Be??Interesting: Dancing blue bugs are more fun than crosshairs
- Lead with Data:??Offering more context is rarely a bad thing
- Reinforce Positive Associations:??Understand your users’ motivations and make them feel good.
……
Recently??we led a workshop for??app designers, developers, and funders on this topic. The venue for this conversation was 2112, the rockstar tech incubator on the Northwest side of Chicago.??Take a peek at??slide deck??and join us for our next workshop!
