{"id":164624,"date":"2017-05-11T13:00:23","date_gmt":"2017-05-11T13:00:23","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=164624"},"modified":"2017-05-08T02:19:00","modified_gmt":"2017-05-08T02:19:00","slug":"microinteractions-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/microinteractions-wordpress\/","title":{"rendered":"How Microinteractions Make Boring Websites Larger Than Life (and How to Add Them to WordPress)"},"content":{"rendered":"

Microinteractions are single-case interactions that revolve around the use of a product or technology. They are everywhere<\/strong> in the real world and online. Maybe you’ve noticed them, maybe you haven’t. But one thing’s for sure: their proper use (or misuse) can make or break a product.<\/p>\n

In this articles, we’ll take a\u00a0closer look at microinteractions and how you can use them to improve the user experience of your WordPress website.<\/p>\n

What are Microinteractions?<\/h2>\n

An example of a familiar microinteraction is the use of a hyperlink on the web. Links are usually underlined and change when you hover over them. These two elements have become ingrained in us so deeply that we instinctively know what to do with them. We don’t have to think twice and there’s no confusion.<\/p>\n

If you show a webpage to someone who has never used the internet before, they may not know what to do with a link, perhaps mistaking it for simple highlighted text.<\/p>\n

Why Microinteractions Matter<\/h3>\n

For newcomers to a product or service, microinteractions serve as sensory cues, establishing a pattern. But for the initiated, they provide familiarity, which increases user happiness and also leads to usage efficiency.<\/p>\n

Catering to Preconceptions<\/h3>\n

When creating microinteractions you’ll need to cater to user preconceptions. Let me show you what I mean by looking at a great article named What is a microinteraction<\/a>.<\/p>\n

If you view the article and scroll down you’ll see the Vine embeds. Even if they don’t display the “click for sound” text, you’ll know what the icon is in the bottom-right. Clicking in it will give you sound: your preconception has been fulfilled.<\/p>\n

Now, scroll down to the very bottom and click on the image under the “The Structure Of Microinteractions” image. It opens in a lightbox, so press escape to go back to the article. Ooops, it didn’t work! The display isn’t actually a lightbox, it’s a static image file.<\/p>\n

Not only can the user not press escape, but might not understand what’s happened, and may need a few seconds to stop smashing escaping and click back.<\/p>\n

Microinteractions in WordPress<\/h3>\n

So where are microinteractions in WordPress? Any time you interact with anything you’ll see one. From menu hovers to clicking buttons and saving comments.<\/p>\n

\n
\"Comment
A comment microinteraction.<\/figcaption><\/figure>\n<\/div>\n

The gif above shows a couple. Take special notice of clicking the update comment button. A little loader is displayed immediately which lets me know that everything is going as planned. My interaction was successful, I just need to wait for things to be saved.<\/p>\n

Microinteractions on Websites<\/h2>\n

Far more important than the WordPress backend is how your visitors will interact with your site.<\/p>\n

Here are a couple of examples I like from the wild, and not necessarily from WordPress sites:<\/p>\n

Svbtle<\/h3>\n

On the Svbtle blogging website, when you give\u00a0kudos to someone there’s a cute animation that makes it pretty obvious your kudos has been delivered.<\/p>\n

\n
\"Giving
Giving kudos to a Svbtle article<\/figcaption><\/figure>\n<\/div>\n

Tinder<\/h3>\n

If you’ve used Tinder before, you’ll be more than familar with swiping. This microinteraction, which is reminiscent of turning a page in a book, is easy to understand, repeat and enjoy.<\/p>\n

\n
\"A
A Tinder swipe.<\/figcaption><\/figure>\n<\/div>\n

Facebook<\/h3>\n

When you hover over a\u00a0“Like” button on Facebook, you can choose to use an emotion. Another great microinteraction.<\/p>\n

\n
\"The
The all-important Facebook Like.<\/figcaption><\/figure>\n<\/div>\n

Note that many of these microinteractions have subtly tuned animations. Getting microinteractions just right<\/em> is key to making them fit within a workflow and be a pleasure to use.<\/p>\n

Creating Your Own Microinteractions<\/h2>\n

A combination of CSS and JavaScript can be used to create some great functionality with relative ease. For this section of the article, I’ll presume you know how to make themes so we’ll just focus on the interactions themselves.<\/p>\n

Creating a Nice Menu Experience<\/h3>\n
\n
\"A
A simple, but effective menu microinteraction<\/figcaption><\/figure>\n<\/div>\n

To create this microinteraction all you need is CSS. Links consist of an outer hyperlink container which is set to be a block level element. Each contains two spans with the two lines of text. On hover, the top border becomes higher, the bottom text starts gaining opacity and looses its negative bottom margin. Check it out:<\/p>\n

Loading gist df0e7215ca50adebc4cec6846689fc4c<\/a>

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

Loading gist df0e7215ca50adebc4cec6846689fc4c<\/a>

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

Better Links<\/h3>\n
\n
\"A
A link showing useful information about the target\/<\/figcaption><\/figure>\n<\/div>\n

This requires a little bit of Javascript, but only because the target is parsed out of the URL.<\/p>\n

Loading gist df0e7215ca50adebc4cec6846689fc4c<\/a>

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

Loading gist df0e7215ca50adebc4cec6846689fc4c<\/a>

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

Loading gist df0e7215ca50adebc4cec6846689fc4c<\/a>

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

I used a little vanilla JS, no jQuery or other library is necessary for such a simple task. If you want to forgo the JS, or you are creating these links manually, you could put any text in the data-target attribute, say: data-target=\"To Wikipedia!\"<\/code> and it will work just fine.<\/p>\n

Conclusion<\/h2>\n

This was just a brief introduction to the world of microinteractions. As interactions become more and more complex – like paying for a product – you’ll need to do more and more work and testing.<\/p>\n

The good news is that these are micro<\/strong> interactions. You don’t always need to focus on the whole process, first make sure that your loading button is nice and smooth. Then turn your attention to a better card number input system.<\/p>\n

Remember, it’s the sum of all these little parts that matter, how they come together into on cohesive whole. Make one little interaction better, and your whole website just got better!<\/p>\n","protected":false},"excerpt":{"rendered":"

Microinteractions are single-case interactions that revolve around the use of a product or technology. They are everywhere in the real world and online. Maybe you’ve noticed them, maybe you haven’t. But one thing’s for sure: their proper use (or misuse) can make or break a product. In this articles, we’ll take a\u00a0closer look at microinteractions […]<\/p>\n","protected":false},"author":344049,"featured_media":164686,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557],"tags":[38],"tutorials_categories":[],"class_list":["post-164624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-design"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=164624"}],"version-history":[{"count":13,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164624\/revisions"}],"predecessor-version":[{"id":164803,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164624\/revisions\/164803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/164686"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=164624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=164624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=164624"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=164624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}