How Microinteractions Make Boring Websites Larger Than Life (and How to Add Them to WordPress)
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 closer look at microinteractions and how you can use them to improve the user experience of your WordPress website.
What are Microinteractions?
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.
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.
Why Microinteractions Matter
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.
Catering to Preconceptions
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.
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.
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.
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.
Microinteractions in WordPress
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.
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.
Microinteractions on Websites
Far more important than the WordPress backend is how your visitors will interact with your site.
Here are a couple of examples I like from the wild, and not necessarily from WordPress sites:
Svbtle
On the Svbtle blogging website, when you give kudos to someone there’s a cute animation that makes it pretty obvious your kudos has been delivered.
Tinder
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.
When you hover over a “Like” button on Facebook, you can choose to use an emotion. Another great microinteraction.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
Note that many of these microinteractions have subtly tuned animations. Getting microinteractions just right is key to making them fit within a workflow and be a pleasure to use.
Creating Your Own Microinteractions
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.
Creating a Nice Menu Experience
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:
Better Links
This requires a little bit of Javascript, but only because the target is parsed out of the URL.
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!" and it will work just fine.
Conclusion
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.
The good news is that these are micro 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.
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!
Tags:
Daniel Pataki Daniel is the CTO at Kinsta and has written for many outstanding publications like WPMU DEV and Smashing Magazine. In his spare time, you'll find him playing board games or planning the next amazing office game like the not-at-all-destructive Megaball.