I'm trying to get better at designing software, and I'm noticing more and more that subtle, responsive animations help to make the product feel nice to use.
You don't always consciously notice when an interaction -- tapping a button, swiping a carousel, etc -- responds quickly and naturally, but I think subconsciously the product just feels more responsive when it does.
Here's an example of something that I'm working on with Moon, a recipe bookmarking app. After you've saved a recipe, you can add notes to remind you of what worked, or what to try next.
This used to be jarring. A modal would pop up, you'd fill in the note and then when you hit save, the entire page would reload, resetting your scroll position. The whole thing felt off.
But here's what it looks like now.
There's a few things that happen here that collectively help to make the interaction feel natural. The most important one is that you're now editing the note in-place. You don't get sent off to a different page, or have a form modal appear - where you're typing your note, and where the note ends up is the same place.
Notice the little pop of the note after tapping the "add note" button. And then, on saving, notice how it fades to yellow (a bit like a sticky note, although not quite as vibrant) and kind of springs downwards onto the page - as if it's been pasted onto the page.
Deleting the note also used to refresh the page - but now, it kind of disappears into the distance, there's a tiny little pause, and then everything shifts up to fill the vacuum.
I don't think we quite have the language to truly describe the feeling of really nicely designed microinteractions, or the impact that small details like this can have on software products - but I think it's important if you want to build something that feels truly responsive and nice to use.
