Microinteractions: What They Are, and Why Websites Love Them

Let’s be frank, a lot of the websites people land on don’t make much of an impression. How often do you click on a page, scroll a bit, then move along and never think of it again?

Every website’s competing for some of the coveted time and attention people have to give, but keeping their attention once they land on your site is no easy feat.  

A lot of factors go into making your website into a place people want to stick around after that first click, and making sure your content and/or products are outstanding is the most important. But with how challenging it is to capture visitor attention online, using every tool in your arsenal makes sense.

One small web design element to consider in your toolkit is microinteractions.

What is a Microinteraction?

A microinteraction is an animation that in some way responds to an action a visitor takes. Microinteractions are super common in design, but like most good design elements, when done well they don’t necessarily draw much attention.

You’ve probably encountered multiple microinteractions today without thinking about it. If you’ve swiped on an email on your mobile device to delete it, you took part in a microinteraction.

A microinteraction starts with a trigger. This can be as simple as scrolling to a certain point in a page or something more active like a click. Once a visitor enacts the trigger, the design responds visually. Even if they don’t consciously recognize it, the visitor will know their action worked on the page to spark a change. 

5 Reasons to Use Microinteractions

Microinteractions are a popular web design element for a reason—a few reasons actually.

1. They use movement to draw attention.

Attention is arguably the most valuable currency of the web. People spend a lot of time distractedly browsing. Getting a click to your website is hard enough, but getting people to pay attention once they’re there is its own battle.

Microinteractions add something interesting to the experience of a webpage that could entice visitors to stick around for longer. And they can be useful for drawing the visitor’s attention to a certain part of the page. If you want to direct those eyeballs to a particular call to action (CTA), for instance, a subtle microinteraction can do the trick without disrupting whatever else the visitor’s doing.

2. They make your website more interactive.

Adding interactive elements to your website gives your visitors more opportunities to engage with a page while they’re on it. They don’t require much from your visitors, and yet manage to take their visit from entirely passive to slightly interactive. That can make the user experience (UX) for your site a bit more impactful.

3. Microinteractions can make your web design more intuitive.

Microinteractions can be put to functional purposes, such as subtly telling users how to interact with your website. If you want visitors to know they can add a product to their shopping cart with a drag-and-drop action, a brief animation demonstrating the action when they scroll over the product can communicate that quickly and efficiently.

Elements of your web design that might not be obvious to every visitor at a glance can be explained with microinteractions in ways that are intuitive, unobtrusive, and helpful.

4. They can bring an element of fun to interacting with your website.

At the risk of sounding unsophisticated, sometimes microinteractions are just…cool. Having a small action you take trigger an interesting animation feels neat. And if the animation is entertaining in some way, that makes the experience more memorable and satisfying.

You can use microinteractions for practical purposes, but you can also use them as a way to add an element of fun to the experience of your website.

5. Microinteractions can add functionality, without taking up more space.

Designers frequently face the complicated task of including a lot of necessary functionality within a limited amount of screen space. Microinteractions are a creative way to do more with less space.

You see this use of microinteractions in mobile apps and software especially. When you hold down the app icon on an iPhone screen, and all the icons start shaking to let you know you can delete and move things around—that’s a microinteraction that serves a specific function. Having a separate menu somewhere on the screen that provided the same options would take up space the screen can’t afford.

How to Use Microinteractions (With Examples)

All those benefits are dependent on microinteractions being used well. Microinteractions can become distracting or disruptive if you’re not careful. For them to be a good addition to your website, here are five tips to keep in mind.

1. Keep them simple and nonintrusive.

“Micro” is in the word for a reason. Microinteractions have a purpose to serve, but you don’t want them to be so big or flashy that they distract from whatever your visitors are trying to do on the page.  The line between a microinteraction being useful, interesting, or delightful and it becoming annoying is a thin one.

The Modcloth site uses microinteractions when visitors scroll over many of their products that reveal the clothes from a different angle.

It’s a small feature that in no way distracts from the browsing experience, and instead enhances it by providing more information about items a visitor is interested in.

2. Use them to convey information to the user.

Microinteractions can be a savvy way to visually provide information to your visitors. You can use them to demonstrate functionality your website has that may not be obvious at first glance, or to provide information about your website or products in a format that draws more attention (as with the Modcloth example above)

A common example of this is one you’ve definitely encountered a time or two (hundred): the download status bar. Nobody likes waiting, but it’s a lot more bearable if you have some idea of when the wait will be over. An animated status bar that communicates that information creates an improved user experience.

3. Use them to encourage actions you want visitors to take.

So much of good website design is about trying to get visitors to take specific actions. Microinteractions can be a tool in your arsenal for encouraging visitors to take the steps you most want to urge them toward. Facebook’s animated engagement buttons are a smart example of this.

When you scroll over the simple thumbs up, it transforms into a whole menu of animated options you can select to engage with a post. The animations add personality to the different choices beyond what a static image would, and the end result is more people interacting directly with the platform.

You can put the same principle to work on your website. Think about the actions you most want visitors to take on each page, and then brainstorm any good visual tricks you can use to make those actions more rewarding to the visitor.

4. Use them to provide functionality.

Microinteractions can also be a useful way to add functionality to your website, without cluttering the limited space you have to work with. You see microinteractions used this way on a lot of mobile applications—the animations that result when you swipe left and right in your email application, or the menus and options that come up when you hold down an app icon for a few seconds.

You can use microinteractions to add functionality to your website as well. One of the most common examples of this you’ll see around the web is the chatbots that many businesses have added to their website.

They usually employ microinteractions to pop up at the bottom of the page, and expand when clicked on. For visitors that may want personalized information, the microinteractions let them know the option’s there. For everyone else, the visuals stay off to the side enough not to be a nuisance.

5. Use them to turn a bad user experience good.

We tend to take internet access for granted these days. Few things are more annoying than trying to pull up your favorite website, only to be faced with an error message.

Losing internet access is no fun, which the designers of the Chrome browser clearly understand. That’s why they built a small animated game into the browser’s error page featuring an adorable dinosaur. It may not make the loss of Twitter and Wired feel worth it, but it makes a bad situation feel a little less dour.

No matter how carefully you build your website, your visitors are likely to encounter the occasional bad experience on there—a 404 page, a product that’s out of stock, or a discount code that’s outdated. You can’t eliminate these negative experiences entirely, but you can use microinteractions to figure out creative ways to make the experience a little better for your visitors.

6. Do user testing.

Once you’ve brainstormed some good opportunities to add microinteractions to your website and have put in the work to design them, you’re almost ready to work them into your visitors’ experience. But have patience for just a little longer. Don’t assume your microinteractions look great and are intuitive, bring in some outside eyes to weigh in on how well they work.

If your testers are confused by the microinteractions you’re trying out, scrap them. Adding something that looks cool isn’t worth it if it breaks your design’s functionality. If their feedback is positive though, then go for it!

Add Small Moments of Engagement with Microinteractions

Microinteractions give your visitors a number of small opportunities to interact with your website’s design. Even if they don’t consciously notice them in the moment, the myriad animations you sprinkle through your site change their experience. And if you’ve designed them well, they’ll create a better experience that makes your website more intuitive, useful, and fun.