What Are Microinteractions How to Use Microinteractions in WordPress

Microinteractions are a great way to improve your websites user experience. And in this post, youll 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! 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 yo ur 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, were 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 elementsLet’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 i s the appropriately-named Animate It!: Animate It! Author(s): eLEOPARD Design StudiosCurrent Version: 2.3.6Last Updated: August 6, 2019animate-it.2.3.6.zip 100%Ratings 373,459Downloads 4.7.0Requires This plugin is free, simple to use, and offers a lot of customization options. However, youre 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:Here, you can see we have a simple CTA, and a button we want visitors to click on (added using the MaxButtons plugin):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 pages toolbar. This results in a pretty comprehensive menu of settings:Here, we can s elect 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: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: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: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 readersAnimations are fun, but microinteractions in WordPress can also be informative – lets demonstrate what were talking about using tooltips. These are small snippets of information that ap pear 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: Simple Tooltips Author(s): Justin SaadCurrent Version: 2.1.3Last Updated: January 14, 2019simple-tooltips.2.1.3.zip 92%Ratings 70,792Downloads WP 2.9+Requires Once youve activated the plugin, youll get a new Add a Tooltip button 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:If you want to customize what your tooltip actually looks like, you’ll need to visit Simple Tooltips Settings within your WordPress dashboard: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:It doesn’t get much simpler than that!3. Prompt social sharing on your postsThe 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 onli ne 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: Highlight and Share Author(s): Ronald HuerecaCurrent Version: 3.1.2Last Updated: July 10, 2019highlight-and-share.3.1.2.zip 98%Ratings 29,135Downloads WP 4.7+Requires 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: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: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:With this simple microinteraction, you’ve made it far more likely that users will think to share your content with their own social networks.ConclusionIt’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:Add fun animations to important elements.Display helpful tooltips for your readers.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! Learn what microinteractions are, plus 3 easy ways to use microinteractions in #WordPress