Microinteractions in WordPress

Microinteractions are a great way to improve your website’s user experience. And in this post, you’ll learn exactly what they are, plus how to use microinteractions in WordPress without needing any special technical knowledge.

‘Microinteractions’ are small moments where your site responds to a visitor’s actions. However, don’t let the ‘micro’ part fool you. Paying attention to these small details can actually result in some pretty large positive effects – such as increased user engagement and even additional conversions.

In this article, we’re going to explain what microinteractions are and why they’re useful. Then we’ll show you three ways to implement microinteractions in WordPress, easily and quickly. Let’s jump right in!

An introduction to microinteractions

While you may be unfamiliar with the term ‘microinteractions’, there’s no doubt you’ve seen them in action. In fact, this technique has become so ubiquitous across the web that it’s now expected of most sites.

A microinteraction is a small piece of dynamic content on a web page. In other words, when a user performs a specific action, something minor but noticeable changes on the page:

Facebook 'like' button animations.

In the above example, you can see that as the viewer mouses over each icon on Facebook, it enlarges slightly and moves around. You probably encounter features like this all the time, sometimes without noticing it.

There are many types of microinteractions, but a few of the most common include:

  • An element (such as a button or link) that changes its size or color when it’s hovered over or clicked on.
  • A pop-up element, such as a tooltip or social sharing options, that appears when you highlight text or hover over a specific part of the page.
  • Small animations that play in response to a particular user action, such as ‘status’ animations to let you know a download is in progress, or a purchase is being processed.

What’s more, there are a lot of reasons to implement these types of microinteractions on your own site. To start with, users expect to see them at this point, and they make your pages more fun. Plus, they provide direct feedback on a user’s action, and they can even serve as a small psychological reward for interacting with your site.

As it turns out, using microinteractions is one of the best ways to improve the User Experience (UX) on your website. When used as a part of your Call To Action (CTA), they can even increase sales and other conversions.

Microinteractions provide so many benefits that there’s no reason not to include them on your site in some fashion. This means you’ll need to learn how you can employ microinteractions in WordPress.

How to use microinteractions in WordPress (3 easy techniques)

There are many types of microinteractions, and an almost infinite way to use them on your site. To get you started, we’re going to show you how to quickly incorporate a few of the most common microinteractions in WordPress. Let’s take a look!

1. Add fun animations to important elements

Let’s start with animations. This is something we touched on earlier, when we looked at the Facebook ‘like’ buttons. You can create a similar effect, by making elements on your pages play short animations in response to specific triggers (such as a click).

One of our favorite plugins for doing this is the appropriately-named Animate It!:

This plugin is free, simple to use, and offers a lot of customization options. However, you’re not required to create brand-new elements. Instead, you can add animations to practically any pre-existing element on your site, including simple text, links, buttons, and even images.

To use Animate It!, you’ll first need to install and activate it (naturally). Then, simply open up a page or post containing the element you want to animate:

The WordPress editor with a CTA button.

Here, you can see we have a simple CTA, and a button we want visitors to click on (added using the MaxButtons plugin):

A simple WordPress page with a button.

Let’s make this button a little more engaging. To do this, we’ll highlight it and select the red Animate It! icon back in the edit page’s toolbar. This results in a pretty comprehensive menu of settings:

The Animate It! settings.

Here, we can select the type of animation and its duration. We can even configure different animations to trigger based on the rollover. Plus, under Options, we can decide whether it will repeat, and choose the trigger to make it happen:

Additional Animate It! settings.

For our example, we’ll choose the Pulse animation. We’ll make it repeat, and set it to trigger when the button is hovered over, before finally clicking the Insert button:

The Animate It! code in the WordPress editor.

As you can see, the button is now enclosed in code reflecting the settings we chose. Let’s check it out on the front end:

an example of microinteractions in wordpress

This is far more interesting than a static button, and encourages the user to click through to our sales page. There’s a lot you can accomplish with this plugin, so we definitely recommend trying it out for yourself.

2. Display helpful tooltips for your readers

Animations are fun, but microinteractions in WordPress can also be informative – let’s demonstrate what we’re talking about using ‘tooltips’. These are small snippets of information that appear upon hovering over a specific section of text, a link, or another element. This is a great way to provide extra value to your website’s visitors.

You can explain a term, concept, or instruction more clearly without taking up extra space on the page. Plus, by making the tooltip an optional element, you don’t risk patronizing readers who don’t need the information.

To implement tooltip microinteractions in WordPress, you can use the free Simple Tooltips plugin:

Once you’ve activated the plugin, you’ll get a new Add a Tooltip button in the WordPress editor:

The Simple Tooltips icon in the WordPress editor.

Clicking on the icon will result in a snippet of code. You’ll want to replace This is the content for the tooltip bubble with whatever you want the tooltip to say. Then, paste the text, image, or other element you want to use in place of This triggers the tooltip:

The Simple Tooltips code.

If you want to customize what your tooltip actually looks like, you’ll need to visit Simple Tooltips > Settings within your WordPress dashboard:

The Simple Tooltips settings.

Here you can choose background and text colors, reposition the tooltip, and much more. There aren’t a lot of options, but the result will be a tooltip that’s clean, readable, and fits in seamlessly with your content:

A GIF of the Simple Tooltips plugin.

It doesn’t get much simpler than that!

3. Prompt social sharing on your posts

The above two techniques create microinteractions that can be used for a variety of purposes. However, some microinteractions in WordPress are designed to accomplish a specific goal. Such is the case with our last example.

Encouraging visitors to share your website’s content is an excellent strategy. You get them to engage more directly with your content, and in return you receive some free marketing. What’s more, social media is arguably the most powerful tool you have for building an online audience.

Fortunately, you can use microinteractions in WordPress to make it simple for users to share snippets of text they find valuable. All you’ll need is the Highlight and Share plugin:

Once again, this is a tool we’ve selected because it’s free, simple to use, and reliable. What’s more, it requires very little configuration. In fact, the plugin’s features will be implemented automatically upon installation.

Essentially, If a visitor highlights any of the text in one of your WordPress posts, the plugin presents them with some sharing buttons:

Social media buttons on highlighted text.

Clicking on one of these buttons will open up the visitor’s profile and prompt them to create a post including both the text they highlighted, and the URL of the page it came from.

If you like, you can tweak the plugin’s settings to customize this feature. To do so, visit the new Settings > Highlight and Share tab within WordPress:

The Highlight and Share plugin settings.

Here you can decide what type of content the social sharing buttons will be enabled for, add more social media platforms, and even include shortlinks. Plus, you can choose to use simple icons on the buttons:

A GIF of the Highlight and Share plugin.

With this simple microinteraction, you’ve made it far more likely that users will think to share your content with their own social networks.

Conclusion

It’s easy to get so focused on your site’s large-scale elements that you forget to pay attention to the smaller details. However, the latter is often what makes your site feel polished and compelling. Microinteractions, for example, are a perfect way to make sure your UX is top-notch.

In the previous sections, we’ve shown you how easy it is to create fun and useful microinteractions in WordPress. To recap, here are three of the simplest techniques:

  1. Add fun animations to important elements.
  2. Display helpful tooltips for your readers.
  3. Prompt social sharing on your posts.
Are there any other types of microinteractions you’d like to use on your WordPress site? Share your thoughts with us in the comments section below!
Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Download free guide