Published on <a href="https://blog.prototypr.io/microinteractions-and-their-macro-effect-on-your-ux-43850f3ffaf2?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Appsee <img alt="" src="https://cdn-images-1.medium.com/max/900/1*0UmT4VeMmZ3GrCcBNqe16A.jpeg">
Microinteractions range from the essential to the simply enjoyable. What is a microinteraction? Well, every time you interact with an app, website or even an appliance, even in the most insignificant way, you have engaged in a microinteraction. An example would be clicking on a hyperlink and changing its color, or putting your phone’s alarm on snooze.
A microinteraction is there to make life easier for the user, to improve it one way or another, whether we’re talking about Google’s “translate this page” option or a hover-over animation that makes the user smile.
From a mobile UX point of view, microinteractions make an app feel more human, more personal. They can also help the user feel a connection to the brand, a connection that will keep that user coming back.
<h3>Designing Microinteractions</h3>
Microinteractions are pretty much everywhere and it’s their seeming invisibility that makes them very relevant to the user experience. Most microinteractions go unnoticed, but when orchestrated well, they can create a very enticing UX.
There are many cases in which you’ll find a microinteraction, including: switching a device on or off, sharing or liking media, connecting multiple devices in games, sliding down the screen to refresh a page, viewing a notification, changing a setting, commenting on a page… the possibilities are endless. Every time there is an action from the user and a reaction from any device or medium, a microinteraction occurs.
This leads to the understanding of the four steps of the microinteraction process, which are: Trigger, Rules, Feedback, and Loops and Modes. Basically, the user initiates the microinteraction through an action, whether it is a hover over an element, or pressing the “like” button. The rules of the microinteraction determine what that action essentially means. The user then receives feedback. Finally, the loops and modes determine the meta-rules of the microinteraction. Modes themselves determine the external elements of a micro-interaction that have an influence on how the microinteraction manifests itself, such as picking a city when checking out weather data. Loops determine variables such as the length of the microinteraction, if it is repeatable and how the microinteraction changes over time.
<h3>Best Practices</h3>
Unfortunately, the potential of microinteractions is often overlooked in the design process. Microinteractions are part of any app, but how designers put them into effect can totally vary. Standard microinteractions are great to utilize, but shouldn’t encompass your entire app- especially given the increased focus on user personalization and rise of users’ standards.
When designing microinteractions it’s best to start with your documentation and user research. Using a customer journey map can do wonders here. By understanding what the user does before, during and after using your app, and understanding the user’s emotions, desires and interests, you can truly empower your microinteractions. A good example of this would be Gmail’s microinteraction where the user is notified when they are about to send a mass email to someone that was not included in previous mass emails. If for example, a user has two Michael’s in his mailing list, one Michael who is his colleague and one who is a previous client, then this little microinteraction can help avoid a potentially embarrassing situation.
Moving forward, do not be afraid to “borrow” microinteractions ideas that have already been shown to increase the user experience. It’s also a good idea to make the most out of the elements that already exist in the UI, elements like the scroll bar, input buttons etc.
On the more technical side of things, make sure that your microinteractions are foolproof. Some microinteractions don’t get noticed by the user until they go wrong, and then it’s an unpleasant experience for the user. Lastly, test your microinteractions in long loops. A microinteraction might seem fun after a couple of uses, but it might get tiring once it has to be used over and over again.
<img alt="" src="https://cdn-images-1.medium.com/max/931/1*2Db3CwVTOE0HjbQBwzPvUA.jpeg">When a user likes a photo on Dribble, a heart appears that fills up with “love”.
<h3>Microinteractions: From the Useful to the Endearing</h3>
Microinteractions can show that you’ve given the user experience a lot of thought. Sometimes a microinteraction can be a simple greyed out “Log In” button that stays grey until the user fills in the correct login information. Other times, like in the case of the KLM app, a microinteraction visually represents the price of a ticket making it easier to find the cheapest flight.
On the other hand take a look at Letterboxd. No one likes filling in captchas, right? Letterboxd has taken that into consideration and has tailored captchas for its user base, making them movie themed and feel like less of a task. This further reinforces the brand’s theme and creates a fun connection with the user.
<img alt="" src="https://cdn-images-1.medium.com/max/534/1*jYPEr9IJ2sjt3r_ylSGSdQ.png">
Other times microinteractions are there to create an emotional connection. Take Path’s case for example. When a user hovers over the Path button, the animation noted in the bottom left icon occurs.
<img alt="" src="https://cdn-images-1.medium.com/max/619/1*7IWUeH_Pyhi3RJPIIdBNTQ.jpeg">
There are also purely aesthetic microinteractions, such as Airbnb’s menu transition. This allows the user to easily navigate to the menu, yet also still see a glimpse of which page they had just been looking at. Not only does it make the app look sleeker, it also allows the user to easily access menu page with an easy ability to reference their previous page.
<h3>Conclusion</h3>
Although small, when applied across your app microinteractions can help establish an overall sense of quality and uniqueness. These attributes are especially crucial in terms of differentiating your app from the millions of other apps out there. Microinteractions also demonstrate the detailed thought and effort that went into creating your app. They put the user first, and can speak volumes about your brand’s value. Ultimately, when properly applied, microinteractions can vastly improve the UX and appeal of an app.
This was originally posted on <a href="https://pm.appsee.com/2015/11/05/microinteractions-and-their-macro-effect-on-your-ux/?cpnid=701b0000000Wd7c">Product Mavens</a>.
<a href="https://courses.appsee.com/qualitative101/?cpnid=701b0000000Wd7c&amp;utm_source=medium&amp;utm_medium=banner&amp;utm_campaign=microinteractions_macro_effect"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tVqDuCaFO1h0auyjDb3RCA.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=43850f3ffaf2" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/microinteractions-and-their-macro-effect-on-your-ux-43850f3ffaf2">Microinteractions and their macro effect on your UX</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Microinteractions and their macro effect on your UX

Top Stories