History is littered with small, seemingly irrelevant but undoubtedly world-changing inventions. Post-it notes are simply paper that sticks and yet plenty of great novels and screenplays have been plotted with the help of post-it notes. All the zipper does is close things but members of the male gender would no doubt vouch for their usefulness every time nature calls. Buttons and buttonholes also serve similar crucial roles in our daily lives.
Life is full of these small details that we might not always notice they’re there but would no doubt bring catastrophe were they to be removed. In the world of web development, these small details exist in the form of what the industry refer to as micro-interactions. As the name suggest, micro-interactions are interactive features in design that acts as some sort of feedback for the users regarding a certain process.
The basics of micro-interactions
If that definition sounds too complicated, perhaps an example would be more enlightening. I’m sure you’ve used an elevator before and you have no doubt noticed that whenever you press an elevator button, it usually lights up in such a way so that people would know that the elevator has already been summoned to pick them up. Now, imagine if that light doesn’t exist. How would people know that the elevator is already coming or even if it’s working in the first place?
That light that came on is a type of micro-interaction. It works to alert users that yes, the system understands your order and that it is currently in the process of fulfilling that particular order. It’s unassumingly simple but its existence is essential to the operation of the system itself. This example is just one type of micro-interactions, in the world of web development; they can be used for a variety of different functions that indicate different types of action taken by the users.
Micro-interactions in web design
Let’s start with everyone’s favorite video library, YouTube. In YouTube, whenever you decide to like or dislike a video, the appropriate thumbs icon, up for like and down for dislike, would turn blue. That’s a form of micro-interactions. In Google’s homepage, whenever you typed in something into the search box, even if it’s just a single letter, the search engine would show you a suggestion of search terms based on the letter you typed in. That is also a form of micro-interactions.
While there is no definite guideline defining micro-interactions, Dan Saffer , a proponent for the practice of micro-interactions, defines them as being composed of 4 parts. Those 4 parts are triggers, rule, feedback and loops & modes.
- Triggers
The trigger is what started the micro-interaction in the first place. In the YouTube example, it’s when a user clicks on the appropriate thumbs icon and in the Google search example; it’s when a user typed in a letter into the search box. Other times, the trigger could come from the system itself. In an e-mail client for example, a notification, usually a number, would pop up to notify users that there are new unread e-mails in their inbox with the amount of e-mails indicated by the number displayed.
- Rules
Rules are essentially what the developers intended to happen when a micro-interaction is triggered. Liking a video on YouTube would boost its number of likes by 1 and would also include that video to a user’s list of liked videos. Typing something into Google’s search box would display a list of suggested searches and histories. Rules aren’t always permanent. It is possible for example to unlike a video from YouTube that you’ve previously liked and even to dislike it afterwards.
- Feedback
Feedback is the system’s way of expressing that they’ve acknowledged your input and is generally represented in three different forms; visual, audio and haptic. In web design, visual feedback is the one we’re most accustomed to. In the YouTube example, the appropriate thumbs icon turns blue to indicate your opinion on the video. A ringtone that alerts you to phone calls is an example of audio feedback while the clickety-clack sound your keyboard makes when you’re typing is a form of haptic feedback.
- Loops & modes
These two parts refer to the length of the micro-interaction and how it changes over time and/or when certain conditions have changed. Loops in micro-interactions can last as long as the users want to or could be up to the system’s discretion. A liked video on YouTube would stay that way unless the user decides to unlike that video while notifications for unread e-mails would only last so long as the user hasn’t opened that e-mail.
Modes on the other hand refer to how micro-interactions changes when the conditions are different. For example, in YouTube, when you try to a like a video when you’re signed out, you’re instead given a prompt to sign-in instead of the usual feedback. Unlike the other parts of micro-interactions, modes are infrequently used, since it governs how micro-interactions work when the system detects critical but usually infrequent changes in the system.
Why micro-interactions are important
Let me ask you this, why do you think people like playing video games? This is because video games are essentially a constant series of micro-interactions chained together to provide a stream of gratification to the players. People like being acknowledged, which is why it is important for users to receive instant gratification every now and then, something that micro-interactions are designed to do. That instant rush you get when Tinder tells you you’ve got a new match? That’s the power of micro-interactions.