Microinteractions improve usability. They make simple tasks like turning the sound on or off, liking a status update, or sharing a post not only easy, but also engaging. They blend into a user’s experience naturally.
Microinteractions enhance how information is presented and add dynamism to otherwise static experiences. But, just like any other design element, they shouldn’t ever overwhelm or distract people from the task at hand.
And the best way to avoid that is to animate with purpose. These tips will help you do just that.
A website is like a bicycle. A bike is an assembly of parts including the frame, wheels, and chain. To put these pieces into action, someone needs to balance on the seat, push the pedals, and steer the handlebars. Without these interactive elements, riding a bike would be an impossible user experience. Microinteractions are the controls that set a website in motion.
Microinteractions play a part of our daily lives — in both the digital and analog worlds. Most are so simple we don't even notice when we're doing them. If you’ve pressed the logo of your favorite soda on a vending machine, you performed a microinteraction. Unless the vending machine malfunctioned, this was an effortless transaction. You didn't need to follow a step-by-step guide. You just knew. Microinteractions on a website need to function in this same intuitive way.
As outlined in Dan Saffer's Microinteractions, microinteractions consist of 4 parts:
Microinteractions can perform a variety of functions, but when abstracted, these functions typically fit one of the following four buckets:
Linkedin uses a simple, yet effective microinteraction to show that you are now following someone. (Though it might work better, visually, if the default spacing accounted for the post-click state.)
Liking a tweet is a more active experience with this small burst of animation.
YouTube makes toggling on and off autoplay a simple task with this microinteraction. The explanatory tooltip is also nice touch.
Microinteractions guide people through your website. When these steps are small and effortless, it makes accessing content and taking actions a natural process. When you don’t have to stop and think about how to do something, you stay engaged and want to explore further.
Now, on to the tips:
Master the basics of flexbox in 28 increasingly challenging — and fun!— levels, without writing a line of code.
Grocery stores can be frustrating. Navigating parking lots, getting stuck in long lines, and running into your ex makes going to the supermarket not that super. And if you're interested in design, grocery shopping is a frustrating user experience.
We've all been there. You walk into a supermarket with a few items in mind. You look up from your shopping list to see a multitude of signs hovering above. Some are holiday promotions and others are for special sales. The navigational guide for each aisle gets lost among these other signs yelling at you. With so much information bombarding you at once, it's hard to focus on any one message. It’s exhausting.
Think of the major websites that use microinteractions. Youtube’s defining microinteraction is the thumbs up or thumbs down. Medium’s is their clap button. Because they’re simple, well-designed, and not lost in a flurry of other microinteractions, they stand out. We remember them — and they become defining features of their brand identity.
Amazon adds a simple hover effect when choosing a book format. This highlighting makes it easy to pick the one you want and and be sure it’s the same format at checkout:
TL;DR: Define the most important actions you want people to take on your site. Then use microinteractions to get them there in the simplest way possible.
A brand’s voice needs to sound the same, whatever the medium. Think of Hallmark. Now think of Monster Energy Drink. Tonally, a Hallmark moment is very different than one involving a huge amount of caffeine.
Of course, a brand’s voice can change over time. Case in point: Old Spice’s voice is way funnier now than it was 20 years ago. But whatever the brand’s current voice is, it needs to be consistent.
Microinteractions should also be in line with a brand’s voice. If you’re designing interactions for a fun company, like one that makes candy or toys, a bright color palette and whimsical microinteractions wouldn't be out of place. A luxury condominium development’s website should be very different, reflecting the same shiny elegance in its design.
Let’s take a look at two similar microinteractions from two very different brands, Porsche and Jamba Juice:
Both of these use a hover effect to display an animated overlay with the option to learn more details. Porsche gives us a menu to get more information about their Panamera model. Jamba Juice gives the opportunity to learn more about their wheat grass. Each is consistent with the brand's voice, with an elegant fluidity to Porsche’s and a bright pop in Jamba Juice’s.
TL;DR: Microinteractions, like every other design element on your site, should emerge from and reflect core brand attributes.
Load times affect conversion rates. Excessive animations and interactions can bog down a user’s experience. People may bounce from a page before they’ve even given it a chance to fully load. It’s a widely held belief in the design world that any microinteraction should give a response within 0.1 seconds. To keep people’s ever-distracted attention, your website needs to deliver fast.
But how do you keep things speedy while still keeping your design interesting? Using elements that are already there is one way to do this. If we look back at the hover effect Amazon’s designer used choosing between different book formats. They didn’t add an entire new feature — these choices would have been on the screen regardless. Add microinteractions to existing design elements instead of adding complicated, new elements that slow things down.
Microinteractions need to be rooted in practicality. Creativity is important, but when this crosses the line into being a gimmick, it’s no longer useful. Novelty wears off fast. A pogo stick might be fun to take around the block a couple times, but its entertainment value is going to get old fast. Instead of designing microinteractions so delightful that people just want to use them, regardless of their context, design them so they make the larger experience meaningful and encourage action.
For example: the purpose of the animations on Facebook’s expanded reactions isn’t to keep people engaged with choosing reactions — it’s to get them to react.
TL;DR Always look for an existing UI element to add microinteractions to, rather than creating entirely new elements. And make sure they’re purposeful — designed to drive a desired action, rather than distract from it.
Thought needs to be put into any microinteraction you want to integrate into a design. The end goal should be how it will make a user’s experience better. Yes, there’s room for them to be used as ornamentation and add a visual flourish, but overusing them will only diminish their impact.
It’s our job as designers to find the easiest ways for someone to interact with a website. The best microinteractions require little thought to use, but much thought to maximize their design and functionality.
Do you have microinteraction tips to share?
In your inbox, every other week. And unsubscribe in a click, if you want.