Improving the UX, one microinteraction at a time
“In competitive markets, microinteractions are even more important. When there is feature parity, it is the experience using the product that increases adoption and brand loyalty.” ~ Dan Saffer
This article is about microinteractions. First, we will understand what a microinteraction is and, then we will look at how this understanding can help us make iterative improvements to an existing product, or give us a framework to think about building products with a great UX from the ground up.
What is a micro interaction?
A microinteraction is a simple, atomic, interaction that a user has with your product. An atomic interaction, is an interaction that cannot be broken down further into smaller interactions. So, a microinteraction is the smallest interaction a user can have with your product. Lets look at some examples to understand the concept of a microinteraction.
Clicking on the follow button — highlighted in a blue border — in the image below is a microinteraction. So is clicking on ‘Go to full profile’.
Each time you favorite or re-tweet a tweet, think of it as a microinteraction.
‘Like’ a facebook picture ? Thats a microinteraction too. So is commenting on your friend’s posts. I hope you get the idea.
The simplest, single-use case interaction a user can have with your product is a microinteraction.
You can think of a feature or a even a product as, a collection of such micro interactions. In a way, it is a bottom-up view of products.
Structure of micro interactions:
There are 4 parts to each microinteraction.
Trigger.
Rules.
Feedback.
Loops.
Trigger:
All microinteractions are kickstarted by a trigger. A trigger can be system-initiated or user-initiated. A trigger should have certain characteristics inorder to be useful to a user. Some of the characteristics a trigger should possess include:
A trigger should be clearly visible to the user.
A user should be able to understand what the trigger does, in the context that it is placed in.
A trigger should have a clear visual affordance. If you want a microinteraction to be triggered by a mouse click, it makes sense to make the trigger a button. This way it is clear to the user that he/she has to ‘click’ in order to initiate the trigger.
A trigger should behave in a predictable way. If you click the like button on your friend’s post on Facebook, the expected result should be the same every time — the number of likes go up, you are given a feedback that you liked the post, and, your friend gets notified.
A trigger should provide the user with helpful feedback.
A more important microinteraction should be placed more prominently with a higher visual weight.
If all the above ‘rules’ seem abstract, the following example should clear things up:
Notice the like button highlighted in red, in the image below. Clicking on the like button is a user-initiated trigger, that kicks off the ‘Like’ microinteraction. Lets see how the rules listed above apply to this trigger.
The trigger — in this case the button — is clearly visible. Since it is an important micro interaction, it is displayed prominently. The button is placed on the cover photo, so it clear that clicking on this button, will result in a like for the the entire page and not a particular post on this page, so the user has a clear understanding of the result of this microinteraction. The text ‘like’ is placed right next to the ‘thumbs up’ symbol, so the visual affordances are hard to miss too.
Once the user clicks the like button, he/she gets instant feedback, the text changes from ‘Like’ to ‘Liked’ and, the color of the thumbs up button changes from Black to Blue. And this is really important, the trigger behaves the same way, every single time.
Rules:
“What you’re trying to create with rules is a simplified, nontechnical model of how the microinteraction operates.” ~ Saffer, Dan
Rules define the working of a microinteraction. Think of it as a flowchart for a microinteraction. For instance, consider signing into Gmail as an example. This is a microinteraction. The goal of this microinteraction is to authenticate the user and, give him or her access to the inbox. The following rules can drive the working of the microinteraction.
Rule 1:
If user has entered the correct email id and password, then login the user.
Rule 2:
If either the password or the email id is incorrect, display a error message on the same page.
This is a fairly trivial example, but you get the idea.
Users use a microinteraction with a set of expectations about how it will work. The rules should be in alignment with these expectations, so that the user’s mental model maps correctly to the actual working of the microinteraction.
Feedback:
So, the user initiates a micro-interaction through a trigger, and the micro interaction, adhering to a set of rules, processes the user input. This processing most likely results in a state change. The state change could be as simple as an increase in the number of likes, or something a lot more complex. Every microinteraction changes the state of the system, otherwise there would be no point of the microinteraction. In most cases, this state change should be made clear to the user through feedback.
Providing timely and helpful feedback can greatly reduce the pain points in UX.
Consider this for example:
When exiting silent mode while watching a soundless video in Instagram, it shows a message, reminding you that the video has no sound at all.
Apart from being downright essential in most cases, feedback is a great place to add some personality or emotion to your product.
If the Yelp mobile app can’t find your current location, it suggests that you are a ninja. This feedback could have instead read ‘ Location not found’ or something generic and boring. But by going with something funny, the app mitigates the frustration user experiences when there are no results for his query.
Here is another great example of adding some humor to an otherwise boring ‘You cannot leave these empty’ feedback message.
Tumblr — Attempt to log in without providing any information shows you this non-standard error message — “You do have to fill this stuff out, you know”
Loops :
Microinteractions have memory. They can use user data and, the context in which the microinteraction is being used. Loops refer to a microinteraction being used for the 10th time, or the 1000th time. Each time a user engages with a micro interaction, you have an opportunity to make it better, by using user specific data or in other words — the memory of a microinteraction.
Sounds confusing? Lets take an example:
If the user clicks the ‘Add new Friend’ button too quickly, facebook gives the user a warning.
Loops can help products deliver the long wow.
“The Long Wow is about delivering new experiences or features over time instead of all at once, and by doing so building customer loyalty. For the purpose of microinteractions, The Long Wow is about adapting the microinteraction over time so that it feels customized or even brand-new.” ~ Saffer, Dan
Once the user has interacted with a microinteraction a couple of times, you almost always know something, and that something can be used to improve the microinteraction.
You might find it helpful to ask yourself the following questions:
What do I know about the user and the context?
What information do I have about the way the user has used this microinteraction in the past ?
How can I make this microinteraction more delightful for the user, given the information that I have?
How can the microinteraction mature with use, in order to make it more desirable ?
Further reading:
That covers the four parts that make up a micro interaction and, brings us to the end of this article. Needless to say, there is a lot more to micro interactions and the parts that constitute it, than I have covered in this post.
I highly recommend the book on the same topic by Dan Saffer, for those who are inclined to learn more.
I tweet one design link a day on my twitter account.
Follow me on twitter @mudumh
References:
This article is based on the wonderful book by Dan Saffer. It is certainly one of the best books I have ever read about design. I would highly recommend it to all product builders.
