The smallest things sometimes make the biggest difference. What we are referring to? Microinteractions, or microanimations. What they are? Small, functional animations that are used in digital applications to make them more engaging and easy to use. Apart from their functional tasks, however, they do one thing above all: they give digital products a “human touch” and captivate the user by arousing emotions.
November 24, 2022
Microinteractions have a big influence on user experience. This is the case, on the one hand, because of their emotional impact, and on the other hand, due to their important technical functions. These include:
Through their functions, microinteractions convey information such as system status, ensure correct product usage and generally support the customer’s interaction with a digital product.
They are also an essential brand ambassador. Microinteractions can be highly customised and adapted to a company’s brand language or corporate identity (CI).
Okay, microinteractions are important. But what are some examples? Have I potentially already encountered some types of microinteractions? We are certain the answer is “Yes.”
Microinteractions can be found on all well-designed applications and exist in various versions of which we are sure you already know a few:
The function of microinteractions is determined by triggers, rules, feedback and loops & modes:
Microinteractions are initiated by a trigger and are purpose-bound. A trigger can be a change in the system status or an action taken by the user, for example when the cursor is moved over a button.
In the background, rules determine what happens during an interaction. By interacting, the user learns the rules by which an action takes place → see feedback.
Visual feedback informs the user what is happening as a result of the trigger. Feedback is communicated through small, context-bound, mostly visual changes to the user interface.
For example, if I “pull” the upper part of the smartphone screen downwards with my finger, the page reloads.
Loops and modes determine the meta-rules of the microinteraction in the last step. Meta-rules are higher-level rules that describe how the primary rules of the animated interaction should run or change. Loops are the part that determines how long the microinteraction goes on for, whether it repeats itself and how it changes over time.
A quick example: The animated button “Buy now” placed next to a product turns into “Buy another one” as soon as the user places one unit of the product into the shopping cart.
Humans process visual information 60,000 times faster than plain text. Video content is even better memorised than content that is transmitted via static graphics and images. This is largely due to the emotions that are aroused when watching a video or an animation.
Applied purposefully, microanimations (as well as other motion graphics) are therefore the ideal, user-centred choice for conveying information to the user, building up a positive feeling and thus binding customers to the product.
When a design is good, users intuitively feel how to use an interface and its elements. And when an application is more complex, microanimations quickly help users learn how to operate it.
Good microanimations are most noticeable, however, when they are missing. If they fulfil their purpose, they make handling easier and create positive emotions, but they do not take centre stage.
Click through a selection of examples and ‘feel’ what is missing without microinteractions:
With apps, this positive feeling towards a product can be noticed by the level of trust that a user places in an app. Visual presentation and function have a significant influence on whether I, as a user, decide to enter my credit card information, or whether I uninstall the app immediately after downloading and first opening it.
This ‘app trust’ can be visualised in a pyramid à la Maslow:
It is often overestimated how much trust a user places in an app. In most cases, there is no trust at all (at least not initially). Therefore, we imitate human behaviour and emotions with microanimations to help users build trust towards an app more easily.
Looking specifically at user experience, microinteractions enable the following advantages:
Another benefit of microanimations is provided by Lottie files ». This graphic format enables JSON-based animations with many advantages, because Lottie files:
Microinteractions also offer a number of advantages for branding – in line with the concept of “motion for emotion”:
These benefits serve many marketing areas such as:
Microinteractions greatly enhance digital applications by improving user experience, are easy to implement and even help with marketing a product by building a strong emotional connection between the user and a product.
There is no reason not to and all the more in favour of making greater use of microinteractions in your digital product.
Are you ready to upgrade your application our to be advised on the topic? Contact us » (no commitment!) or directly book an appointment for a free initial consultation ». We look forward to getting to know you and your project idea!
Share this article
Blog
You’d prefer to contact us directly? Of course! Here’s how to reach us:
You’d prefer to contact us directly? Of course! Here’s how to reach us:
Mail: contact@peschke.at
Tel: +43 1 47 07 922
Sure! Directly book a non-binding initial consultation to share your vision and ideas with us – free of charge, of course. We look forward to meeting you!
Book appointment
