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.

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

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

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:

  • Liking a Facebook status, or holding down the thumbs up icon in Messenger to create a bigger thumbs up
  • Google autocomplete finishing the rest of your sentence
  • Hovering over a product photo in an online store to see a zoomed in section of the image
  • Swiping left or right on Tinder
  • Liking a tweet on Twitter

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.

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

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:

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

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:

  • They offer subtle guidance to users
  • They give instant feedback to users
  • They make it easier for users to understand and interact with your site
  • They provide easy visual cues for notifications or messages
  • They enhance user experience and make it much more rewarding
  • They improve website navigation
  • They encourage sharing, commenting and liking of content

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.

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

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.

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

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.

  • A trigger is what initiates the microinteraction process. It can be a manual action like clicking an icon. It can also be a trigger built into the system that will occur whenever an action is completed. For example, the sound you hear when you receive a text message is the result of a system trigger. When the trigger is switched, it engages the rules of the interaction. The rules are programmed into the microinteraction itself and tell it what it can and can’t do. Since these rules aren’t made apparent to the user, we only understand them through feedback.
  • Feedback is how we know the trigger engaged the rules and the microinteraction is working. For example, the vibration your phone makes when you take it off silent. It lets you know you triggered the action and the rules were followed correctly. Without the feedback, you wouldn’t know what was happening. If you switch your phone to silent and it doesn’t vibrate, you know something might not be working correctly.
  • Loops and modes are the final stage of the micro-interaction. Loops define how long a microinteraction will continue, like the cycling of a loading icon. Modes define an uncommon action critical to continuing the process, like inputting geographical data to find local weather.

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

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.

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

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