Micro-interactions
Make your design intuitive and delightful
Have you ever been in the middle of two products trying to determine which one is better? Even if both products have the same price and the same functionality, you’ll surely choose the one which captures your eye and gives you a delightful look and feel that the other doesn’t have.
Free & Discounted Udemy Courses — Explore Now
Micro-interactions is the implementation of motion in the visual design, which gives dynamism to the interface and evolves the design in such a way that the user gets a more realistic and delightful experience.
Details matter, and when we talk about giving the details a delightful look and feel, micro-interactions have an important role. They can be powerful if done correctly, but if done wrong it could lead to significant usability problems.
Micro-interaction is a subtle interaction that improves the experience of your product when a user is accomplishing a single task. These tiny interactions make your experience weightless and smoother. they humanize the experience and allow users to engage delightfully.
To create micro-interactions, it is important to understand that they intend to use design elements motion to drive the attention of the user. Thus, we have to first understand how the motion works and how it can make better engagement with the user.
In 1981, the Disney animators Ollie Johnston and Frank Thomas introduced to the industry 12 concepts of animation that intend to set the bases to create more realistic animations creating the illusion of flexibility, gravity, and weight. Since then, these principles are used throughout any animation process. In the video below you will see a quick explanation of the 12 principles.
Source Illusion of life: Principles of animation
If you want to enhance your knowledge about principles of animation you can read Animation principles for UX and UI designers by Vernon Joyce.
These principles of animation help you to create more natural micro-interactions, giving an aesthetic look and feel beyond just the movement. This kind of application of motion helps us to enhance our design and its experience in multiple ways such as:
- Communicating feedback or the result of an action, for example, confirmation of an item added to cart, like with “+1”
2. Acknowledge the accomplishment of an isolated or individual task (Connecting one device to another, like a friend’s post).
3. Reducing the uncertainty, for example, loading states with a live and engaged progress.
4. Preventing user error, for example, the feedback of security when you are setting your password in a platform, social media, mail, etc.
To create a micro-interaction, it is important to understand the points where the user actually requires it. We have to be very careful as overuse of motion spoils the experience, such as giving more than the determined time or distracting the user from the main task.
Once we define the strategy of doing motion in design, we have to set the structure of the micro-interaction that determines the behavior of it. Let us see the structure of a common case of micro-interactions, the login process.
Trigger
It’s the initiator of the micro-interaction, Triggers can be user-initiated (ex. A button, toggle, etc) or system-initiated (ex. a notification, error, alert, etc). It should be documented in a description of the initiator, the component and the action involved, for example.
User-initiated:
Trigger: The user clicks on the login button.
System-Initiated:
Trigger: The system receives a notification (built into the system)
Rules
These are the parameters that the micro-interaction follows, what happens once the trigger is activated. It should be documented in an overall description of the behaviour of the micro-interaction, for example.
Rule: “Check the login information in the system”
Feedback
It is the “feel” part of the micro-interactions, this acknowledges the user that something is happening, it could be sound, visual, etc, it should be documented in a detailed description of the visual transition.
Feedback: a progress bar appears on the bottom of the password text field, once it is fulfilled, a tick mark appears and the next page will load.
Loop and Modes
Determine the meta-rules of the micro-interaction, the considerations about how the micro-interaction is reused, including how long it lasts (loop) and how it changes for subsequent uses(mode), as well as if the user can change aspects of it in the settings/preferences, for example
Mode: Password is correct
- Feedback: A progress bar appears on the bottom of the password text field, once it is fulfilled, a tick mark appears and the next page will load.
- Duration:
1sec (Progress bar)
0.25 ms (tick mark) - Delay: none
- Transition: ease in
- Loop: Count Controlled — One time
Mode: Password is incorrect
- Feedback: A progress bar appears on the bottom of the password text field, once it is fulfilled, a cross mark appears and the form field vibrates.
- Duration:
1sec (Progress bar)
0.25 ms (tick mark)
0.25 ms (vibration) - Delay: none
- Transition: ease in
- Loop: Count Controlled — One time
All of this documentation should be shared with an example of the micro-interaction, it could be a quick gif or a clickable prototype.
In the creation of micro-interactions, it is important to implement good practices in order to avoid common mistakes, some of those are:
Keep it simple: Use the elements that you already have on the screen, don’t create additional elements that could distract from the key interaction. Keep the movement as simple as possible, too much movement could create chaos and it could annoy the user.
Functionality. Micro-interactions should enhance your design, the animations should be appealing but also functional. If the motion makes the user struggle with the experience then it’s a bad implementation of the micro-interaction. Heuristic evaluation [Link] will help you to refine the usability of your micro-interactions.
Don’t start from zero: Ideally, micro-interactions are best done when you have visuals signed off and you have an understanding of your users, even though the implementation and thought process should be defined and balanced with the MVP. Standard patterns of implementation can be explored while designing visuals.
Alignment with user:
Intent It’s important to understand the personality of your product, which defines the mood of your micro-interactions. For example, probably giving a lot of movement to a product that requires urgency such as trying to reach out to someone in an emergency as it would hinder the experience.
Language Use a natural language that the user can engage in, understanding their behaviour is essential to talk the same language. The use of humour is always effective, which creates remembrance and can reduce the frustration of the user in situations such as error and loading states.
Expectation: Timing is crucial in micro-interactions, there should be a balance in the animation between not too slow as it loses the engagement with the user but neither too fast as it would make it hard for a user to notice the change in the screen. Researchers say that animation of less than 0.1 sec won’t be registered by any user and a motion of more than 1 sec could be perceived as a delay in a task process. There may be edge cases determined by your project or user needs, which is why it’s important to understand your users first.
Use natural and consistent motion: Implement principles of animation that give a smooth look and feel to your animations. Using a linear movement could make the design mechanical and plain. Try to be consistent with your kinds of motion, your product should have a consistent look and feel throughout.
Nowadays micro-interactions are essential in the design of digital products, if they are implemented properly, they evolve products and make them more lively. A good micro-interaction is invisible for the users, it shouldn’t interfere or spoil the main experience, but the user should notice the improvement that the micro interaction gives.
Tips / Best Practices
- Don’t start from zero, start considering the context of the users and standard patterns available online.
- Always keep the user informed about what goes in the system through micro-interactions wherever possible.
- Use familiar and natural animations. Use humor to engage with your users.
- Define consistent guidelines to implement different micro-interactions.
- Avoid Unwanted Interactions
- Always ensure micro-interaction comply with heuristics.
- Follow the principles of animations.
Checklist
- Define the structure and guidelines for micro-interactions.
- Define all the cases that require micro-interactions.
- Define trigger, rules, feedback, loops, and modes for each micro-interaction
- Do not use a linear motion style as it feels flat and doesn’t appeal to the users.
- Test and refine the micro-interactions.
Related Topics
Quick Question
When is it important to define modes and loops while creating micro-interactions?
- When the micro-interactions can change in different situations.
- When the micro-interaction is long.
- When the micro-interaction is too short.
- None of the above.
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
