Inspiration for Creating Delightful Microinteractions on Your Site

Landing on a great WordPress site feels like finding money you forgot about when you reach inside your pocket. It’s unexpected, but familiar. It loads fast, looks amazing, and can completely make your day.

The whole experience is incredibly well thought out. You don’t even start scribbling down ideas of how you can implement this sort of UX into your own site until you’re at least five pages deep.

Functionality is important, but the real differentiator between decent websites is the work that’s gone into the tiny aspects that catapult the user experience to the next level.

Enter: microinteractions.

A microinteraction is the completion of a single task. Pressing snooze on the alarm. Clicking like on Facebook. Jumping over to the next song on Spotify.

The humble microinteraction doesn’t look like much on the surface. It’s simple, unobtrusive, and completely self-explanatory. But, it is that little, almost invisible interaction that takes a website from mere functionality to mind-blowing usability.

If you want your WordPress site to go above and beyond, the little touches are incredibly important. They are what really elevates a solid design to the level that inspires delirious sighs of delight.

Breaking Down Microinteractions

A microinteraction is made up of four separate parts: the trigger, the rules, feedback, and loops and modes.

1. The trigger

The trigger is the real, physical part that sets off the experience. It can be manual, like a login button, or automatic, like an exit popup.

Automatic system triggers elevate the user experience a little bit further by molding the interaction to their preferences and past actions. So, if you’ve visited a site a few times and downloaded specific types of content, you could get a completely different kind of popup compared to someone who’s landed there for the first time.

2. The rules

The rules define the scope of the interaction and determine how it all works. They should be invisible to the user and happen strictly behind the scenes.

3. The feedback

The feedback is what the user actually sees. It’s the bar on top of an opt-in form telling you there’s 50% left or the loading cartoon when you sign in to access gated content.

4. Loops

The loop dictates the length of the microinteraction. It determines whether it has a distinct end or keeps going.

The real power of microinteractions

Microinteractions create a sense of continuity. A sense of care. They make a site feel less intimidating and clearly let the user know what’s going on at any given time.

Most of us get a little bit angsty when faced with the unfamiliar. When we go over to a particular page, it’s usually with a purpose in mind, such as reading a blog post, signing up for a new product, or downloading a great resource. And if it doesn’t work the way we expect it to, it’s super frustrating.

Microinteractions help add a personal touch to the looming unfamiliarity. They let your users know that they are on the right path—that they are going to get exactly where they want to be.

Some Delightful Microinteractions

The specific kinds of microinteractions you include in your website depends on your site’s purpose. Why are people there and how can you make it easier for them?

What works best depends on your brand, your product, your audiences, and your stylistic preferences.

Let’s take a look at a couple of WordPress sites that are rocking microinteractions for their audiences!

To click or not to click

Blue Cadet is a media-heavy website that uses microinteractions to integrate the experience and add text without breaking the page flow.

You can scroll through the videos and when you hover on any one of them, the title of the piece makes a small movement to indicate that you can click on it.

It’s a simple but effective way to make your media work for you and create visual interest.

The almost-there scroll bar

Online forms can be pretty frustrating. You spend ages carefully filling out all your information only to hit submit and realize that there are three more pages left to do.

The scroll bar at the top lets you know exactly how much you’ve done and how much you’ve got left to complete.

This works really well for forms that are longer than a page but it’s also incredibly effective for single page forms like the one above.

When it Comes to Microinteractions, Less is More

It’s easy to get carried away with creating an amazing user experience. You want your website to be special and grab attention in all the right ways.

Sometimes, despite our best intentions, we get carried away and, in our desire to make something super intuitive, create unnecessarily complex interactions.

Adding animation to microinteractions can be incredibly effective but make sure that it doesn’t detract from the overall feel and functionality of your site.

And, they need to fit with your narrative.

What’s the story you are telling through your WordPress site? What does the user experience?

Delightful microinteractions enhance the narrative. They add to the story without breaking the flow.

Well designed microinteractions stand the test of time. You want users to find it just as interesting the 50th time they visit your site as the first.

Delighting the User

In an ideal world, all pages will load in speeds that can’t be captured by the human eye and everything will always work. But in reality, even the best websites face issues sometimes. The issues may not even be at your end—it could be the user’s internet connection, their particular device, or any other number of external factors.

Microinteractions are great for acknowledging those situations and adding a touch of levity when things do go wrong. They decrease frustration and create a smooth transition from one action to another.

When users land on your site, you want them to feel like they’ve been there before. Like the experience is welcoming. Like they are wanted and you are personally delighted they are there.

Microinteractions are your chance to show off the whimsical, human, thoughtful side of your brand by showing you’ve thought about what’s important to the user and delivered it flawlessly.