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.

Microinteractions are movement

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.

We use microinteractions every day

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.

What microinteractions are made of

As outlined in Dan Saffer's Microinteractions, microinteractions consist of 4 parts:

1. Triggers are the actions that set a mechanism in motion. Just as you perform the manual action of pressing a button to start brewing a pot of coffee in the morning, you trigger microinteractions when you interact with a website. While some triggers are manual, others are automatic. Automatic triggers happen when certain criteria are met, or a sequence of events happens. Dating apps pushing notifications to your phone, for example. Someone reads your profile, thinks you’re cool, and sends you a message. The message activates the trigger… if only the rest of dating could be this straightforward.
2. Rules are the operational instructions that allow a system to function. The flag on a mailbox has a simple set of rules. The upright position signals to the mail carrier that there’s mail to be picked up, and down requires no action outside of delivering the mail. Websites also have components that follow a simple set of rules. A toggle that turns audio on or off serves one function and indicates a state change, just like the flag on a mailbox.
3. Feedback lets us know if what we’ve done has been a success. The whoosh of a sent text, the vibration your phone makes when you swipe right and make a dating match, and the incremental tone that goes up and down when you adjust the volume on your laptop are all examples of feedback. Without feedback, we’re left wondering — did it work?
4. Loops and Modes affect the length and functionality of a microinteraction. Hitting the snooze button is a type of microinteraction. The duration of the snooze is the loop. This can be a set length, or get longer and louder with each successive round. Microinteractions can be static or change each time they’re executed. Hitting the clap button on a Medium post is an evolving microinteraction. The longer you press the button, the more claps you give. Facebook likes are a single instance no matter what reaction you choose — you’ve either interacted, or you haven’t. Mode affects functionality. The most obvious is Airplane Mode, which limits the functionality on your phone. Each gear on a bicycle also serves as a mode, making it harder or easier to pedal.

What microinteractions do

Microinteractions can perform a variety of functions, but when abstracted, these functions typically fit one of the following four buckets:

1. Provide feedback after an action is taken, so you know it worked

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.)

2. Allow for single-instance interactions

Liking a tweet is a more active experience with this small burst of animation.

3. Let you change settings

YouTube makes toggling on and off autoplay a simple task with this microinteraction. The explanatory tooltip is also nice touch.

4. Help prevent mistakes

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:

Don’t overwhelm your visitors

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.

Stay on brand

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.

Make sure your microinteractions don’t slow down functionality

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.

Make microinteractions with a purpose

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?