Essentials of UI Design XX: Introducing Microinteractions and How They Impact UI Design
Swiping an icon here, clicking a button there, what we find is that little interactions like this with a digital service all contribute to the user experience. Also known as microinteractions, they can transform your design and help you create an enriched user experience. This article explores how you can use these little touches to make your designs stand out.
But What are Microinteractions?
A microinteraction is simply a tiny point of interaction between a user and a digital product. It serves a specific purpose and happens so that a user can get a response when they trigger an action.
A common example is when someone taps the “Like” button on Facebook or another social media platform. What the button does depends on the platform, but it always lets you know that your action was recorded. However, other users also get to know that the content is popular.
Therefore, microinteractions provide feedback, informing users of their actions or changing their behaviors. Clear, accessible and intuitive interactions help users to feel a sense of accomplishment in using any product.
4 Elements of Microinteractions
There are four components to every micorinteraction:
Trigger
The trigger represents the start of the microinteraction. Explicit triggers (such as hitting the Like button) are user-initiated while implicit triggers (like displaying a notification or automatically updating information) are system-initiated.
Effective triggers are clear, visible and intuitive, so users know what to do to initiate the interaction.
Rules
These conditions determine how the interaction will behave. They guide how the system responds to the trigger and specify what users can and cannot do. Rules also provide hints when the constraints are met.
Feedback
Feedback provides users with a visual or auditory response to their actions, telling users about the outcome or status of their action. It also confirms their input has been recognized and feedback can range from visual cues to sound effects to progress indicators.
Loops and modes
Loops and modes define what happens during and after the microinteraction. Loops are the continuous feedback or animation that happens during the microinteraction and exist to give users a sense of progress and continuity.
Modes define the different states or variations of a microinteraction that can exist depending on the context or user behavior. Loops and modes help to create a more dynamic and personalized experience.
