10 Micro-interactions Examples and How They Boost UX

Micro-interactions let visitors take action and guide them through the things you want them to accomplish.

What’s a website without ways to engage with it? Micro-interactions involve the user and elevate the user experience into one with a clear flow. With that said, micro-interactions should not be placed without purpose or take over a design.

Yet, when they have a specific intent, micro-interactions make for a smoother and more focused user experience. We've pulled together this cheat sheet with some inspiring micro-interactions examples to get you started.

What Are Micro-Interactions in Web Design?

Micro-interactions are a staple for any interactive website. They are set into motion when someone hovers or clicks on designated elements. This state change is generally indicated by animation or some other obvious visual or audio cue. Though the best examples of micro-interactions often serve a higher purpose in a design, they can also be decorative, adding touches of motion and other visual flourishes.

Whilst the inclusion of micro-interactions in a web design were once an obstacle for non-technical designers, with no-code tools like Vev it is now easier than ever for designers to understand and add these flourishes themselves, ensuring they seemlessly fit into the overall design.

Along with being user-initiated, micro-interactions may also be system-triggered, automatically appearing at a given moment as someone moves through. Micro-interactions can be sectioned into four different parts:

Triggers

These are the actions, either user or system-generated, that initiate a given micro-interaction.

Rules

Much like lines of code in a computer program, these are the instructions that govern a micro-interaction, determining what it does.

Feedback

These are visual or audio signals indicating whether or not a micro-interaction has been engaged.

Loops and Modes

These are the duration or a sequence of state changes.

Micro-Interactions and UX: Best Practices

Micro-interactions help people out. If there’s something they need to do, micro-interactions offer them the solution. Usability is key.

Micro-interactions work best when they’re designed with intention. They should never take someone out of a user experience, but rather feel natural and intuitive, blending in with the rest of a design. Micro-interactions complement the visual elements of a website instead of being distractions.

How Do Successful Websites Use Micro-interactions?

A website with micro-interactions feels more personal. Instead of keeping visitors at a distance, interactivity draws them in, giving them more autonomy and freedom in how they experience it.

Some of the more popular micro-interactions include:

• Contact and newsletter sign-up forms
• Social media like and share buttons
• Call to action buttons
• Tap and hold elements
• Horizontal scroll buttons
• Progress indicator bars
• Audio and/or visual feedback
• Click/hover to reveal text or images
• Page transitions
• Hover animations on buttons or linked graphics

10 Examples of Micro-Interactions in Web Design

Now that we’ve covered what micro-interactions are and how they work, let’s take a look at 10 micro-interactions examples by brands using them in unique ways.

WWF

Created in Vev, the Canadian chapter of the World Wildlife Fund wisely implements micro-interactions examples throughout its website.

Kicking things off is the top navigation. Hovering over the menu reveals a drop-down of options. But this isn’t the only micro-interaction example. Scrolling reveals text and visuals, with a nice mix of fade-ins and animated effects livening up the screen. Several yellow and orange call-to-action buttons make it easy for visitors to perform different tasks like donating,  visiting their online store, and navigating back to the top of the page.

Throughout this design, micro-interactions function in pushing a visitor forward, keeping them in motion and engaged.

Gerard Stric

Gerard Strič has crafted an easy-to-follow portfolio in Vev, with an interactive project gallery. Generally, featured projects are relegated to an unmoving grid. Here, an animated hover effect shifts individual projects when the cursor moves over them. This micro-interaction example is subtle but functions well in bringing attention to Gerard’s work.

Stone Cycling

Stone Cycling is in the business of sustainable building materials. You’ll find plenty of hover effect micro-interactions examples, like this horizontally scrolled carousel of building materials, with arrows giving visitors control in flipping through their different products.

Stone Cycling also uses micro-interactions in its contact form. Visitors can specify the type of projects they’re going to be working on and receive a digital sample pack of materials related to them. Clicking on the squares accompanying each project type shows it has been selected by filling it in. This gives visitors a way to customize their information requests, making for a more personalized user experience.

Stone Cycling’s website is a great example of designing with purpose. Every micro-interaction exists to help prospects learn more about their materials, leading them closer to becoming customers.

Rocket Air

Rocket Air shows off its expertise in digital design, with an agency website that’s full of micro-interactions examples that are perfectly placed, well-designed and intrinsic to the UX.

The cursor at the top makes a huge impression. It takes the form of a black circle with a single word of “play”. You can move this button around as the background video cuts from scene to scene, with a click bringing you to a reel of Rocket Air’s work. It’s a unique interaction that provokes curiosity, inspiring visitors to click on it in seeing what comes next.

Anna Jona

Anna Jona, a combination cafe, bar, and cinema in Reykjavík, Iceland seems like a great place to grab a fancy cocktail and join friends in watching a film.

In this website, the majority of text and visuals are revealed through the micro-interaction of scrolling. The above door-shaped interior shot is a wonderful micro-interaction, offering a glimpse of the cafe that turns into a wide-angle shot as one scrolls down. It feels like walking right into Anna Jona’s hip and modern-looking space.

Anna Jona reveals content at a patient pace, with text and images materializing and sliding on screen with every scroll. This description above highlights one word at a time as you scroll down keeping you from skipping over anything.

The micro-interaction example above is a hover effect that peels back each movie poster. Design-wise, it aligns with the website's make-up of smooth and fluid animations. It also purposefully allows for the promotion of each film showing at the venue in a more eye-grabbing manner than if this information was just in plain, listed type.

Anna Jona comes through with a design that utilizes micro-interactions in communicating who they are, serving to inspire people to visit.

Phage Lab

With blobby microbes floating in the background, bright colors, and animations of bacteriophages in action, Phage Lab uses micro-interactions to show off how their technology works in a way that feels active and fun.

One micro-interaction example that is particularly striking in this example is the navigation. Clicking on the hamburger menu on the top right opens up this huge yellow and black menu, with a hover effect that extends a line from each selection as well as circles each number. It’s nice to see this departure from the tiny navigational options that occupy so many websites.

Camille Mormal

Camille Mormal's skills as an interactive designer are obvious throughout this action-packed design portfolio. There are so many inventive micro-interactions examples in place, that it’s almost impossible to cover them all, so let’s take a look at a few of our favorites.

The site opens with horizontal scroll through her projects, navigated with plus symbols on both sides of the project title. It’s common to see arrows as UI elements guiding users through a horizontal carousel of images, and the plus symbols are a welcome alternative.

Once you’ve clicked on any of the featured projects, there’s a film strip-like navigational menu on the right that offers a passage to different sections. It’s a unique means of navigation that further shows Camille’s flair for originality and usability.

One of the dangers of having too many micro-interactions is that they can complicate a design. Camille’s portfolio has numerous micro-interactions, but they all have a sense of place and purpose in delivering an active and engaging user experience.

Coastal World

Coastal World, the website for Coastal World Bank certainly wins us over with this gorgeous AR journey. But having three-dimensional visuals and a bouncy soundtrack aren’t enough on their own in crafting an effective user experience. Along with its artistry, there are numerous micro-interactions examples guiding you through this space, making Coastal World a brilliant and interesting journey.

Speaking with any of the quirky characters inhabiting Coastal World involves clicking on the red icon on the top right of the conversation bubble. Picking destinations to travel to involves the familiar UI of a mobile phone. All of the micro-interactions help you engage with something in this imaginative space.

Vev 2022 Year in Review

Our own 2022 annual report uses an array of micro-interactions, with the goal of making the experience fun for readers, as well as showcasing Vev as a powerful tool for creating interactive content.

The section highlighted above introduces the Vev team. The 3D globe contains clickable hotspots, placed around the rotating globe to showcase the diversity of the team who work on Vev. Clicking and dragging also allows readers to move the globe, exploring this section at their own pace.

Land Lines

Land Lines, an experimental web project put together by Google, gives you the power to explore the planet in an unorthodox journey powered by machine learning. Users are guided through this journey by a number of micro-interactions examples.

There are two ways of navigating through. The first is by drawing lines on the screen. The second lets you tap and hold as you move the cursor. Google then generates images that follow these paths from its huge database of aerial photos. The results are continuous images based on similar features from landscapes across the world. We love seeing when art and technology come together, and this interactive design is such an entertaining implementation of machine learning.

Micro-interactions Made Easy

Micro-interactions are deceptively simple—behind the scenes, there's a lot of complex coding involved to really make them sing. With Vev's extensive library of advanced design components and animations, you can skip that whole process. Play with micro-interactions and focus fully on creating interactive websites that capture and keep people’s attention.