A picture speaks a thousand words, or so they say. Well, a piece of animation may or may not comprise a thousand pictures, but it does have the potential to greatly enhance a users experience of a website or digital product.
First of all, what constitutes a micro animation? Well, essentially the term has come to mean a little bit of movement within a user interface that (hopefully) helps to convey meaning and guides the user through the tasks before them.
In this context, micro animations are quite functional elements. They may be triggered by a certain user action, and they provide a valuable bit of feedback. Perhaps the most simple instance of this within a mobile app would be that after the tap of a button or link, new content slides into view rather than suddenly appearing.
That kind of simple movement is very much a given these days though. In fact, there is now a myriad of examples out there of inventive and often quite subtle animation details which support user interactions.
For instance, on an e-commerce site, the use of animation might provide a quick visual connection between an add to basket button and the basket icon itself, putting the user at ease that the product they want to buy has been ‘physically’ put there.
Another interesting example is when animation combines with an illusion of depth or 3D space, such as when content that forms a sequence is delivered on cards stacked one above another. As the user moves through the sequence a new card comes to the front.
In fact, many of the animation details that we see and experience in digital apps share a common purpose - to bring what is essentially an imaginary and virtual thing to life. To make an app feel like a real tactile product is perhaps the holy grail for UI designers, and clever pieces of movement can definitely achieve that.
Effective and clever animations actually go fairly unnoticed. You are probably far more likely to notice when there is a total absence of micro animations (or micro interactions as they may also be called), especially in a device based app. Suddenly the interface will feel a little lifeless. Not nearly so much fun, or as intuitive to use.
This becomes especially critical when the user has initiated an action that then requires them to wait while the system works it out. Failing to update your user on the progress of a more complicated process can be a disaster. A progress animation could just be a simple and functional loading bar, or perhaps an opportunity to be more creative with a charming animation that sets user expectations and amuses them while they wait.
I think this hints at another branch of micro animation worth mentioning. The kind that is less functional and more just plain fun. I’m thinking of examples that take advantage of animation’s inherent potential to not simply inform users, but to delight them, to make them smile.
Gecko took the opportunity to be playful with some animated details when developing a nursery website recently. We introduced little pieces of incidental movement, such as a swing or a seesaw or a toy car, that have no functional value but really bring charm and sense of joy to the content.
The thing to remember when adding animation like this is that it should be done with care and a degree of restraint. Little pieces of motion should not be annoying, or distracting. The placement and staging need to be considered and refined. Make ‘em smile, don’t make ‘em curse.
There is a slightly mind-bending variety of methods by which to bring small pockets of animation to a digital screen. CSS keyframes, Canvas, SMIL, various Javascript libraries, the list goes on and on and I don’t want to suddenly get all technical. Where’s the joy in that?
Right now I’m having fun getting to grips with Adobe XD, a tool for prototyping digital experiences, which has some really neat and nifty animation features built in.
Let’s just say that where there is a will to animate, there is a way, and the benefits that users feel when it’s done right make it well worth the effort.
- Mark