Surprise and Delight: How Microinteractions Can Bring a Boring Website to Life

Microinteractions are so ubiquitous in web design these days that any site that doesn’t have them feels bland. They’ve been a hot trend in UX design for a couple years now, helping to provide important feedback to users, explain functions and even entertain.

These small “product-related moments” add magic to sites, delighting and surprising users, while at the same time engaging users and enhancing user experience.

So if your site doesn’t use microinteractions, it’s time you added some.

What is a Microinteraction?

A microinteraction is a small moment that accomplishes a single task. They’re everywhere online, and especially in apps. Here are just a few examples of microinteractions in action:

These bite-sized interactions have become so normalized now that we expect them when we’re interacting with websites.

Kalium – Creative Theme for Professionals totally nails microinteractions, using them to guides users through architectural designs, changes and states. The clever use of animation for the burger menu further guides users to explore the site.

A demo of Kalium – Creative Theme for Professionals.

Here’s an unusual example from Werkstatt – Creative Portfolio Theme. The fullscreen demo of the theme features a glitch effect for a unique user experience. Click through to see the effect in action:

A demo of Werkstatt – Creative Portfolio Theme.

Why Use Microinteractions?

You might be thinking, they’re such small design elements, why bother spending time adding them to your site. Sadly, this is a common attitude among developers that drives UX designers mad. Ignoring these little details can mean the difference between the success and failure of a website.

There are many reasons why microinteractions have become essential to modern web design:

Microinteractions are about much more than just animations. “Because they look cool” is a terrible reason for using animations on any website. They shouldn’t be used for showing off.

User experience should be the priority over visual aesthetics when it comes to microinteractions. Any animations should be subtle and necessary, not over the top, distracting or hindering to the user.

Take Flow – A Fresh Creative Blog Theme for example. This blogging theme is already packed with images and there are plenty of opportunities for interactions, but the theme author has kept the microinteractions to a minimum – when you hover over a post, the “read more” button animates and the image zooms. It’s a subtle change that tells the user to take action and click the button. Check out the live demo.

A demo of Flow – A Fresh Creative Blog Theme.

Another great example of subtle microinteraction design is Flora – Responsive Creative WordPress Theme. The main demo guides users to scroll down the page using an animated mouse, and click through the header slideshow using arrows that appear out of nowhere when you hover over the header. As you scroll down the page, CTAs change state and stats animate. And when you reach the bottom, a back-to-top arrow flashes, letting you know it’s ready to click. Check it out live.

A demo of Flora – Responsive Creative WordPress Theme.

The Four Main Components of a Microinteraction

A micro interaction, as Specky Boy explains, is made up of four main parts: the trigger, the rules, feedback, and loops or modes. One that’s well-crafted will encompass all four components.

Image: Engage.

Tips for Using Microinteractions Well

Before adding microinteractions to your site, it’s important to consider what you want to achieve with them. Are they necessary, a fun way to make your site interactive, or are you adding them just because?

Here are a few things to keep in mind when designing microinteractions:

  1. Be timely. Microinteractions should always be instant – within 0.1 seconds to be precise. Anything longer than that and the user will dissociate the initial action.
  2. Be predictable. If your microinteraction is too clever or gimmicky it will annoy and maybe even confuse the user. So keep in line with what users expect.
  3. Practice simplicity. Restrain yourself when it comes to colors and typography. Take a minimalist approach to your design and don’t add more detail than necessary.
  4. Be natural. Microinteractions should mimic natural human behavior, so keep things familiar so you can account for any possible human error.
  5. Be subtle. I’ve said it already but I’ll say it again – use subtle animation. Animations can be fun and inform the user about progress and provide feedback, but too much is overkill and will annoy the user.

Here’s a great example of subtle animation done well: Fusion – Creative Multi-Purpose WordPress Theme. The “Freelancer” demo features an animated background, adding depth to the page. When you scroll through the portfolio, the image light up as you hover over them, indicating that you can click through to see more. When you reach the bottom, the primary CTA lights up on hover, encouraging users to take action and get in touch.

A demo of Fusion – Creative Multi-Purpose WordPress Theme.

Make a Big Impact with Microinteractions

Microinteractions may be, well, micro, but they can make a big impact on your design and the overall user experience of your site. If you haven’t used microinteractions before, consider starting out small with subtle hover actions on buttons and links. By making these elements interactive, you’re not only helping to guide users through your site, you’re infusing your design with personality.

Be sure to check out our theme marketplace for themes such as those included in this post that feature microinteractions – no doubt you’ll be looking out for these small design experiences next time you’re searching for a new theme.

Read next: how do you know if your website is boring? Here are 7 signs