Microanimation Blog | UX/UI Design PESCHKE Wien
Microinteractions: Small but powerful

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

  • Scroll bar
  • Buttons with feedback, e.g. hover states
  • Pull-to-refresh (to reload a page)
  • Swipe animations
  • Pop-ups
  • Skeleton screens (partial loading of a page’s basic structure)
  • „Pinch to zoom“ (scaling digital content with two fingers)
  • Loading screens und loaders
  • Success messages
  • Error messages
  • Dropdowns
  • Progress bars
  • Reactions such as “like”

Structure & process of microinteractions

The function of microinteractions is determined by triggers, rules, feedback and loops & modes:

1. Trigger – initiates the action

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.

2. Rules – set the course

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.

3. Feedback – confirms the action

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.

4. Loops & modes – duration & development of the action

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.

Time for examples

Can you feel the difference?

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:

Microanimation Comparison | UX/UI Design PESCHKE Wien

1.

Microanimation Comparison | UX/UI Design PESCHKE Wien

2.

Microanimation Comparison | UX/UI Design PESCHKE Wien

3.

Previous slide
Next slide

Building trust in apps through 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:

  1. Baseline relevance and trust that needs to be met
  2. Interest and preference over other options/apps
  3. Trust with personal information
  4. Trust with sensitive/financial information
  5. Willingness to commit to an on-going relationship with the app

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.

Pyramide App-Vertrauen | Microinteractions PESCHKE Designstudio Wien
Microinteractions: Advantages in UX design

Looking specifically at user experience, microinteractions enable the following advantages:

  • Instant feedback for the user and their actions
  • Orientation within the application
  • Helps build trust between app and user
  • The user always knows what is happening
  • Aids understanding, especially with complex interfaces
  • Resulting from that: Error prevention (e.g., a setting is successfully saved instead of accidentally terminating the process or making unwanted changes)

Extra info for tech nerds: small file size of .lottie

Another benefit of microanimations is provided by Lottie files ». This graphic format enables JSON-based animations with many advantages, because Lottie files:

  • Can be used on almost any platform, even without code
  • Have a very small file size (only a fraction of GIFs or PNGs), which means they load quickly and do not slow down websites and apps
  • Can be scaled without losing quality, as they are based on mathematical calculations
  • Are easy to implement via HTML or on WordPress using a free plugin
  • Are easy to edit via the Lottie editor and colour palette feature, even for those without experience
.lottie Dateigröße | Microinteractions PESCHKE Designstudio Wien

Microinteractions: Applications in branding

Microinteractions also offer a number of advantages for branding – in line with the concept of “motion for emotion”:

  • Evoke emotions in the user, which positively affect product use
  • Increase the willingness to interact
  • Support telling the brand story and the USP (unique selling point)
  • The product is more likely to remain in the user’s mind

Applications and use

These benefits serve many marketing areas such as:

  • Advertising new product features
  • Communication of brand values
  • E-mail marketing
  • Social media content
  • Presentations
  • Logo animations
Logo Animation | UX/UI Design PESCHKE Wien

Microinteractions are great – but what now?

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!

Back to top Arrow