The beginner’s guide to mobile microinteractions
Microinteractions have the power to make your mobile app truly addictive — learn how they can take your app 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!
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 get the user to feel delight, as if the product itself is constantly engaging the user. They can make your product more fun, practical and intuitive.
Here at Justinmind, we love microinteractions done right, so we decided to put together a full guide on the topic.
What are mobile 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
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 it’s 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 stipulate 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.
- 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
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. The 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 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.
But there’s a margin between what is completely rid of animations in 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.
Why you should care about 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 to the product, even if it is just to let the user know that something is happening.
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 a nice 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 is 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 — saving the user from that feeling of frustration and 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. Be it preventing 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
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
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 this 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.
The wrap up
Microinteractions are subtle details that can make the difference, working a 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 is 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.
When it comes to your own mobile app, these tiny details can be your way of telling users you want to deliver the best possible. Make it your own, make it meaningful. Test. Improve. And then watch your users fall in love with what you created!
