A little surprise, subtle unexpected movement sometimes without anyone even noticing can go a long way. It can leave the user with a happy feeling bringing them back to your app/service. Being it consciously or not at all.

It can guide the user, help them with a task or just explain a difficult step in the process. It can provide error prevention or just simply help with branding.

Using animation in UX design is a proven way to take your UX design to the next level.

You probably see animations in the wild more than you’ve noticed. It’s often used in such a way you won’t notice it at first, but without it the experience won’t feel nearly as immersive

Probably one of the most seen micro-interactions is when you like a post on facebook. When hovering the like button (or pressing it long on mobile) a wider range of ‘emotions’ appears. Each with their own characteristic animations to strengthen the emotion.

But in the world of UX it can also be much more ‘invisible’ to the conscious mind. For example opening a menu on a mobile website, it can really help the user to understand what just happened based on showing the direction the menu overlay came from. Especially when going deeper into the menu with multiple levels.

Micro-interactions are like any other interactions with devices. It’s meant to communicate meaningful feedback to the user to help them understand when an action is performed. For example, imagine you’re browsing your favourite webshop. You apply some filters on the listpage and a loading icon appears, but it’s not moving at all. You would probably assume something went wrong, right? You might refresh the page or just leave the website completely. While there might not be something wrong at all, the icon is just not moving. If the icon would be animated, you would probably be much more patient and likely to wait a few more seconds. If instead of a regular spinner a more fun and maybe even interactive animation would appear, the bounce margin could be even more reduced. And as an added bonus, it might even leave your user with a happy feeling. Making them more likely to return to your page or app.

From a developer perspective it can be hard to justify the time needed to implement extra features like an animated icon on hover or a full page transition on a webpage. So as a designer, it’s your job to convince the stakeholders why it’s important to implement these kinds of extra’s. Nowadays there are lots of solutions to make the life of a developer easier. For example, using AirBnB’s LottieJS framework can save a lot of time by making After Effects animations available on web pages and apps.

It is safe to say that micro-interactions are a powerful way to truly bring your website or app to the next level. If used correctly — don’t overdo it — they can increase your conversion by a large amount and (maybe most importantly) will leave your user with a smile. Making it much more likely they’ll return.

— Here on Medium there’s some great micro interactions implemented. Try clicking the clap icon a few times ;)

Further reading:
Microinteractions in User Experience — Nielsen Norman Group

https://www.nngroup.com/articles/microinteractions/

My name is Dillen Verschoor, I’m a visual experience designer at gracious, a full service digital agency based in The Hague, The Netherlands. I have a strong heart for UX and love to implement motion my designs to make them come to life.

Here’s some examples;
https://dribbble.com/DillenVerschoor