Subtle animations to improve the user experience

I have just come across the post . I must say that I don't usually take into account animations when building a UI, since the priority is always the layout and I seldom have time to enhance the interface with subtle animations.

After reading the article one starts appreciating those transitions that became a thing when the iPhone went out (maybe . The good thing is that good animations make the interface look smoother and more professional, and it just feels great to use it. However, it is very easy to end up overusing animations and applying them to lots of elements just because it is possible.

If you disable animations, the flow should feel broken; if it is not, this might mean your animations are superfluous. —

On the web, it is sometimes difficult to create proper animations without lots of hacks like duplicating elements and setting fixed dimensions and absolute positioning. And this, together with responsive design, makes it a real challenge.

There are many websites for getting inspired and seeing how animations are used in practice. Many of those sites are listed on .

Practical example

I would like to save a form and give feedback to the user. One possibility is to click on save and then show an on top of the form. However, what should we do when the user starts modifying the form again? One possibility is to remove the alert. Collapsing the alert would reflow the form and would look a bit ugly. Another possibility is to use something like the notifications shown on Gmail on top of the page, fixed positioned.

If the user continues editing and we didn't remove the alert, then when she saves again she doesn't get any feedback about the most recent saving action. Does that alert refer to this save or to the previous one?

Then I thought it would be useful to have the Save button change between Save - Saving - Saved, similar to . A first draft was this:

After that, I found and applied some transitions:

Even though I'm not super happy with the result I think that a button like that with some animation can be very useful when saving data in a form.