Optimizing Microinteractions

To me, the tiniest things can make a small difference in how your app feels. Combining these small changes can make a big difference in how your app feels. Here are some examples of how you can optimize microinteractions.

Scale down buttons on press

Which ones feels like it was pressed?

The left button does nothing on press. It can be hard for the user to tell if it was pressed or not. The right one scales down, a small, subtle change that makes the button feel more responsive.

Don’t animate from scale(0)

Elements that animate from scale(0) can feel like they come from nowhere. Animating from a higher scale like 0.9 or 0.97 can make them feel more elegant and less jarring.

I'm using an initial scale of 0.93 on the right.

scale(0) feels wrong because it looks like the element comes out of nowhere. scale(0.93) feels more natural because it resembles the real world more; the item is always there, it never truly disappears even when it’s collapsed into the button.

Ease-in vs ease-out

The right easing can make a difference in whether an animation feels snappy or slow.

Left eases in, right eases out. Both are set to 200ms

Notice how the right one feels snappier and more responsive than the left one even though they both take the same amount of time to complete.

Know when to animate (and when not to)

Animate interactions that allows the user to glean useful information from the nature of the movement. For example, a menu that expands from and collapses into the side of the screen can help create a model in the user’s mind that the menu “lives” on that side of the screen. When they want to access it again, the location will be reinforced by how the panel menu appeared last time.

Home

Open both menus. Only the sliding one tells you where it lives.

On the other hand, don’t animate interactions that don’t benefit from the added information or that happen dozens of times a day. For example, I open Raycast countless times a day, and I’d be really annoyed if it animated every time I opened it or switched between menu items.

Would you prefer animations or no animations if you used this dozens of times a day?

The animated one looks “elegant” for the first few times you use it, but imagine using it dozens of times a day. It starts to feel like lag. That’s why I can’t use Spotlight anymore. Notice how the selection lags behind the cursor.

Don’t delay subsequent tooltips

Tooltips appear after a delay to avoid accidental activation. However, if the user has already activated a tooltip, it feels better to activate subsequent tooltips immediately.

When a user activates a tooltip, they’ve already indicated that they need more information, and it makes sense that they’d need it for the whole menu. By activating the next tooltip immediately, we’re saving them time.

It’s tiny things like this that can add up over time to make a big difference in how your app feels. If even the smallest interactions make your app feel sluggish, no amount of backend optimization will make it feel faster.