Tallan Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

What are Microinteractions in UX Design?

The word microinteractions is likely unfamiliar if you’re not a UX designer but, you interact with them all the time in the physical world and digital world. They’re the notifications for new emails, the likes you give on Instagram posts and the visual cue your scrollbar gives you about your position on a page. You likely haven’t thought too much about these microinteractions which is exactly how they’re supposed to be.

Microinteractions are interactions with a single main task. They are made of 4 parts: a trigger, rules, feedback and loops & modes.

Microinteractions Parts Example

  1. The trigger starts the microinteraction.
  2. Rules determine what happens when the microinteraction is triggered.
  3. Feedback lets users know what is happening such as error messages or a loading graphic.
  4. Loops & modes determine the meta-rules of the interaction, such as how long it will take.

Microinteractions serve a multitude of purposes. Some are like features such as Instagram likes. Others are created to prevent mistakes and stop frustration like warnings for wrong inputs. No matter the purpose, they’re usually the finer details of an interface and many bad microinteractions will impact your experience.

Microinteractions are a particular type of motion that can be added to UX. That is why so many examples of microinteractions are animations. It’s important to understand that while microinteractions can be animations, that they are not just animations. Microinteractions are created with a purpose and creating a good microinteraction is difficult. An example of this is the loading screen. Not having one would be frustrating because you don’t know what is going on. The obvious solution would be to have one. It works until there is a long wait. It becomes frustrating again because you once again don’t know what is going on. A better version would be to give information as you load because it gives a user context. It’s a common narrative that has many options. The guidelines for microinteractions are not set in stone. There is a multitude of reasons, including a lack of resources on the subject. The topic of microinteractions leads to significantly less google results than its parent, motion in UX. Dan Saffer’s book Microinteractions: Designing with Details is frequently brought up and is the only book that talks about the subject. The lack of research makes it challenging to design a good microinteraction much less understand what a poor microinteraction is. This is the only post I found on bad microinteractions. As someone not trained in UX, I found I needed the explanations because I couldn’t always see what was wrong. Why did I find it difficult to find the problems? The animation was good. Good animation can distract or take away from the reality of bad design.

Another reason I point out the link between microinteractions and motion in UX is because you can use motion in UX to improve your microinteractions. There are significantly more resources for motion in UX and motion design for websites than microinteractions. They’re good resources on how to implement microinteractions in a pleasing way for the user. They’re not often linked to microinteractions which is a problem because it results in the potential of good animation hidden by bad design. By combining the two, you will know how to create animations that will enhance the experience.

Overall microinteractions are important to our daily experience despite their invisible nature. There aren’t enough resources on them quite yet but you can utilize its motion in UX for guidance in implementation.


Learn more about Tallan or see us in person at one of our many Events!

Share this post:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\