Microinteractions: boosting engagement

Learn how to use microinteractions to make the user experience truly addictive — we share how to take your design to the next level.

Microinteractions are often the unsung heroes of great mobile UX design. As a user, we don’t always realize when a microinteraction has taken place but at an unconscious level we do appreciate it!

Prototype awesome interactive web and mobile apps with Justinmind! Download free.

Be it a little heart that pulsates when pressed or a thumbs up icon that turns blue after it’s selected — these little details make a great difference in the user’s experience using your app. It’s no wonder Instagram and Facebook have those two examples of microinteractions embedded in their brand identity.

These tiny interactions have the power to make the user feel delight, as if the product itself is constantly engaging the user. They can make your product more fun, practical and intuitive.

What are microinteractions?

In technical terms, microinteractions are defined as moments that relate to a single-use action — every time you click on something with a single function you are engaging in a microinteraction.

Everyone is used to these tiny interactions. So much so, that we can often overlook them altogether. But the thing about these small interactions is that they are meant to mean something, even in a very subtle way. They can be designed to let the user know that the login is in progress, that you can easily find that one post later in your saved articles, that you have successfully turned off that terrible sound (also known as the alarm clock).

Many designers love to implement microinteractions as a way to make the product more engaging, to make the communication between human and machine smoother. But it’s not exactly a walk in the park — because these interactions are so small it can be challenging to identify opportunities for them in your design.

Elements of microinteractions

Any microinteraction is made up of four different elements, according to Dan Staffer — author of the book “Microinteractions”. They are: trigger, rules, feedback and loops.

The trigger is the starting point of the microinteraction, allowing the user to engage should the user so desire. The trigger can be just about any button or icon on which the user can hover or click.

The rules stipulate what happens once the microinteraction is triggered. The important thing about the rules is that they must be logical to the user — no user likes an app that seems random in its logic. If you design an icon as a microinteraction, make sure that icon delivers on what it promises.

Feedback is a way for the app to tell the user it’s working, or that it’s doing something. These can include all sorts of cool interactions, like a slight change in color or a small movement of the button once it’s clicked. One of our favorite examples is the clap button on Medium. As soon as you hover the mouse over it, you can see the blog color radiating from it — it’s almost calling you to click on it!

Loops are a way for the designer to determine how long any given microinteraction lasts, or to possibly define that the microinteraction will change in the future.

Types of microinteractions

Now that we know what makes up any given microinteraction, let’s take a look at the classic types or purposes of microinteractions found on just about any app out there.

• Controlling a process through constant feedback
• Offering recommendations to customers
• 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 users’ attention to a particular element

What’s the relationship between animations and microinteractions?

Let’s get one thing clear: animations and microinteractions aren’t the exact same thing. Microinteractions are small functionalities that serve one purpose only, while animations are useful add-ons that complement the interactions.

These tiny animations, also known as micro-animations, are a great way to convey a message without saying anything at all. These animations can be as simple as a coloring of a thin bar that indicates progress on a task, or display of a side menu after the hamburger 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.

But there’s a margin between what is a stiff and unmoving app, and a sea of animations that completely outshine the real value the app offers its users.

Having too many micro-animations can lead to the user being distracted or losing sight of the real function of the app. Smartphones have been getting bigger and bigger, but their screen is still very small in comparison to any computer — which means your brief animated interactions must be planned with care.

It was beautifully explained by Sophie Paxton in her post: “Your UI isn’t a Disney Movie”. What Sophie wanted you to take away from her post is that animations should never be on the screen for the sake of making your app beautiful — always favor functionality above pure aesthetics.

UX benefits of having microinteractions

“That’s all well and good. But if microinteractions are complicated and difficult to design, why should I bother?” We get that logic. Nothing that requires care, time and effort should be done just because. It’s a good thing that these small interactions don’t fit in that category of useless, difficult tasks.

Here’s why designers tend to love them. They are so engaging. Yes, they’re just details but it’s the details that make a truly unforgettable app. They have the power to keep the user tuned in to the product, even if it is just to let the them know that something is happening.

Microinteractions and Heuristics of Usability

Let’s take a step back and think about Nielsen’s UI heuristics. These are the classic rules that web products ought to follow for good usability — and microinteractions in mobile apps fit nicely in this framework. They are a helpful tool in order to ensure these heuristics are respected in your app when implemented in the right moments. Logically, these brief interactions alone won’t guarantee a perfect UI, but they are an even road towards improvement.

Take the example of a simple situation in which your product is loading data: blank screen or progress bar? Nielsen would definitely say progress bar — visibility of system status is crucial so users don’t get frustrated or confused.

Another crucial heuristic in which microinteractions can come in handy is user control and freedom. Your product will most likely present the user with all sorts of possibilities — but you need to ensure the user is in control to undo and erase any action done in the interface.

A classic example is whenever a user chooses to delete an email and is asked by the interface if he’s sure that is what he wants. That simple popup with a button that reads “cancel” is a microinteraction — and it gives the user a great deal of control over the product.

Think about error prevention. A simple microinteraction might just save the user from making a mistake that would require fixing in the future. This saves the user from that feeling of frustration and from wasting time fixing something that could have been avoided. That can manifest itself in the form of a simple animation warning the user that their password can be easily guessed, or that one word has been misspelled.

While microinteractions aren’t the whole solution for a perfect UI, particularly by Nielsen’s standards, it can serve as a great tool to improve on your interface and user experience. It can prevent the user from making a silly mistake or taking large features and simplifying them to a small microinteraction — making a minimalist design much more achievable.

Keeping an eye out for opportunities for microinteractions

Like we mentioned before, precisely because these animations and interactions are so small and meant to be nearly invisible, it can be difficult to find ways to incorporate them in your design. As if that wasn’t enough of a challenge, having too many microinteractions and animations is a real danger.

So what’s the right approach when looking for windows of opportunity? We find that treating every large feature as a group of microinteractions helps. This way, you’ll be able to see exactly what features you can break up into smaller animations or buttons — aiming for minimalism and user engagement.

This is particularly true of large and often complicated features — remember that learnability is important if you don’t want users to give up on your product simply because they don’t have the patience to master it. Instead, make this large feature simple and to the point with a few smartly planned microinteractions.

Another useful way to look for microinteraction opportunities is to look in all the changes and things that your app does — it could be something as simple as having a screen that users can scroll down. That screen gives you the opportunity to have microinteractions such as a reading progress bar or an animation that tells the user when the bottom has been reached.

Best practices for creating microinteractions

Have a quick response time. Mobile users want quick response from the app as soon as any action is taken. If your microinteraction takes longer than 0.1 seconds to manifest itself, users might not associate it with the initial action. This would mean that the microinteraction is pointless and possibly confusing to the user.

In fact, you want your whole animation and interaction to be fast — we don’t recommend any micro-animation lasting longer than 400 milliseconds.

Test everything! Don’t be fooled when you hear that these interactions are so small they don’t need to be tested with real users. Everything about your product should be tested and microinteractions are no exception. There is no escaping it: you must prototype the whole app and take notice of these tiny interactions in your user testing.

Many designers might feel a bit lost when they think of ways to test their microinteractions, but fear not. In fact, testing them differs only slightly from regular user testing. Instead of testing the concepts behind large features or different functionalities, focus on testing the logic and flow.

Never settle for something with no meaning. All designers look to avoid features and elements that have no purpose or meaning in their design. However, it can be easy to lose track of your audience and get carried away with the creative process — you need to focus on the functionality aspect of each microinteraction.

Always ask yourself if a microinteraction adds value to your app as opposed to a way to make your design more beautiful.

Stay on brand. Everything about the microinteraction and the micro-animation should reflect your brand from the moment the user opens the app to the point when they close it. Try to avoid varying your use of colors or icons too much as it can result in a product that is cool — but is a branding failure.

Consistency — always. This true for all aspects of your app, but it’s particularly important in mobile microinteractions. Users will have to engage with several interactions in your app, and they should be able to understand what each one does even if they haven’t used that particular small feature yet.

You want to create a style of brief interactions that repeats itself in interactions across your whole app, so users only have to learn them once and be able to start enjoying your app. Learnability is an important factor in consistent UI design, and you should apply that to all your microinteractions — so make them simple and consistent.

Impose restraint on the use of micro-animations. This is important in order to make sure your mobile app isn’t overwhelming or confusing to the user. Within the limited screen space of a phone, having too many things moving goes past the field of engagement and right into the realm of clutter.

User-centered design is key. Never lose sight of your audience. It’s only natural for designers to get excited and look to deliver the best possible app, but you must watch out for microinteractions that don’t add value to the user. This is also true of larger features — feature creep is a legit danger! Try to keep in mind that you want each microinteraction to make navigating and using your mobile app feel natural to the user.

Microinteractions: examples that got it right

1. Notification microinteraction

Hoang Nguyen delivered a great notification microinteraction. The notification icon itself is grey and would all but disappear from the UI until an actual notification takes place — which is just perfect.

We love that the animation itself is quick and to the point, resulting in a microinteraction that adds value to the user and is enjoyable to experience. Wonderful!

2. Downloading microinteraction

Brought to us by Pedro Aquino, this microinteraction is all about visibility of system status. After all, all users appreciate knowing what is happening with the software they are using! This microinteraction is entertaining and informative, helping users withstand waiting time — which no one likes.

The quick movements and seamless transitions in the microinteraction make it smooth for the user to experience, while never becoming overwhelming or distracting.

3. Progress bar microinteraction

Saim Alshafi created a progress bar that is filled with personality and charm. As we are all familiar with, progress bars help users understand the system status as well as where they are within a given process. But who said they need to be boring?

This microinteraction works on many levels. It’s simple and concise, so it could blend perfectly with most screens out there while never crossing the line into the realm of the over-the-top. It’s smooth and blends back into the wifi icon we all know and love, making the design feel natural. We love it!

5. Floating action button

Mauricio Bucardo designed a great action button microinteraction that is all about the dynamic and motion. We can appreciate the speed of the animation, that works to simply open and close a menu.

We love that his microinteraction has a visual effect both for opening and closing of the menu, making a simple user action fun and filling the design with personality. A huge win!

Prototyping and testing microinteractions

In order for us to give you an example of how you could prototype a microinteraction, we’ll turn to a simple but familiar microinteraction. It’s something we are all so used to seeing, we hardly notice anymore: change the style of links. We all know it. You hover the mouse over a link and it changes color, highlighting the idea that you can click on it.

We’re going through one of the examples that are listed on our tutorials on the Justinmind help center. To see the other exercises, head to Exercises on Events and Interactions.

First, it’s important to open Justinmind’s prototyping tool and start a new prototype. Then, you’ll want to drag a bit of text to the screen — feel free to label it “link style change” or something else that is descriptive.

Select the text element, and click on Add Event. You’ll find that triggers include a series of mouse triggers, you’ll want to select On Mouse Over. As for the action, click on Change Style.

At the bottom of the Events popup, you’ll notice a dropdown menu that reads “Select styles to change”. In this dropdown, make your way to Text and click on Color. Once that’s done, you’ll see a “Text color” selector appear under the dropdown menu. In the selector, choose the color you want the link to change to.

Simply click OK. That’s it! If you hit the Simulate button, and hover your cursor over the text you’ll see it behave just like you planned. This may be a silly microinteraction, but with only a few moments of your time you created a detail that helps users all around the internet.

To learn more about animation and what you can do with Justinmind, check out our guide on prototyping events and interactions.

The wrap up

Microinteractions are subtle details that can make the difference, working a viable road towards a unique product that your users can love. They can help the user have a better understanding of all available features and add a good deal of branding and personality to you mobile app — it just needs careful planning and lots of creativity!

Go ahead and start to take notice of the little things in all the apps you use frequently. You’ll start to understand that these little interactions are everywhere and yet are so easy to overlook. You’ll notice that micro-animations can add flare to any app, and guide the user to where the action is.

Originally published at https://www.justinmind.com on March 19, 2020.