
Creating meaningful micro-interactions
While design solves universal problems, micro-interactions are the delightful moments your users have while using the product.
These small details can make the experience between your product and the end user more fun, easy, effective and human. It happens very often that we are used to certain habits of using products so we don’t even notice them, their goal is to be clever and subtle.
Focus on the details that bring delight.
They are anything but micro when it comes to delivering the best User Experience. Those little moments of joy that can be done into the most innocuous of tasks, micro-interactions as they are called transform the tedious into the mesmerizing.

What are micro-interactions actually good for?
Dan Saffer, the author of the book Microinteractions, defines micro-interactions as “contained product moments that revolve around a single use case — they have one main task.”
- Accomplishing a single task
- Managing an ongoing task
- Pairing devices together
- Interacting with a single piece of data
- Controlling an ongoing process
- Adjusting settings
- Creating or viewing a piece of content (e.g 3D touch)
- Turning features on/off
What makes a good micro-interaction?

Dan Saffer also describes the four ingredients you need to make micro-interactions effective:
Triggers
This is what initiates the micro-interaction. A trigger can be a floating icon that enourages a user to click, swipe, tap, pull, scroll.

Rules
The trigger engages the rules. This is what happens during the interaction and it needs to feel natural for a user.

Feedback
This lets the user know what exactly is happening. For example, it can be loading animation, pop-up, color fill an icon or any other range of interaction.

Loops and modes
This determines the length of a micro-interactions as well if the user will need to repeat it or change it over time.

Micro-interactions best practices?

Let’s keep it simple.
We all are interacting with many micro-interactions on a daily basis, it’s best that those interactions stay as simple as possible. If they are too complex it can frustrate them instead. We as designers need to focus on adding value and meaning to them instead of trickery and gimmicks. Don’t think of the product as it is right now, think of how the users will use it as your product evolves
Consistency is KEY!
As I explained above, interactions need to go unnoticed as much as possible. This may seem hard at first, but if you plan out your product and create reusable micro-interactions users will love how intuitive they are. Unexpected surprises can hurt the User Experience so if you have a theme of the product just go with it. Don’t forget to pair micro-interactions with great copy for even higher impact.
Micro-interactions needs to have a purpose
Each time you prototype a micro-interaction think of why you are choosing it? What is the message you want to convey to the user? Don’t forget about the true purpose of a micro-interaction. We as designers often fall victims in our creative trap, doing things because they look pretty and losing sight of our audience and goals.

In the hands of the people
It’s one thing to design it in Sketch or any other design tool, it’s another story to see those interactions in the hands of users. I personally use Principle for all of my prototypes because it’s lightning fast and you can mirror the prototype to your device. In order to gather real data from real users, you need to give the prototype in their hands and see how they interact with it. The tool in which you prototype is not important as long as the users can test it on a real device.
Conclusion
All good interactions can stand up in the overall design. The small things are the ones that can keep your users delighted and removing friction while using your product. A good practice is to be predictable. Users are used to a set of behavioral patterns and micro-interactions. Make sure you know why you are breaking long-established patterns.