5 Cool Examples of Microinteractions for a Better WordPress UX

They say the devil is in the details, but that is not true when it comes to user experience.

A good microinteraction should facilitate or embellish an otherwise tedious task in a very subtle way—a bad microinteraction can ruin your experience with a website or product. Even though they're "micro," it doesn't mean that microinteractions can't have a big impact on the way users interact with your website.

A microinteraction refers to any small interaction the user has with a product. For example, turning your alarm off on your phone and then swiping (or using your thumbprint) to unlock it are two separate microinteractions.

Usually, microinteractions are meant to instruct or provide clarification about something, or help users accomplish an action or a task. Microinteractions are there to seamlessly integrate with user experience and improve it—they're there to simplify.

We've already covered the basics of microinteractions in a previous post, but now it's time to put them into action. Below are a few types of microinteraction examples and how you can achieve them on your WordPress site.

Loading Text or Icons

It's fun to press buttons, both in real-life and on the Internet (unless you've accidentally pressed the Send button on an unfinished email!). Implementing an interesting effect on your form or CTA buttons can have a big impact on how users interact with your site. The best part is that hover effects don't have to be overly complicated.

Form plugins like Contact Form by WPForms have built-in settings you can easily customize that will display a loading text whenever someone sends a form. All you have to do is access the settings and enter the text you want your form to display while processing.

The resulting microinteraction is simple.

While it doesn't seem like much, simply letting your users know their message is in the process of being sent is important. If the user selects the button and nothing happens, and the thank you page takes a while to load, they might start frantically clicking the Send button, or worse, navigate away from your page. The processing microinteraction is a nice touch.

There are several jQuery plugins that allow you to add more complex loading icons to your buttons. Both Button Loader and Ladda offer an extensive library of loading buttons you can add to your WordPress site.

Below is a quick example on how to use a Ladda button.

After you've downloaded and uploaded both the ladda.min.js and spin.min.js files to WordPress, do the same with the ladda.min.css file, which includes all the buttons.

Make sure the ladda-button class is attributed to the Ladda button, and the button label has the ladda-label class attributed to it. The HTML associated with a single Lada button (in this case, a button that will expand to the right) looks something like this:

The bind( ) jQuery method can be used for forms that submit entries to the server and result in a page reload.

This yields the following button that lets your users know their form is being processed!

Adding Tooltips to Your Forms

Tooltips are great. Not only do they provide your users with a little extra information, but animating them makes for a great microinteraction your user won't soon forget.

You can add a cool tooltip to your text manually by using a little CSS, or by installing some easy-to-use plugins like Simple Tooltip or WordPress Tooltip.

A fun way to improve user experience is to add tooltips to your forms, fields, or specific icons on your website. Magic Tooltips is a great plugin for that if you use Contact Form 7 or Gravity Forms.

You can also use Tooltipster, which allows you to customize tooltips in your forms. After you've downloaded all the files, loaded the scripts, and activated Tooltipster, you can start doing some pretty cool stuff.

If you can edit your form's fields, you can append the tooltip class (class="tooltip") and then use title="tooltip text". But if you cannot edit your form fields, you can target the form field ID. For instance, if you give your Name field the id="customernameID", you can add the following script to your tooltipster-scripts.js file:

This yields the following result:

The secret to useful tooltips is to not go overboard. Adding tooltips to everything might really annoy some of your visitors. It's important to remember that less is more when it comes to microinteractions.

Hover Interaction

There are many ways to add hover effects to your buttons, but in order for those effects to be a meaningful microinteraction, there needs to be a rhyme or reason for it. An effective microinteraction provides the user with some additional insight into what will happen if they're about to click a button.

There are many plugins available that will allow you to seamlessly integrate hover effects to your buttons. Some of them are:

You can also whip up a fun microinteraction with just simple CSS. Want a different text to appear when you hover over a button? No sweat!

I'm working with the Twenty Sixteen theme, but I wanted to include my own button. So I added some custom CSS to create a black button, for which the hover would turn white with black text instead. I added a piece of custom CSS in the Additional CSS section of the WordPress Customizer.

First I designed my basic black button:

Then I applied the hover effect—the color change, as well as the change that would occur between the initial text and the hover text.

I saved my changes then I applied the following HTML to the page on which I wanted the button to appear.

And voilà! Here it is again:

You can use this simple CSS to work with all kinds of buttons on your site; however, appending actions or hyperlinks to your buttons is a tutorial for another time.

Social Media Microinteractions

If you're a stickler for details (which you probably are if you're reading this post), you'll notice that when you highlight a piece of text of this article you're reading right now, this happens:

When you select the Twitter icon, you're redirected to your Twitter account to tweet what you've just highlighted. Pretty neat, right?

There are a number of ways you can add this type of microinteraction to your site. You can try a plugin like Highlight and Share or Quotable or…you can try ours! We've provided a step-by-step guide on how you can achieve this great microinteraction right here.

If you're not big on Twitter, you can try adding fun microinteractions for other social media websites, like Facebook. The FB Quote Plugin lets you share highlighted text on Facebook in the same way our Twitter plugin does.

Microinter-like-tions

If you're jonesing for something in the same vein as the social media microinteractions (but not quite!), don't worry—we've got you.

Adding customizable likes to your WordPress posts is a great fun little microinteractions that allows your readers and visitors to really…well, interact with you.

Two interesting plugins that allow you to do that are ZillaLikes and I Recommend This. Both plugins help you add like hearts or recommend icons to your WordPress posts.

After installing ZillaLikes, you can add the [zilla_likes] shortcode in your pages or posts, or add the following PHP code to add the like counter to your template files.

It's always nice to have an element you deal with on a regular basis behave in an interesting manner. Even if the "interesting manner" is just a small animation, it greatly improves the user's experience with your website.

Wrapping Up

Microinteractions are there to make a user's life easier. It's important not to get carried away with too many gimmicky microinteractions that have the potential to disrupt rather than instruct. Your microinteractions should facilitate actions and tasks while seamlessly integrating with your website's overall design—they should never be the main focus.

Source: 5 Cool Examples of Microinteractions for a Better WordPress UX