If you’re looking for subtle ways to further engage with your users, look no further than microinteractions. Microinteractions are small design details that go a long way in enhancing user experience.
Microinteractions - And How to Utilize Them for Better UX
If you’re looking for subtle ways to further engage with your users, look no further than microinteractions. Microinteractions are small design details that go a long way in enhancing user experience.
What is a microinteraction?
Many parts of a UI you may take for granted are microinteractions. Scrollbars, loading bars, pulling to refresh, and mouseover effects—these are all examples of microinteractions. They can refer to any small way the user can interact with the site. These design elements that slip under your conscious radar play a big role in making your websites readable and interactive.
The four elements of a microinteraction
Microinteractions, though small, imbue each corner of your site with character. Their purpose is to continually engage the user in little ways, and make it so that their experience on the site is always dynamic and exciting.
A good example of a microinteraction is a ‘like’ button changing color after you click it.
Above were some diverse examples of microinteractions. But what are the core aspects of microtransactions that unite them all?
Every microtransaction contains the same four components.
Triggers initiate the microinteractions. The most obvious example of a trigger is a click from the user, but other triggers could be swiping, sending a message, or moving the mouse over a figure. Triggers can also be initiated by the system itself. A system-initiated trigger could be a link with an enticing animation.
Rules are the programming within the microinteraction. For example, the website recognizes that the user has clicked or scrolled on the page and prepares to give the user feedback. Essentially, the rules determine what actually happens during the microinteraction.
Feedback is what the user sees upon completing the microinteraction. For example, if clicking a ‘load’ button is the trigger, the feedback may be the appearance of a loading screen. Or if clicking a button is the trigger, the feedback may be a little congratulatory animation.
Loops and Modes determine how the microinteraction may change if it is used more than once. If the user clicks a confetti-making button a second time, does the confetti animation play again? Or does a different animation play? How many times can a microinteraction be completed?
Examples of Microinteractions
Microinteractions are subtle, but they can go a long way in making users happy.
What are some concrete examples of microinteractions? Well, they can be almost anything.
Iit is difficult to imagine a website without a scroll bar or a dynamic loading screen, as users have come to expect microinteractions with online content. Other examples of microinteractions include:
Confetti, or another animation, occurring when you click a button. The trigger here is the user clicking the button. The animation acts as feedback, rewarding the user for their action. A common example of this is confetti when submitting assignments on sites such as Canvas. This rewards users for their hard work, giving them a sense of accomplishment when interacting with your UI.
Loading screens are also microinteractions. The trigger is a user starting an action, such as moving to another page or downloading a link. The feedback is a loading screen. The most effective loading screens tend to be those that are dynamic. For example, a ball going around in a circle, or three dots jumping up and down. An active animation both entertains the user and assures them that the UI is functioning properly.
A subtle animation on a button you want your user to click. This one isn’t as obvious: rather than the trigger being an action by the user, the trigger is actually the animated element getting the user’s attention. There are many different forms this animation could take. A button could fluctuate slightly in size, or it could pulse with light or another color. Subtlety is key here, as having a button be too flashy may make users wary.
A swiping animation as the user swipes between content or pages. This creates a natural transition between pieces of content, giving the user the impression of “discovering” your UI. The trigger is the user swiping their finger or their mouse, and the feedback is the animation. Swiping animations can be themed based on the content of your UI. For example, if you have a website for young children, a swiping animation could be bright and colorful.
An element enlarging when the user hovers over it with their mouse. The trigger is the user’s mouse, and the feedback is the element growing large enough to capture the user’s focus entirely. If a user is mousing over an element, they may be interested in engaging further with it—for example, if it is a text box, they may want to read it. If the element enlarges by itself, the user will be gratified, and it will be easier to pay attention to that element.
A ‘delivered’ receipt once a message has been sent. The user triggers this microinteraction by clicking ‘send’ on a DM or other type of message. Giving the feedback of a ‘delivered’ receipt gives the user security that the intended recipient will be able to view their message. This also assures users with poorer internet access that their message has gone through.
A ‘posted’ animation once a social media post has been uploaded. The trigger is the user clicking ‘upload’ or ‘post’. This button may turn a different color, such as gray, as the post processes. Having this button change to blue, or the text change to something like “Done!” or “Success!” is ample feedback to assure the user their post is saved and is now able to be viewed.
A typing indicator during a virtual conversation. The trigger is one user beginning to type, with the feedback being the “dot, dot, dot” or “typing…” message seen by whomever they’re messaging. A typing indicator is vital in many messaging platforms. For example, if two users are conversing, and one user begins to type out a long paragraph, a long pause will occur between messages. Without a typing indicator, the other user may assume the conversation has ended and leave the UI. A typing indicator lets them know that there is an immediate response being prepared, encouraging the user to remain in the conversation until the message is sent.
Even ‘swiping’ itself is a microinteraction—something we all do on a day-to-day basis as smart device users. Swiping
Both animated details and microinteractions are vital to good UX, as they both work to make a UI seem more alive and engaging. The difference is that microinteractions are meant to guide users’ actions through a UI, while non-interactive animated elements cannot do the same. These elements can only draw a user’s attention or contribute to the UI’s overall aesthetic.
For example, GIFs that automatically play also are not microinteractions—only if a user input initiates a GIF is it considered a microinteraction.
Benefits of Microinteractions
Microinteractions can greatly improve user experience in a variety of ways.
Microinteractions provide near-instant feedback for a user’s input. This allows the user to feel more engaged with the content they’re being presented with, and encourages them to further explore the UI.
Microinteractions communicate with the user. A loading screen with a growing bar, for example, tells the user they’re waiting for a page to open and how close it is to being finished loading.
Microinteractions guide the user through the UI. Through highlighting features that the user can interact with, microinteractions can be utilized to draw the users’ attention towards the most important parts of the UI. Thus, microinteractions can be used to simplify the user interface.
Microinteractions can impact brand recognizability. Users can come to associate unique microinteractions with your specific UI, and may result in them coming back to your UI over others with less flow or character.
Microinteractions can evoke an emotional connection. By encouraging interactions, microinteractions play a role in humanizing a site. For example, a playful transition between two webpages can allow a user to associate your UI with a pleasant and lively experience.
Microinteractions can help prevent errors. For example, if a problem occurs, either through the user or the UI itself, a microinteraction can use a red indicator to show the error and convey to the user that they have to wait or choose a different action.
Utilizing microinteractions can go a long way in improving the user experience. However, it is important to avoid overusing them, as having too much going on can distract the user and become overwhelming.
The best way to utilize microtransactions is to pay attention to all the little details of your UI.
Ask yourself:
When does the user have to press a button?
What does the loading screen look like?
What information do you want to draw attention to?
These are the areas in which microinteractions can best be used to improve UX.
If you’re looking for more in-depth information as to how to use microinteractions, be sure to reach out to UXAX. UXAX combines the expertise of marketers, designers, and analytics to provide a holistic approach to UX.
