{"id":20385,"date":"2022-04-26T11:00:00","date_gmt":"2022-04-26T11:00:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=20385"},"modified":"2022-04-26T11:00:00","modified_gmt":"2022-04-26T11:00:00","slug":"inspiration-for-microinteractions","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/inspiration-for-microinteractions\/","title":{"rendered":"Inspiration for Creating Delightful Microinteractions on Your Site"},"content":{"rendered":"\n
Landing on a great WordPress site feels like finding money you forgot about when you reach inside your pocket. It\u2019s unexpected, but familiar. It loads fast, looks amazing, and can completely make your day.<\/p>\n\n\n\n
The whole experience is incredibly well thought out. You don\u2019t even start scribbling down ideas of how you can implement this sort of UX into your own site until you\u2019re at least five pages deep.<\/p>\n\n\n\n
Functionality is important, but the real differentiator between decent websites is the work that\u2019s gone into the tiny aspects that catapult the user experience to the next level.<\/p>\n\n\n\n
A microinteraction is the completion of a single task. Pressing snooze on the alarm. Clicking like on Facebook. Jumping over to the next song on Spotify.<\/p>\n\n\n\n
The humble microinteraction doesn\u2019t look like much on the surface. It\u2019s simple, unobtrusive, and completely self-explanatory. But, it is that little, almost invisible interaction that takes a website from mere functionality to mind-blowing usability.<\/p>\n\n\n\n
If you want your WordPress site to go above and beyond, the little touches are incredibly important. They are what really elevates a solid design to the level that inspires delirious sighs of delight.<\/p>\n\n\n\n
Breaking Down Microinteractions<\/h2>\n\n\n\n
A microinteraction is made up of four separate parts: the trigger, the rules, feedback, and loops and modes.<\/p>\n\n\n\n
1. The trigger<\/strong><\/p>\n\n\n\n
The trigger is the real, physical part that sets off the experience. It can be manual, like a login button, or automatic, like an exit popup.<\/p>\n\n\n\n
Automatic system triggers elevate the user experience a little bit further by molding the interaction to their preferences and past actions. So, if you\u2019ve visited a site a few times and downloaded specific types of content, you could get a completely different kind of popup compared to someone who\u2019s landed there for the first time.<\/p>\n\n\n\n
2. The rules<\/strong><\/p>\n\n\n\n<\/figure>\n\n\n\n
The rules define the scope of the interaction and determine how it all works. They should be invisible to the user and happen strictly behind the scenes.<\/p>\n\n\n\n
3. The feedback<\/strong><\/p>\n\n\n\n
The feedback is what the user actually sees. It\u2019s the bar on top of an opt-in form telling you there\u2019s 50% left or the loading cartoon when you sign in to access gated content.<\/p>\n\n\n\n
4. Loops<\/strong><\/p>\n\n\n\n
The loop dictates the length of the microinteraction. It determines whether it has a distinct end or keeps going.<\/p>\n\n\n\n
The real power of microinteractions<\/strong><\/p>\n\n\n\n
Microinteractions create a sense of continuity. A sense of care. They make a site feel less intimidating and clearly let the user know what\u2019s going on at any given time.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Most of us get a little bit angsty when faced with the unfamiliar. When we go over to a particular page, it\u2019s usually with a purpose in mind, such as reading a blog post, signing up for a new product, or downloading a great resource. And if it doesn\u2019t work the way we expect it to, it\u2019s super frustrating.<\/p>\n\n\n\n
Microinteractions help add a personal touch to the looming unfamiliarity. They let your users know that they are on the right path\u2014that they are going to get exactly where they want to be.<\/p>\n\n\n\n
Some Delightful Microinteractions<\/h2>\n\n\n\n
The specific kinds of microinteractions you include in your website depends on your site\u2019s purpose. Why are people there and how can you make it easier for them?<\/p>\n\n\n\n
What works best depends on your brand, your product, your audiences, and your stylistic preferences.<\/p>\n\n\n\n
Let\u2019s take a look at a couple of WordPress sites that are rocking microinteractions for their audiences!<\/p>\n\n\n\n
To click or not to click<\/strong><\/p>\n\n\n\nScreenshot from the Blue Cadet homepage in which the National Association of Broadcasters is subtly highlighted<\/figcaption><\/figure>\n\n\n\n
![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/01\/inspiration-microinteractions-facebook.png\")
<\/figure>\n\n\n\n![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/01\/inspiration-microinteractions-screen.png\")
<\/figure>\n\n\n\n![\"two](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/01\/inspiration-microinteractions-user-experience.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2022\/04\/blue-cadet-screenshot-1-784x284.png\")
![\"inspiration-microinteractions-scroll-bar\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/01\/inspiration-microinteractions-scroll-bar.png\")
<\/figure>\n\n\n\n![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/01\/inspiration-microinteractions-device.png\")
<\/figure>\n\n\n\n