I recently talked about WordPress web design trends we can expect for 2018. On that list: microinteractions.
If this word causes you to raise your eyebrow questioningly, microinteractions are a way to make websites more pleasant to work with. They do so by turning up the entertainment factor of otherwise mundane or tedious tasks in a subtle way.
Oftentimes microinteractions are so small that you don’t really register them consciously. However, they are everywhere both on the web and in real life.
For that and other reasons, in this post we will dive deep into how to introduce microinteractions to WordPress. We will first look at a bunch of examples of microinteractions and explain how they improve the web experience. After that, I will show you how you can add this type of feature to your own WordPress website.
What Are Microinteractions (And Why Should You Care)?
In this first part, through a bunch of examples you will learn what microinteractions are exactly.
You Encounter Microinteractions Every Day
As mentioned in the intro, microinteractions make dealing with websites more entertaining. They do that through providing (mostly visual) feedback to user actions. You have probably seen them out there, even if you didn’t consciously register them under their official term.
For example, have you ever clicked “like” on a Facebook post? What a silly question, of course, you have.
Next time you do, pay attention to what happens to the button. It not only goes from mostly white to fully blue but even jumps slightly out of the page for a split second.
That’s a microinteraction. Though small, it made it clear to you that your click had an effect on the page you were interacting with.
If you work with WordPress, you also encounter microinteractions on a regular basis. In fact, the CMS is full of them. For example, when deleting a plugin by clicking on Delete, the word changes to Deleting…, letting you know your request is in progress. When done, the whole field blinks red and then states that the plugin has been removed.
There are many more examples from simple hover effects inside the menu to loader icons. Once you think about them, you’ll find that microinteractions are everywhere.
Alright, But What are They Good for?
So, if they are that small, why even bother? Does anyone really pay attention to that kind of thing?
Apart from UX designers, there are probably not too many people who think about microinteractions too much. Nevertheless, they are important to create user flow. Here’s how they help with that:
- They provide feedback — Microinteractions help address so-called interstitial anxiety. That’s the short moment of tension between users take an action and seeing its result. Microinteractions help bridge that time and show them that something is, in fact, happening.
- Microinteractions provide guidance and encourage action — They also show which elements are usable or what next step user should take. That way, these microinteractions make interfaces more intuitive and work as subtle guidance.
What Can You Use Microinteractions for?
Here are examples of popular use cases for microinteractions. They help users:
- Accomplish a single task (such as the click of a button)
- Interact with a piece of data (increase/decrease temperature, volume, rating)
- Control a process (move a song or video ahead)
- Adjust a setting (just look at the switches in your phone settings)
- View or create a small piece of content (such as a Facebook post)
- Inform users of a possible action or update (Twitter has a message plus button that shows new tweets)
You can find more illustrated examples here. Makes sense so far? Alright, then let’s now move on to how to use microinteractions in WordPress.
Adding Microinteractions to WordPress Manually
In WordPress, you have several ways to include them on your site. If you know your way around code, you can always add them by hand. A little coding knowledge goes a long way to make your site more interactive and user experience richer.
Microinteractions via CSS
CSS already determines much of the design of your site. For that reason, it’s also a good tool to add microinteractions to it. Especially since all need to do is edit the stylesheet of your theme (or preferably child theme). Alternatively, use a custom CSS plugin (for example, WP Add Custom CSS or Jetpack) or the WordPress Customizer.
A simple way to add microinteractions to WordPress via CSS is to use hover effects. One of the most common examples here is hyperlinks. They are usually underlined and often have a different color to show their clickability. However, by adding hover effects, you can make them even more interactive.
Even if you have never used a website before, you would probably understand that you can interact with that part of the UI. However, you can take this even further with CSS transitions, transform and animations. For example, you can make an icon rotate upon hover.
To achieve this, I installed Better Font Awesome on my site. This allows me to add the icon to my content with this piece code:
<i class="fa fa-refresh fa-5x rotate" aria-hidden="true"></i>
Add to this the following CSS and you have the result seen above.
.rotate {
color: #3EB9C8;
cursor: pointer;
-webkit-transition: all .6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.rotate:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Check the links above to find more ways to animate elements via CSS. For use cases, check out this article on Elegant Themes. Also, you can find a whole archive of microinteractions for checkboxes here.
Micro Interactions via JavaScript
Before CSS became literate in making elements move, the go-to tool to for this kind of thing was JavaScript. It’s still used in many cases, especially because browser compatibility is very good.
Buttons are prime real estate for microinteractions. While CSS is a good option to create them, in some cases JavaScript is the better alternative.
The examples above are built with Ladda Buttons. It’s a library of loading buttons that is freely available. It also shows that JavaScript has potential to include microinteractions to WordPress websites.
How to Add WordPress MicroInteractions via Plugin
However, manual coding is not the only way to freshen up your UX. We also have a bunch of WordPress plugins that either come with microinteractions built into their functionality or help you add them to your site. Here are some examples.
Contact Forms
Contact Form by WPForms is drag-and-drop contact form builder for WordPress. It comes with settings that allow you to display a customizable loading text when someone sends a form.
This results in exactly the type of feedback we have been talking about before. The user knows their click has registered so they won’t press the button more than once. It also lets them bridge the time between the action and its result (for example, being sent on to thank you page). So small, yet so effective.
Tooltips
Tooltips are another way to add microinteractions to your WordPress content. They not only make the content more interactive and are immensely helpful for visitors.
The plugin WordPress Tooltips allows you to add tooltips to text, images, videos, titles, excerpts and more. The tips can contain any content you can create with the WordPress editor, including PDF downloads, images, social links and more.
Tooltips especially make sense in forms, which often need additional information. At least for Contact Form 7, we even have a dedicated plugin for that.
Hover and Scroll Effects
Of course, hover effects are also available in plugin form (for those not willing or able to create them manually). Here are a few options for hover effects and more.
- Microthemer Lite — This plugin is a full-fledged front end CSS editor to style anything on your website. It also supports hover effects. However, you are limited to 15 effects in the free version.
- Image Hover Effects — Offers hover effects specifically for images. More than 40 effects in different styles that you can check out here.
- Animate It! — The plugin lets you apply CSS3 animations to your posts, widgets, and pages. It offers more than 50 animation options that you can apply on scroll, click and hover. It even adds a button to the WordPress editor to add them directly from there.
- Amazing Hover Effects — As the name suggests this extension comes with more than 20 hover effects. Check out the demo here.
Social Sharing
Social sharing is a staple of online marketing. It’s also an awesome area for adding microinteractions to your content in order to encourage sharing. A classic example of this are “tweet this!” prompts for when visitors mark text on your web page.
Click and you are sent to your social account where you can share the quote directly. However, this doesn’t just exist for Twitter but also for other social platforms and types of content. Here some plugin alternatives:
- Highlight and Share — After installing this plugin, when visitors highlight text on your page, they get the option to share it on Twitter and Facebook. The plugin also asks if they want to send the entire post to LinkedIn, Pinterest or via Email.
- Quotable — Adds a “tweet this” message to blockquotes and highlighted text. The plugin automatically converts WordPress tags to hashtags and also pulls your Twitter username from Yoast SEO to include in the message.
- FB Quote Plugin for WP — A quote sharing solution for Facebook only. Works in the usual way for both posts and pages. You can also use a shortcode to add sharing buttons anywhere you want.
Microinteractions and WordPress in a Nutshell…
Microinteractions are becoming more commonplace in both daily life as well as on websites. They represent a good way to keep users engaged, make sites interactive and tedious tasks entertaining.
Before reading about them, you were probably not aware of the sheer amount of microinteractions you are subjected to each day. Apps, social networks, devices, websites – they are used everywhere. Even WordPress has plenty of examples.
For WordPress sites, you have two basic ways of adding microinteractions. You can either add them manually as part of your theme or use a plugin that brings them on board.
By now, many plugins include microinteractions or are specifically built to add them to WordPress sites. We will see more of this development (including in themes) in the future.
Now do me a favor and micro interact with this page by leaving a comment. Thanks!
Do you have a favorite example of microinteractions on websites? Do you know additional options to add them to your site? Let us know in the comments section below!
1 Comment