Microinteractions – Small Silver Bullets for User Experience [5 Reading Tips]

In our digital life, we are almost always surrounded by them. From mobile alarm clocks to payment apps and instant messengers to online shopping – microinteractions are used to improve our user experience. But what exactly are these small interactions between humankind and machines? And how are they used effectively?

Microinteractions: The Key to Successful UXD?

Microinteractions are small animations that are activated in different situations and interact with the user. Admittedly, not everyone will be able to immediately imagine something when reading this definition – therefore, we have prepared some examples of microinteractions just for you:

Loading Screen

Source: Dribbble

Search Bar

Source: YouTube

Used correctly, microinteractions improve the user experience and thus contribute to people using the product frequently and with pleasure. Furthermore, processes such as the purchasing procedure can be made more efficient through clear communication. But be careful! Used incorrectly, microinteractions turn into real UX killers.

Microinteractions: Four Steps to UX Success

If you want to use the power of microinteractions for your project, you should be very familiar with the stages of a microinteraction:

1.) Trigger

A microinteraction always starts with a trigger. A trigger is an object or an action that initiates the animation. A distinction is made between user-side triggers such as clicking on a purchase button, and system-side triggers such as push notifications.

2.) Rules

After activating a trigger, predefined rules are followed. They describe what the animation looks like and how it behaves.

3.) Feedback

Feedback is the animation itself which is displayed to the user.

4.) Loops & Modes

Loops and modes take effect as soon as the conditions for the animation change.

Microinteractions: What Makes Good Microinteractions?

If you want to use microinteractions profitably, there are some rules you should follow:

• Microinteractions must not distract from the actual purpose of your website
• Microinteractions should always communicate clearly what is going on
• Microinteractions have to be simple and subtle
• Microinteractions have to be used when displaying product details
• Microinteractions should be kept short to avoid annoying the user
• Microinteractions should follow anchored patterns, e.g. red = wrong, green = right

Microinteractions: Not Only Used in the Digital World

Microinteractions are a powerful tool to drastically improve the user experience. In today’s world, they are almost essential to good UX and should be used on every website and in every app. However, microinteractions are not only used in the digital world. They can also be found in physical products – for example in Amazon’s and Google’s smart home assistants which show via LED whether they are currently listening to the user or in standby mode.

The use of microinteractions should be well planned and adjusted to your interface. Here are some examples of how good microinteractions complement the user interface:

Shopping Basket Animation

Subscription Animation

Notification Animation

Our 5 Reading Tips Of The Week

How microinteractions improve your UX design [Inside Design]

Umsatz- und Conversionsteigerung mit Microinteractions | dotSource Research [dotSource]

10 microinteractions that will inspire your next project [Inside Design]

Dribbble [Dribbble]

Warum Microinteractions für User Experience – und Marken – enorm wichtig sind [CMO]