Micro-Interactions: a designer’s superpower
Why micro-interactions have become an essential part of great products.
A few weeks ago, after a lot of persuading from his friends and kids, my not so tech-savvy grandad joined Facebook. Finally. As I was teaching him setting up the profile, creating posts, & following pages, he came across one of the funny memes floating around and somehow stumbled upon the famous LIKE button. He hovered over the like button, 6 emojis popped up, & he clicked on the HAHA smiley which left him in awe of the tiny animation. This is how powerful a micro-interaction can be for a product or an app.
We as consumers, see and interact with these micro-interactions on a daily basis even without knowing. A ‘Like’ button is one of the simplest examples. Few others are:
- A simple scroll bar that appears as you scroll the mouse
- Swiping left to clear a notification on your iPhone home screen
- Ability to see that the other person is ‘typing’ on messaging apps
- A progress bar indicating the download percentage
- Pull to refresh, to reload the content on the screen of an app
- Interactive error pages like the dinosaur game on google chrome and
Clapping for a Medium article are a few of the most commonly encountered micro-interactions. So, why are these very effective? why does every app have them?
What are Micro-Interactions?
Micro-Interactions are like any other interactions with devices, which are used to communicate meaningful feedback to the users because a user has to constantly know what happens when an action is performed. It’s a human tendency to expect something to happen when you click a button, scroll a page, add an item to the cart, left swipe a card.
This is usually achieved by providing the status of the system (Nielsen’s Heuristics) or helping users to avoid common errors. A red border, with an error message, is a micro-interaction that appears when you do not fill a required form field.
👉 🆕 Get 3 months free of your yearly Interaction Design Foundation membership by clicking the link below. It has access to hundreds of UX, Visual Design and Research courses that will help you grow as a designer. It has helped me elevate my skills in so many ways.
So, why do companies use these micro-interactions?
To better understand these, here are a few successful examples of mobile apps using interactions for a variety of purposes.
Swipe Gestures
These types of interactions are used to save space on mobile by hiding a few action items using gestures. For example, you can see that a left swipe will delete an email and a right swipe will archive an email. Similarly, dismissing/clearing a notification on the lock screen.
Quick Actions
A simple example of quick action is a 3D touch on apple devices when you tap and hold an app icon, it presents you with contextual action items which are most frequently used by the users. This saves clicks and time. For example, Instagram presents actions like camera, New Post, Activity, etc.,
Communicating Information
These types of interactions breakdown the complicated information, & use visuals, animations to convey the message easily to the consumers. A perfect example of this is to explain the interest charges on your credit card. It’s a sensitive topic and Apple Card once again wins the customers by using a circular interactive animation to inform the user about the minimum and maximum charges.
Interactive Engagement
Sometimes, you want the user to interact with the interface by surprising them. This surprise combined with actions is more powerful. Robinhood App recently released a debit card with a waitlist of over a million people. To move your spot up in the waitlist, the users can go to their app and tap on the card (maximum of 60 times). This is a fun way of making users interact with the app.
Providing Feedback
Motion can be effectively used to send feedback to the user after they have triggered something or entered something. Error states and Success states are examples for these and here is an example of correct and incorrect password entries for a mobile app.
Teaching the interface to the user
Whenever a new product or an app is launched with a fancy feature, it will fail if the user finds it too difficult to understand. So, at times like these, apps can leverage micro-interactions to teach the user about the functionality. For example, the N26 Fintech App used animation to show how a user can move money from one savings bucket to another.
Directing User’s Attention
When most of the space in the mobile screens are filled with information, it is tough to highlight a particular feature which we want the user to notice. Micro-Interactions can play a vital role in bringing delight to the user by the use of animation and transition effects. For example, on Slack, before you start typing the send button is grayed out and once you have started typing, it turns blue indicating to the user that it is the call to action button.
Making Loading Screens Interesting
Most loading screens are boring. Let’s accept that. But micro-interactions and animations can turn them into very interesting stuff. Google leverages this space to create wonderful intuitive experiences for its users whenever there is a wait time during loading or setup. Here is an example:
These are just a few of the examples and the applications of these micro-interactions are unlimited. But, one should remember that these should be used in a subtle way not to overwhelm the user. When designing always put yourselves in the shoes of the customers and also, functional animation should be a priority over visual animation. Hope this article gave you an idea of why micro-interactions are powerful and how they can improve the overall experience of a product.
Tools to create Micro-Interactions:
There are tons of tools in the market to create these simple transition effects and use them in your app. 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
