Microinteractions for Successful UX/UI Design
The concept of microinteractions has gained significant attention in the field of user experience (UX) and user interface (UI) design in recent years. If many recent articles on Medium larger publications on UXUI are correct, then micro interactions will be a hugely popular trend in 2023. As Don Norman, one of the leading researchers and forefathers in the field of human-computer interaction states “the power of microinteractions is in their ability to create delightful and engaging experiences for the user.” (Norman, 2013) In this article, we will explore the role of microinteractions in UX/UI design and discuss how they can be used to create successful products.
What are microinteractions?
A microinteraction is a small, focused interaction that a user has with a product or service, such as turning on a device or adjusting a setting. These interactions may seem insignificant on their own, but when combined, they create a cohesive and intuitive user experience. Gangadharan(2021) expands on this, explaining that micro interactions can be understood as small, functional animations which provide the user with some sort of visual feedback. They are often single-purpose interactions that serve a specific function, such as turning on a device or adjusting a setting. Dan Saffer, a designer and author on the subject of microinteractions, defines them as “the details of the design that do one small thing.” (Saffer, 2013)
Why are microinteractions important for UX/UI design?
Microinteractions play a crucial role in the overall user experience of a product or service. They help to create a sense of cohesion and flow within a product, making it easier for users to understand and navigate. Additionally, microinteractions can help to build emotional connections with users by creating small, satisfying moments of accomplishment or delight. For example, the feeling of accomplishment that comes from successfully setting an alarm on a phone or the delight of seeing a notification turn from red to blue after completing a task. As Bill Buxton(2010), a researcher and designer in the field of human-computer interaction notes, “microinteractions are like the glue that holds the design together and makes it feel complete.”
Another great use for micro interactions is distracting the user during times of frustration when using a software or product. Consider when the user hits a 404 page and rather than seeing the words ERROR they are greeted with a whimsical animation which matches the branding of the company. A great example I have seen recently of a micro interaction was on a food delivery app. For each stage of the process the app presented me with a different animation; first I saw a cartoon chef cooking my food, then I saw the delivery driver on his way with my food.
Microinteractions can also help to improve the usability of a product by providing feedback to the user. For example, when a user clicks a button, the button can change colour or display a message to indicate that the action has been completed. This type of feedback helps to confirm to the user that their action has been successful and can also provide helpful information about the state of the product. This is important as feedback is key to the success of any form of interface design.(Tognazzini, 1993)
Designing effective microinteractions
When designing microinteractions, it is important to consider their purpose and the context in which they will be used. The following are some guidelines for creating effective microinteractions:
Keep it simple
Microinteractions should be focused on one specific task and should not be cluttered with unnecessary features. Steve Krug(2006), usability consultant and author of popular UX book ‘don’t make me think’ states, “simple and obvious is almost always better than clever and innovative.”
Provide feedback
As mentioned above, feedback is crucial for confirming to the user that their action was successful and for providing information about the state of the product.
Consider the context
The context in which a microinteraction will be used should be taken into account when designing it. For example, a microinteraction that is used for setting an alarm on a phone will be used in a different context than one that is used for ordering food online.
Make it memorable
Effective microinteractions can create small, memorable moments for users that help to build emotional connections with the product. And remember the words Don Norman(2013); “emotional design is about all those moments of joy, fun, delight, surprise, and pleasure that occur throughout the interaction.” Much as I enjoyed watching the animations on the food app whilst waiting for food, you too can delight users with the right on brand animations.
Test and iterate
As with any design process, it is important to test microinteractions with users and gather feedback to ensure that they are effective. Iterating on the design based on this feedback can help to create the best possible user experience. This is UX 101!
Examples of microinteractions in action
There are countless examples of microinteractions in everyday products and services. Some common examples include:
- The spinning wheel that appears when a device is loading
- The animation that occurs when a phone is turned on or off
- The notification badges that appear on app icons
- The “like” button on social media platforms
- The progress bar that appears when a file is uploading
- The autocorrect feature on a smartphone keyboard
Microinteractions play a crucial role in the overall user experience of a product or service. By designing these interactions with simplicity, context, and feedback in mind, designers can create successful products that provide a cohesive and intuitive user experience. As technology continues to advance, the importance of microinteractions in UX/UI design is likely to only increase, making it important for designers to understand their role and how to create effective microinteractions.
References
Buxton, B. (2010). Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann.
Gangadharan, P. (2021). How Micro Interactions have become an essential part of great products. UX Planet. URL: https://uxplanet.org/how-micro-interactions-have-become-an-essential-part-of-great-products-2ac8e02b5f2
Krug, S. (2006). Don’t Make Me Think: A Common Sense Approach to Web Usability. New Riders.
Norman, D. A. (2013). The Design of Everyday Things. Basic Books.
Saffer, D. (2013). Microinteractions: Designing with Details. O’Reilly Media, Inc.
Tognazzini, B. (1993). First Principles of Interaction Design. In J. M. Carroll (Ed.), Designing Interaction: Psychology at the Human-Computer Interface (pp. 7–14). Cambridge University Press.
