Microinteractions and Their Macro Effect on Your UX
Microinteractions and Their Macro Effect on Your UX
It really is the little things. Learn how microinteractions can fuel your UX and serve to better meet your users' needs and desires.
Join the DZone community and get the full member experience.Join For Free
[Latest Guide] Ship faster because you know more, not because you are rushing. Get actionable insights from 7 million commits and 85,000+ software engineers, to increase your team's velocity. Brought to you in partnership with GitPrime.
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.
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.
Best Practices for Microinteractions
Unfortunately, the potential of microinteractions is often overlooked in the design process, especially when considering strict launch timelines. 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. It's important to 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. By utilizing a qualitative analytics tool like Appsee, you can watch user recordings to get instant user feedback on how users interact with your microinteractions. This type of technology will allow you to see how users respond to your microinteractions and help you to test and adjust accurately.
Let's explore some examples of microinteractions that work.
Microinteractions: From the Endearing to the Useful
Microinteractions can show that you've given the user experience a lot of thought. Sometimes a microinteraction will serve to visually update/signal users on a completed interaction/gesture. For example, this could be a simple greyed out "Log In" button that stays grey until the user fills in the correct login information. It could also be a checklist app, that animates the act of completing a task as if the user has "crossed out" the task on a piece of paper.
Image Source: Dribbble
Other times microinteractions are there to streamline user journeys, improve user onboarding, and bolster conversion rates and retention. Take a look at the two examples below.
Image Source: Hongkiat
The first, search-focused microinteraction, is clean and clear-cut. The quick animations aims to isolate and emphasize the search function, and provide users with an easy means of entering their search queries (with a little spice).
Image Source: UXplanet
The second example takes the typically monotonous and error-prone task of filling out credit card information, and both beautifies and clarifies the process. By providing a visualization of a credit card that gradually fills up with the user's input, users can:
- Quickly identify information from a certain location on their physical card
- Keep track of their progress
- Confirm that their information was entered correctly.
Simplified credit card information = more conversions.
There are also purely aesthetic microinteractions, such as a slide 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.
Although physically 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 and tested with in-app analytics, microinteractions can vastly improve the UX and appeal of an app.
Published at DZone with permission of Hannah Levenson , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.