The current market is very competitive, with thousands of products that fulfill the same purpose. Microinteractions and animations are the magic things that keep us coming back to the products we love, but you have to use them deliberately.
Microinteractions are rather small and single-purpose focused events that occur within apps. The ideal microinteraction helps the user to accomplish a task in the most delightful way and then — interpret the results.
Why should we create Microinteractions?
Microinteractions, as we mentioned in the intro, are catching our attention and make us want to use the product constantly. They’re the satisfying little details that happen when we perform a single task. They humanize products and make them more enjoyable. Still, many web developers and designers still ask such a question. They don’t understand that ignoring microinteractions may cost their clients a lot. Attention to detail is what differs an exceptional website from an ordinary one. You may ask, but what are the pros of it?
- Accomplishing a single task more easily
- Enhancing navigation
- Making it easier for users to interact with a piece of data
- Viewing or creating a small piece of content, such as a status message or update
- Directing user’s attention to a particular element
- Offering recommendations to customers
- Controlling a process through constant feedback
- And, finally, they just make your app or site more emotional
So, what’s the anatomy of microinteraction?
1. Trigger — starts interaction, should be rather visible and prominent, depending on how important the action is.
2. Rules — they determine how interaction acts after initiating it, how and if it’s animated, and so on.
3. Feedback — gives user information whether action s/he performed was completed successfully.
4. Loops & Modes — they decide how animation acts over time — is animation different for the first time? What happens if you hold the button (trigger)?
What are the most known microinteractions that we all know?
We can see MI in almost every app. Apple is doing great at this. Just launch a random Apple native app and I bet you will get some of the microinteractions.
That subtle bell animation combined with little vibration when you switch your iPhone to Silent Mode (sometimes I did it just to see that great bell swing — great job there, Apple!).
While you press the Like emoji in Messenger for too long, it starts vibrating, and the animation shows you this: “ONE SEC LONGER AND I WILL POP!” — then just a “Poof” sound appears and it looks like nothing happened.
The next one, one of the most common microinteractions, is when you swipe your finger over the alphabet in the contact book. You see what current letter you are browsing, combined with zoom effect and vibration. It gives you this really nice feeling of browsing through pages like in a normal book.
The last example (in this article, because there is an infinite list of common interactions) — the click when you turn something on and off. Confetti while you complete one of your tasks in the app. A trophy or achievement.
Mobile games are packed with microinteractions. You see them on every page, every task, every move you do, it’s all interactions. They encourage
you to do more, more and more. Just to stay in the app a little bit longer 😉
What’s the relationship between animations and microinteractions?
Let’s get one thing clear: animations and microinteractions aren’t the same things. Microinteractions are small functionalities that serve one purpose only, while animations are useful add-ons that complement the interactions.
An animation can be as simple as the coloring of a thin bar that indicates progress on a task, or display of a side menu after the burger menu icon is clicked on. The point is that these micro-animations are there to make the microinteractions intuitive and to help them convey their function to the user.
Sometimes you see a Dribbble shot with so many animations — everything is moving and sliding so easily. Unfortunately, it’s wrong. Sophie Paxton wrote a really important sentence in her article:
“Animation is like cursing. If you overuse it, it loses all its impact.”
And that’s true. Probably if you’re into animation, you know very well the basic principles of animation by Disney. It’s great, but only in the case of animation. If you use it in the app, it really slows the user down.
So how can I apply animations or microinteractions to my app and website?
It all depends on what kind of application or website you have. What do you want to achieve with that? What is your main audience?
For example, if you’re making an app for children, try to focus a little bit more on animations and interactions, make really cute animated onboarding, try to award them with microinteractions for every completed task, etc. Things look different when you’re making an app for a more adult audience. Animated onboarding? Sure, but it should be subtle and non-distractive, including your microinteractions.
Protip: Having too many microinteractions can lead to the user being distracted or losing sight of the real function of the app.
In iteo we’re trying to stick some of the simple principles that we worked out with time:
- Think of the benefit that animation can bring to you instead of “it’s cool”.
- Keep animation duration at or under 400ms.
- Linear animation is boring, mechanical and looks robotic. Avoid that.
- Give your animation a simple Easy In or Easy Out. You can even combine these two and add Easy In and Out.
- Spring and bounce are okay. But only when it’s really needed. If your animation doesn’t require it, skip it.
And finally, which tool should I use?
The variety of programs you can use is very wide, but based on how simple or complex you want them to be, there are different tools.
If you’re familiar with coding:
Mobile: Xcode, Android Studio
Mobile or Web: Framer
Web: CSS animation
If you want to create more detailed Interactions with simple drag and drop options:
Principle, Adobe Xd, Origami Studio, and Protopie
If you want to create detailed interactions + animations:
After Effects
In my opinion, the best one is After Effects. Why? Because the only thing that limits you with it is your creativity. It’s a really powerful tool that requires a lot of work and learning but when it “clicks”, everything changes.
After Effects also has one powerful extension. Which is Lottie (we’ve mentioned it in one of our articles about animations — check it out!).
Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. You can use Lotties on basically any platform: web or mobile. This means you can integrate them seamlessly into both apps and web pages. Lottie animations can even be used as stickers on messaging platforms. It isn’t technically limited to web and mobile. You could use it on desktop apps as well as some watches. Also, the size is super small.
The wrap-up
Go ahead and observe the little things in all the apps you use frequently. You’ll start to understand that these interactions are everywhere and yet are so easy to overlook. You’ll notice that micro-animations can spice up any app, and guide the user to where the action is.
And if you would like to cooperate with a seasoned team of designers that know all about microinteractions, animations, illustrations and more functional and pixel-perfect solutions — contact us. We will create an extraordinary product just for you.
