Microinteractions are worth mentioning as one of the major factors in giving a delightful user experience. They are the tiny-but-mighty hero behind your pleasant cyber explorations.
As humans and the internet are now inseparable, you may have seen microinteractions many times without realizing it.
You can find microinteractions everywhere. They’re on websites, online games, social media, e-commerce, and other mobile apps.
As it says “micro,” it’s understandable if some users can barely recognize them.
But, for web designers and developers, microinteractions are a big deal. A website or an app will turn dull without them.
Regardless of their small and seamless existence, microinteractions are vital for building a good user experience.
We’ve gathered the essentials about microinteractions, including some great examples.
What are Microinteractions?
As the name suggests, microinteractions are small moments where designs come to interact with users.
Microinteractions preferably come in the form of simple animations, text, or sound, which intend to give feedback and display changes or information.
The main missions of it are to delight users and make their interactions more worthwhile.
That’s why microinteractions are fundamental and powerful to improve user experience when using applications or browsing websites.
As we’re on the phone most of the time, scrolling through social media, browsing websites, and using applications, there’s no way we never bump into microinteractions.
If you still wonder what microinteractions look like, below is one of the good examples before we delve deeper on this topic.
Cart Icon Loader Animation by Mateusz Nieckarz on Dribbble
The microinteraction by Mateusz Nieckarz above is an example of a loading microinteraction suitable for e-commerce websites or apps. We’ll give you more amazing examples later in this article.
7 Types of Microinteractions
As you’ve read the definition and seen the example, let’s now discuss the types of microinteractions.
There are many types of microinteractions. When to use one always depends on your purpose and case.
We’ve gathered some of them.
1. Tap or Click
You may have seen a button that can move when you hover on it on a website. That kind of microinteraction aims to tell visitors that the button is clickable.
In many cases, tap or click microinteractions intend to drive action and conversion.
2. Hold Effects
Hold microinteractions are the best option for dropdown menus. It’s most suitable for mobile apps since they perform in limited screen space.
For example, you can tap and hold the like button to bring out more reactions to a Facebook post.
3. Slide or Swipe Effects
Slide or swipe microinteractions are best to pinpoint navigation or movement.
For example, you can see the swipe simple animation in Instagram stories and slide microinteractions in a dating app.
4. Scroll-into-view
Scroll-into-view microinteractions intend to give more explanations, information, or options on a topic. This type of microinteractions is best for mobile apps.
5. Pull-to-refresh
Sometimes you need to pull your smartphone screen to refresh a page.
When you do that, you can add microinteractions, such as loading animations, to make the waiting less boring.
6. Progress Bars
A progress bar usually comes to show the progress of something. You can easily find progress bars when uploading or downloading a file and submitting a form on a page.
7. Error Sounds
Error sounds primarily help users avoid mistakes when performing an action on a page. Sometimes, an error sound also plays a role as a notification to the users.
4 Reasons Why Microinteractions Are Important
While developing a website or app, minding about the microinteractions is vital to give users a wonderful cyber surfing experience.
There are more fundamental reasons why microinteractions are essential to web or app developers, which follows:
1. Make the Interface More User Friendly
Microinteractions can make the interface more user-friendly with visual or audio feedback for every action they take.
Microinteractions can also guide users to take the next step without getting confused easily.
2. Create a More Delightful Experience
As microinteractions escort users during their interface time, they will experience a smooth web surfing experience.
When users have a delightful browsing experience, it can increase web engagement, gather visitors, and build loyal users.
3. Make the Interface More Human
Microinteractions also intend to make the interaction two-way so that users don’t feel completely communicating with machines.
Users won’t feel alone during their interface, including during loading, filling forms, or waiting for progress.
4. Prevent Users Make Errors
One of the most valuable advantages of microinteractions is to prevent users from making errors. Like when confirming a new password or filling out a tangible form.
When users make a mistake or error, microinteractions will give feedback so that users can fix it immediately.
Microinteractions Model
The author of the book: Microinteractions: Designing with Details, Dan Saffer, states that it have four structures, which are: trigger, rules, feedback, loops, and modes.
The statements by Dan Saffer become the standard theory of microinteractions structures. Let’s break down each of them.
Image via Medium
1. Trigger
The trigger initiates the microinteraction to happen. For example, when you type a password before logging into your email account.
2. Rules
Rules refer to what happens after the trigger. Continuing the example previously, the system and database will check your password.
3. Feedback
Feedback is like the verification phase. Whether you pass or fail the verification, you’ll get feedback.
If you get your password wrong, you’ll get a notification. But, you’ll pass if you type the correct password.
4. Loops and Modes
Loops and modes are the last phases where the final decision happens. If the system requires the microinteraction to keep repeating, then it will loop.
On the other hand, modes have the control whenever the microinteraction doesn’t need to be repeated.
Common Uses of Microinteractions
Microinteractions are familiar to certain uses, such as data inputting, downloading, uploading, showing CTA, and showing notifications.
Some of the common uses of microinteractions in a web or app are:
1. Swiping and Scrolling
Swiping and scrolling are the most common gestures for microinteractions. They’re easy and intuitive for users without requiring them to think of the next actions.
Users can swipe to the left and right to unlock more chapters and scroll up and down to read more information.
2. Typing
A typing microinteraction can engage users to keep the window open while communicating with others. This type of microinteraction is mundane in a chatting app or website chatbot.
For example, you can notice if someone is typing a reply to your message on WhatsApp.
In addition, social media platforms like Instagram also have this microinteraction for their Direct Message (DM) feature.
3. Downloading
Microinteractions are also helpful during a downloading process as users can see the progress and estimated time. They can also spot if the download is progressing or not.
Microinteractions for a downloading process can also help them notice if an error occurs. Users can repeat the process or take other actions immediately.
4. Data Input
Data input is a significant process, primarily if you need to type private data to create an account and submit a password.
Microinteractions can help in many ways for data input, such as stressing certain obligatory columns, showing form filling progress, and notifying the password usage and strength level.
5. Highlighting Current System Status
Users need real-time information about the current status of the action that they take.
For example, when you’re uploading a document or a picture, microinteractions can inform the current progress.
It should inform whether the file is successfully uploaded or not. It may also include why you fail to upload a file, such as the size or format doesn’t meet the requirement.
6. Making Tutorials More Powerful
Some apps provide a tutorial for new users, and microinteractions can play a big part in it.
Microinteractions help to highlight features or simplify essential processes of an app.
Implementing microinteractions in tutorials or app demos will help users, especially newcomers, use the app.
Moreover, it can improve their satisfaction level and build a delightful experience.
7. Showing Call-to-Actions
For businesses, having microinteractions on their websites is worthy of supporting their marketing effort. It can help highlight call-to-actions to convert visitors faster.
In addition, it can make the CTA more appealing and enticing to viewers.
It can be in the form of movement or animation so that the CTA is beyond words.
8.Showing Notification
People check notifications on their phones every two minutes, so having an eye-catching notification can improve the user experience.
Microinteractions can come in the form of visual or audio.
Almost all social media and e-commerce apps give pop-up notifications to their users whenever there are new updates.
Furthermore, microinteractions can also help to provide a notification when connecting a device.
Adjusting microinteractions, like animation, movements, or sound, make the notification more attractive and noticeable for users.
How to Create Good Microinteractions
The next question is, ‘how to develop good microinteractions for your website or app?’
Microinteractions must be attractive but, importantly, must stay to their function to assist and help users throughout their interface time.
Before creating microinteractions, consider some essential points below.
Create Sweet and Simple Design
When creating microinteractions, keep in mind that less is more.
Create simple designs that captivate users. Avoid heavy designs as they can be annoying.
As the name implies, microinteractions tend to be small.
So, place them in strategic places as long as they don’t cover or overlap other vital buttons or information.
Make Them Functional
Other than having captivating looks, microinteractions must be functional. They must do their job well, that is, to assist users during their interface.
Microinteractions should make users easily progress on a page or help them navigate to take the next actions.
However, some of them only intend to accompany users, such as when loading is in progress.
Users will only see a loading animation that will end when the page is successfully loaded.
Follow the Model
As mentioned previously, good microinteractions at least follow the model proposed by Dan Saffer.
Web designers and developers should implement all elements; triggers, rules, feedback, and loops and modes to their microinteractions to make them work wonders.
I should be able to give instant, relevant feedback or other information needed by users.
Also, having a flawless microinteraction will help your page be more “human.”
Do Tests and Experiments
Testing microinteractions is vital to make sure everything is according to plan. This stage will also help you avoid errors.
When your microinteractions successfully pass the test and experiment stage, you’ll have flawless animation to satisfy your visitors or users.
Then, what makes a microinteraction good? To conclude all the points above, a microinteraction is good when it is:
- Simple yet appealing
- Consistent
- Have a specific purpose
- Can improve user experience
Examples of Good Microinteractions
Now, we’re down to see some good examples of interactions created by web developers and designers. Let’s jump right in!
1. Notification Microinteraction
Notification Microinteraction by Paarth Desai on Dribbble
We start with a notification microinteraction by Paarth Desai. He created a simple masterpiece, yet very interesting to discuss.
Regardless of its simple visual, Paarth Desai emphasizes the implementation of an enticing and flawless motion.
He creates detailed movements of the red dots that circle the bell, and the bell shakes when the dot reaches it.
The microinteraction not only functions as notifications but also entertains users with a light demeanor that is far from disturbing.
2. Paint – Mobile App
Paint – Mobile App. Animation & Design. by Outcrowd on Dribbble
The animation and microinteraction for a paint mobile app by Outcrowd is also a chef-kiss. You can clearly see how they use such eye-grabber animations to delight users.
Moreover, they add swiping microinteraction for the checkout process to make everything easier for users. In addition, Outcrowd uses Adobe After Effect to create the animations.
3. Loading Microinteraction
Loader Ball with Physical Interaction – Pedro Aquino
The loading microinteraction by Pedro Aquino is also awesome with its unique designs. The animation is the perfect definition of ‘less is more.’
Pedro emphasizes the process using rollercoaster-like animation with a touch of moving balls. He adds colors with similar tones which give simple yet satisfying looks.
Pedro also creates the animation using Adobe After Effect.
4. Flight Finder App
Flight Finder App -Mauricio Bucardo
Another interesting simple animation was a work by Mauricio Bucardo. He creates a microinteraction for a flight finder app.
Mauricio Bucardo pours his creativity into creating a wonderful microinteraction that represents its function. The clickable button doesn’t only function as a searching tool.
The loading microinteraction following after that is what makes it even more attractive. Using a passing plane as a loading icon is such an expensive idea, isn’t it?
5. Floating Action Button
Floating Action Button Interaction – Mauricio Bucardo
Another Mauricio Bucardo worth-mentioning work is the floating action button he creates for Y Media labs. We can see how he transfers a single button into more functional options.
The ‘send’ icon at the beginning has more interaction when clicked. More options will float to help users specify their actions.
With simple looks and seamless motions, the microinteraction is captivating and helpful for users.
The Takeaway
Regardless of their small and seamless existence on a web, microinteractions can bring significant benefits if implemented correctly on a website or in an app.
Websites and apps with good microinteractions will drive more traffic and engage users better.
The above explanations may come in handy for future web developers and designers or those who want to work within the landscape.
Moreover, business owners and startup companies should also understand the importance of microinteractions to support their websites’ and apps’ performance.
Lastly, you may need beyond skills to create excellent microinteractions, which people refer to as creativity.
