What is a Micro-Interaction?

A micro interaction is a small functional automation or visual Q that often happens when a user engages with a product if the user interface is a body of enough micro interactions work as a sort of nervous system they often provide subtle feedback that makes the experience feel more alive and responsive for the user so think of it as a macro interaction is buying a shirt whilst the micro interaction is the satisfying click or the item added animation that happens when you press the button.

According to author Dan Saffer, there are four components to a micro interaction and those are:

1. Trigger - this is the spark that starts the micro interaction so clicking a button or receiving a notification
2. Rules - this is what happens when the trigger is pressed so for example Youtube will check if you're logged in before allowing the like button to be pressed
3. Feedback – this is what the user sees here or feels so when you like an Instagram post a red heart will appear to symbolise that you've liked that
4. Loops & Modes: this is how the interaction changes over time so if you press that red heart of the Instagram post you like it will go back to a white heart to show that you've unliked it

Examples of Micro-interaction & Microcopy

For my research I looked at different micro-interactions & Microcopy examples and wrote what they were

Call to Action

A call to action (CTA) button is a clear, noticeable button that encourages users to do something specific, like sign up, learn more, or make a purchase. It helps guide users to the next step, turning interest into action.

I feel this is a must for this project, as call to action buttons are very common in digital products

Toggle

An element that switches a setting or feature between two states, typically "on" and "off," much like a physical light switch, providing immediate feedback through visual changes (like colour or position) to show its current state

This would be used typical to change an app from light mode or dark mode, and is seen a lot through mobile user interfaces

original-b0529f6bba7d1450d706e15d463dd0a2.mp4

Navigational transitions

Navigational transitions are movements between states in an app, such as from a high-level view to a detailed view.

This is a more subtle micro-interaction and would be best used when changing screens

mio-staging_mio-design_1579302979877_assets_0B8wSqcLwbhFudWM2QkJidjVucU0_hierarchicaltransitions-reply-1a.mp4

Loading animation

A loading animation is a small visual indicator, like a spinner or progress bar, that appears while a system is loading or processing something. It reassures users that the system is working, helps reduce frustration, and makes waiting feel shorter and less disruptive.

I often do this to add realism to my prototypes, so I’ll probably make one here as well, I found a good video on video game loading screens by Nakeyjakey which helped me learn about more fun loading screens and what boring ones look like

Screen Recording 2026-02-06 at 12.32.25.mov

https://www.youtube.com/watch?v=RSV4rHCPJ0M&t=7s

Notifications

a dynamic, visual effect that replaces static alerts with moving, personalised, or themed graphics when an alert arrives, such as raining hearts, snowflakes, or animated app icons on a smartphone screen.

I don’t know how I’d implement this into this project, nor I’m I interested in doing such, but maybe if there were built in notifications in the app, I’d work on it