{"id":166721,"date":"2017-07-27T13:00:00","date_gmt":"2017-07-27T13:00:00","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=166721"},"modified":"2017-07-26T04:15:50","modified_gmt":"2017-07-26T04:15:50","slug":"microinteractions-wordpress-ux","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/microinteractions-wordpress-ux\/","title":{"rendered":"5 Cool Examples of Microinteractions for a Better WordPress UX"},"content":{"rendered":"

They say the devil is in the details, but that is not true when it comes to user experience.<\/p>\n

A good microinteraction should facilitate or embellish an otherwise tedious task in a very subtle way\u2014a bad microinteraction can ruin your experience with a website or product. Even though they\u2019re \u201cmicro,\u201d it doesn\u2019t mean that microinteractions can\u2019t have a big impact on the way users interact with your website.<\/p>\n

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.<\/p>\n

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\u2014they\u2019re there to simplify.<\/p>\n

We\u2019ve already covered the basics of microinteractions in a previous post<\/a>, but now it\u2019s time to put them into action. Below are a few types of microinteraction examples and how you can achieve them on your WordPress site.<\/p>\n

Loading Text or Icons<\/h2>\n

It\u2019s fun to press buttons, both in real-life and on the Internet (unless you\u2019ve 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\u2019t have to be overly complicated.<\/p>\n

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.<\/p>\n

\"WP<\/p>\n

The resulting microinteraction is simple.<\/p>\n

\"WP<\/p>\n

While it doesn\u2019t 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.<\/p>\n

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

Below is a quick example on how to use a Ladda button.<\/p>\n

After you\u2019ve downloaded and uploaded both the ladda.min.js<\/em> and spin.min.js<\/em> files to WordPress, do the same with the ladda.min.css<\/em> file, which includes all the buttons.<\/p>\n

Make sure the ladda-button<\/code> class is attributed to the Ladda button, and the button label has the ladda-label<\/code> 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:<\/p>\n

Loading gist raewrites\/b748ed76e7081fbb861048ccf0404678<\/a><\/p>\n
\n

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n

The bind( )<\/code> jQuery method can be used for forms that submit entries to the server and result in a page reload.<\/p>\n

Loading gist raewrites\/7e26b912270b98166b43c3794c72677d<\/a><\/p>\n
\n

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n

This yields the following button that lets your users know their form is being processed!<\/p>\n

\"Submit<\/p>\n

Adding Tooltips to Your Forms<\/h2>\n

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\u2019t soon forget.<\/p>\n

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<\/a> or WordPress Tooltip<\/a>.<\/p>\n

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

You can also use Tooltipster<\/a>, which allows you to customize tooltips in your forms. After you\u2019ve downloaded all the files, loaded the scripts, and activated Tooltipster, you can start doing some pretty cool stuff.<\/p>\n

If you can edit your form\u2019s fields, you can append the tooltip class (class=\u201dtooltip\u201d<\/code>) and then use title=\u201dtooltip text\u201d<\/code>. 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=\u201dcustomernameID<\/code>\u201d, you can add the following script to your tooltipster-scripts.js<\/em>\u00a0file:<\/p>\n

Loading gist raewrites\/93c9d69632e54646ac30b40211e49a8f<\/a><\/p>\n
\n

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n

This yields the following result:<\/p>\n

\"Tooltip<\/p>\n

The secret to useful tooltips is to not go overboard. Adding tooltips to everything might really annoy some of your visitors. It\u2019s important to remember that less is more when it comes to microinteractions.<\/p>\n

Hover Interaction<\/h2>\n

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\u2019re about to click a button.<\/p>\n

There are many plugins available that will allow you to seamlessly integrate hover effects to your buttons. Some of them are:<\/p>\n