User by Filipe Ferrari

Creating meaningful micro-interactions

Denislav Jeliazkov
UX Planet
Published in
4 min readSep 17, 2018

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.

To-Do app concept by Jae-Seong, Jeong

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?

Drag & Drop by Jeffrey Smith from Underbelly

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.

Add media button and menu — micro interaction by Arnaud Mazé

Rules

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

Invite Micro-Interaction by Marcelo Silva

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.

Micro-Interactions for New Sign Up by Hijin Nam for Upwork

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.

Facebook on this day

Micro-interactions best practices?

Micro-interactions in the file upload flow by Jakub Antalík for Frame.io

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.

Long hold button by Thomas Budiman for Hanno

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.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Responses (11)

What are your thoughts?

click, swipe, tap, pull, scroll.

& view-feel

3

Nice Article :)

5

Anyone have a good css/js library for animations for the web? Animate.css is getting stale and most of the animations are rather hokey.

1