UX Diaries #1: Microinteractions

UI Design

Microinteractions, that cherry on top of the cake, added after your wireframes are in place, when you want to bring just a little more delight and personality to your design.

The first time I fell in love with microinteractions was long before I ever thought about UX. As far as I remember, it was during Duolingo’s early days, with that streak animation and fun characters keeping me hooked on the app. Or maybe it was Facebook's first emojis on Messenger? I still recall that subtle smile when receiving the “infinite hearts” animation from someone special.

Actually, after three years of social media break, I’m still delighted to see how new microinteractions can instantly boost your mood. That, or maybe I’m just a nerdy UX designer, and microinteractions happen to impress me.

As a UX Designer with a cognitive science background, microinteractions weren’t something I studied as coursework in university. Yet I found myself needing to understand them (and create them) while tackling various UX challenges.

In this first diary entry, I want to focus my attention on microinteractions, sharing some real-life product examples that inspire me, along with a few effects I use to create them.

A bit of background

A microinteraction needs to be short in duration, between 200 to 500ms, with the scope of offering users feedback on various actions. In his book Microinteractions, Dan Saffer divides microinteractions in four parts: trigger, rules, feedback, and loops and modes. Below you can see a schematic overview of what each stage means.

1. Each microinteraction starts with a trigger, either initiated by the user (e.g., a click, tap, swipe, or long-press) or automatically by the system (e.g., a notification alert).

2. Rules define what happens after the trigger, this includes the logic, states, and flow of the microinteraction. For example, whether the user gets an animation, an error message, or a toggle change.

3. Feedback is the visible, audible, or tactile response users receive to let them know the system registered their action. It could confirm success, point out an error, or simply signal that something is in progress.

4. The last part, loops and modes, accounts for how a microinteraction adapts over time or context.

Microinteractions I’m learning from

I’ve prepared a list of microinteractions, complete with notes on what I’ve learned so far, so I can share these insights with my team and reuse them in future projects. For each category, you’ll see which microinteractions I like and why they work well.

Splash screens

First impressions are not only valid for real-life encounters, but also for digital products. Adding a memorable microinteraction while opening an app is the best way to make a good impression on new users as well as on recurring ones. This, and changing them regularly, can make a real difference between an ordinary and an extraordinary product.

One example I like is Flink’s splash screen. While waiting for the app to load, a short animation with a lemonade is displayed, followed by a microinteraction with their logo. This works well because it makes waiting enjoyable, but at the same time, it can also trigger a desire for something to drink, increasing the chances of buying from their website.

→ UX win: Reduces perceived waiting time and reinforces brand context

Progress bars

While working at MemoryLab, I designed user flows with the goal of keeping learners motivated and informed on their learning journey. A microinteraction I created together with my colleague during my time there was the lesson status progress bar.

Having a progress bar can be extremely satisfying when completing a tasks, or, as in this case, when finishing your lesson goals. The microinteraction used does exactly that: it celebrates each of the three stages of learning within a lesson. This informs and delights learners about their journey toward mastery while clarifying the memory status of that lesson.

→ UX win: Boosts motivation and reinforces task completion

Button interactions

The simplest form of microinteraction that we can find in every system is the hover, clicking, and disabled effect when interacting with a button.

Revolut makes the interaction with their bottom navigation a delightful experience. The effects used are rather simple, such as rotation and movement, but the result is impactful. This example is a great confirmation that microinteractions don't need to be complex to be well-designed.

→ UX win: Enhances engagement

Error feedback

We’ve learned over time that some microinteractions are indispensable feedback for our daily use of systems. The most useful one, and one that we all use every day, is the Apple password microinteraction.

The shaking effect produced once you incorrectly type your password is a direct feedback signal that you’ve made an error on entering your phone password and should try again. At the same time, we also know that committing that same mistake too many times in a row will lock your phone for quite some time. This simple shaking microinteraction is combined with a tactile experience, your phone lightly vibrates, creating an accessible and complete experience.

→ UX win: Reduces error recovery time and increases clarity

Dynamic loading states

Waiting more than three seconds will make over 40% of users abandon a website if it takes too long to load. This is fair, having no visual indication of how long it takes for a page to load can bring users into a spiral of thoughts, from checking if their network is working to thinking the page might be nonexistent.

A great example of a loading state displayed as a progress bar is the one from Wix. Loading your content on Wix usually requires time, and without a visual indication, users would tend to abandon logging in to their account. What works here is also the addition of small tutorials and tips on the right side of the screen. This can be a great way of distracting users from the waiting time while also offering a visual indication of how much time is left for the website to load.

→ UX win: Reduces frustration and eases perceived wait time

Onboarding microinteractions

I personally skip onboardings. However, some products convince me to give them a try. In order to complete one, the tasks need to be simple and short enough to reduce friction, and the microinteraction after each check, amazing. I also look forward to seeing what creative microinteraction designers thought of to congratulate me once I check all the onboarding tasks.

Mural does a great job in that sense by displaying an emoji after each task is completed, showing progress indicators, and celebrating my small win with a confetti animation.

→ UX win: Reduces error recovery time and increases clarity

Task completion

If I were to rank one winner for the best task completion animation, that would be Duolingo. I might be biased because the excitement also comes from finishing the long lesson, but the microinteraction together with the animation creates one unforgettable experience when using the Duolingo app.

The microinteractions on the finished lesson page work well because they are regularly changed, bringing an element of novelty every now and then to the interface. A great learning from this is that the best way of celebrating users' wins is to add a memorable (perhaps fun) microinteraction at the end.

→ UX win: Increases habit formation and emotional reward

Toasts notifications

Giving users immediate confirmation when performing an action is mandatory to avoid confusion over the changes just made. At times, displaying a static toast to give users confirmation can risk being unseen, especially if the contrast is low, the timing is too short, or users are not focusing on the right spot.

Adding a small microinteraction effect on the toast can redirect users’ attention towards it and make sure the update has not been missed. I’ve seen this pattern used in Quizlet, and it immediately delighted me. The effect is simple, yet purposeful.

→ UX win: Improves feedback visibility and user confidence

System/User feedback (Typing indicators)

We’ve probably all experienced that feeling of waiting for an important reply. Yet, this simple microinteraction was not always there.

These three dots waving in a perfect loop motion give users an important feedback confirmation that, on the other end, someone is interacting with them in real time. This puts them in anticipation of a response and eases (or not) their waiting time. The loop will play until the message is sent.

A more modern example is chatting with AI interfaces. The same microinteraction principle is applied here: the system has received your message and is working on a feedback response. If the waiting time is too long in this case, users will try to reload the page. In any case, it informs them that their message has been received and is being processed.

→ UX win: Improves feedback visibility and user confidence

Conversion optimisers (attention grabbers)

Airbnb applies microinteractions as attention grabbers with the goal of conversion. In this example, the animation is paired with a sense of urgency message: “Rare find! This place is usually booked!”. If a listing has high demand and is usually unavailable, an animated label is triggered to incentivize users to book that accommodation.

A good lesson to learn from this example is that microinteractions can be used to grab users' attention and highlight design elements with the goal of conversion by invoking FOMO.

→ UX win: Increases conversion by directing visual attention

Microinteraction patterns I like

While creating some small animations in Adobe After Effects, I realized that the four most important principles in motion are position, scale, rotation, and transparency, to which we assign different easing curves and twist the motion. While this may sound reductionist (and motion is more complex than I make it sound), behind my favorite microinteraction patterns, you'll actually find these four principles.

For those curious to learn more about motion, here’s a list of patterns I enjoy applying to my UI:

• Fade in/out

• Slide

• Expand

• Flip

• Grow and shrink

• Float (winner)

• Skew (especially for buttons)

  
  

Conclusions

Microinteractions are worth exploring if you want to elevate your design. Getting started can feel intimidating, especially if your background isn’t in design, but it can quickly turn into an immersive work afternoon once you get comfortable with a few simple concepts.