Microinteractions - How small moments create a great UX

What exactly are microinteractions?

When developing an application, attention is paid not only to design but also to the user experience, this plays a significant role in whether a product is successful or failed. The goal of every application should be to leave users feeling positive. This is where microinteractions come into play, which interaction designer Dan Saffer describes as follows in his book “Microinteractions - Design with Details”:

Microinteractions are the small pieces of functionality that surround us. By focusing on these, you can achieve a superior user experience.

In order to offer a positive user experience, communication between humans and machines must be kept simple, clear and work quickly. This communication is largely realized through microinteractions. In a figurative sense, they form the interface between the two communication partners humans and machines.

As a software service provider, the use and implementation of microinteractions is an important part of the development process. They are directly related to the “joy of use” or user experience and often make a product or application unique in the first place.

Four phases after Dan Saffer

Designer Dan Saffer divides microinteractions into four phases or even components. The first phase consists of a trigger or even Trigger called, which initiates a microinteraction. The grasping rules determine how it works. The feedback, i.e. that feedback, is necessary for communication between humans and machines. modes are used when there is a rare action that could overload a microinteraction. Grinding or even Loops Set the duration of a microinteraction and can, for example, extend or repeat an animation.

If a designer is guided by this structure, many mistakes can already be avoided.

To illustrate, we have created a simple example of a login here:

The monster playfully supports input. Seriousness and benefits must of course always be considered in context. Such a playful animation would be rather daunting for logging in to a banking app, for example.

In the login example, let's look at the triggers, rules, feedback, loops, and modes.

The user initiates the start of the animation by tapping on the input field. The rules determine how the animation behaves during the user's various interactions. If this stops the input, for example, the animation must not continue or the monster must no longer squint to the right. With each additional letter, the monster's eyes continue to follow the input. If the input is directed to the password field, the monster looks away. This feedback underlines the fact that a password is entered here and playfully explains the current process.

Loops and modes are not really used at this point.

In our example, a boring or even annoying process becomes an entertaining experience.

conclusion

When it comes to the question of when microinteractions should be developed, several factors play a role. Some microinteractions can already play a major role in the structure of the application, others only need to be examined after the initial implementation. It is also important to always focus on what is to be achieved. Animations rob the user's attention and should be used sparingly and effectively.

Source: “Microinteractions - Design with Details” by Dan Saffer (2013)

‍