Microinteractions : Take Your Tech Product To The Next Level!

Hello Friends, I am Prince Pal, Being the Creative Head of Think 360, design is something that has been hands-on with me. I believe design is like magic that sort of creates user illusions. It has the power to transform the product giving a different face altogether. What pulls me the most is the dynamism associated with it. The fact that it is small that leads to the big. Yes, it is getting those details right. And this is what brings me to describe today’s topic - Microinteractions. In this article, I will be talking about the small, but damn important details that count as a whole for the moment-to-moment experience. So, here is your guide on getting the big picture right, through the detailed picture.

Okay, so let me start with the question- Are microinteractions worth it all? Well, let’s just say they are more compact solutions. They make the next step the very part of the present step. There is nothing that can be left. Everything is accounted for. Let us take an example. Your car; you open the door to get in and the moment you do that, the ceiling light gets on. In case, your door is not shut properly, it is still left on, giving you the indication that the door is not properly shut.

Further, getting the blinker on, in case, the fuel is short or getting a beep sound, when there is some vehicle or person behind the car while reversing are some other add-ons through micro design that makes the car a great product. Now, how did the interaction went from good to great? Well, microinteractions did it all. Indeed, it is the details that conquer.

Microinteractions are present everywhere, right from your washing machine to your smartphone. They are single use-case features that do one thing at a time but ideally fulfill the needs and goals of the customer. Have you ever thought about why you are fond of a particular product? Or why a product becomes a no-other-option type for you? This is because of microinteractions that definitely add up to the experience and make the users enjoy the product more. Microinteractions, even though tiny, bring pleasure both to the creator as well as the customer.

These small pieces of functionality are highly interactive, and although sometimes invisible, they turn out to be great supports that enhance the performance. Okay, can you hear the alarm on your mobile even though it is left in silent mode? So, nowhere, you get a somewhat expected micro interaction that is added to sort convenience for the customer and makes their life easy.

Microinteractions are not features and are somewhat different in their size and scope. Features are more complex and involve a lot of effort; on the other hand, microinteractions are simple and quite effortless. For instance, a music player can be labeled as a feature whereas being able to adjust the volume is a microinteraction that is present in that feature.

It creates a moment of delight which further engages the user and makes the experience every bit of pleasure. Let us look at some common examples-

• In some Windows phones, settings and switches are not to be fiddled when you’re in a meeting or caught up somewhere as the phone can be turned to silent by just flipping it over.
• The autosaved names of your e-mail id, while filling a form, comes in very handy.
• Facebook is full of microinteractions, right from your like button to the multiple wishing options on birthdays.

Microinteractions are great when you want to master a single task, connect various devices together, make changes in a setting, manage an ongoing process, look at a small piece of content like status and turn a feature on or off. Now, these are not necessarily small. Microinteractions can be a part of the product or the whole product itself.

The small apps that you operate are made up of one micro interaction and they do that task well. Even for that matter, Twitter is a wonderful example as it revolves around a single microinteraction of sending a <140 character message.

The overall experience amounts a great extent to microinteractions. This is the reason that microinteractions, even though being the last to be developed, should not be ignored. They give the ultimate feel to the product that makes it fit well and thereby increase the adoption and brand loyalty.

Well-framed microinteractions prove to be successful as they cover various platforms and reach millions of users. Each time you click ‘follow’ you are going through a microinteraction as it keeps a track on your favorites just with a click.

The efficiency of a micro-interaction is defined by its form along with its size. A well-designed micro-interaction consists of four parts. The first part- Trigger starts the microinteraction. The working is determined with the second part- Rules. Further, the Feedback elaborates on the rules and then Loops and Modes affect the microinteractions and dissect them completely.

All the micro-interactions have a starting point from where they are initiated and that is the trigger. It can be kickstarted by the system or the user. A trigger needs to have certain elements so as to prove worthy for the user. One of the major characteristics is clarity; a trigger must be clearly seen by the customer. Also, the user should have no confusion with its usage as per the context it is set in. He or she should understand why it is being used in a particular place.

The micro-interactions begin with a thorough idea of the users’ needs, what they want to achieve when they want to seek it and at what frequency. Now, this, in fact, forms the affordance, accessibility, and persistence of the trigger. The best example is the silent mode of the phone where turning the ringer off is the common action that the people perform and that too irrespective of any application at any time. Here, the ringer or the silent switch is the trigger that can be instantly turned off or on. It has a visible affordance in the form of a button where the user has the idea to just give a ‘click’ to set the trigger.

A trigger should go as per the predicted pattern. For example, if Facebook states that ‘Like’ button will like the image or the post, then the click should do the same thing every time- the likes must go up, you are given feedback that you liked the post and also, your friend gets notified. Now, this is how it should go without any change. A trigger should set the path for useful feedback. Further, an important micro-interaction must stand out by giving it higher visual weight in terms of its design.

As in Facebook, whether the ‘Like’ is for the page or the post, it should be clear to the user and he should have a proper understanding as to what will be the result. As soon as the ‘Like’ is pressed, feedback is sent to the user with the change from ‘Like’ to ‘Liked’ and the color of the thumbs up from Black to Blue. This is a set behavior for the trigger and should happen every single time so as to not confuse the user.

Rules specify how a micro-interaction works. Just like a flowchart or a sequence of behavior. A useful example can be that of Gmail. It is a micro-interaction where the target is to validate a user and grant him or her access to use the account. The rules that work here are- going with the correct email id and password to enable login to the user and if the email id or password doesn’t match, then an error message should be displayed instantly.

Users generally anticipate the use of micro-interactions beforehand. So, make sure that the rules are in accordance with these expectations so that the user can adapt to the usage and doesn’t have difficulty in grasping the directions.

Anything that you see, hear or feel that makes you grasp the rules better, stand in the category of feedback, that is, the third part of microinteractions. As the user input is processed by the system, it results in changing of the state. Now, this state change could be simple or complex, ranging from a change in files to software. How will this be intimated to the user? Well, the answer is feedback. The purpose is to convey the information in the most appropriate channel possible.

Feedback can be subtle or prominent, like, unread badges in your apps or the glowing bulb of your flipped switch. Further, feedback is not only visual but also aural and haptic (vibrations). Yes, the buzzer announcing the arrival of a message on your phone or the voice guiding you in your GPRS, all are in the category. Timely feedback can help to reduce the complications involved in the UX process. In addition, to be a necessity, feedback adds a human touch and emotion to the product. Users can thus relate to the product better and feel more connected.

For example, ‘Well, this is embarrassing’ message displayed by Firefox browser adds an emotion to the breakdown of working and makes the user wait with full understanding of the situation. But, in case, the message would have been ‘not available’ that would have been very generic and boring. The target is to add humor to the problem so that it negates the frustration level amongst the audience.

The last part are the loops and modes that can be recognized as the meta rules. Microinteractions consist of memory. They can user data and the context of its application. Loops correspond to the usage of the microinteraction for 10th time or 100th time. Each time the user goes for the microinteraction, there is a chance to make it better every time, that is, in other words, reform the experience more. Specific data can be used by way of utilizing the memory of microinteraction.

For example, the ‘Add new friend’ option on Facebook comes with a warning which gives a security code and blocked usage prompter that clarifies the action of sending requests. Loops can be a great help in delivering the long wow. The long wow stands for making the experiences awesome over a period of time, with outstanding features, instead of rushing things up, so as to gain customer loyalty.

It is more of adapting the microinteraction so that it gets a brand-new feeling to it. As the customer get use to with a microinteraction, they know much about it, so, this knowledge can be very well used for making addition and improvements in its function.

Certain questions can be asked while making modifications, like, who is the user and what is the context in which the microinteraction is being utilized? How has the member used the microinteraction in the past attempts? What additions can be done to make that moment of delight all the more heightened for the user? How can the microinteraction mature in its use so that it becomes more favorable by the people? An example of a loop can be seen most commonly on the e-commerce websites, let us take here eBay.

If you shop on the website and have added items in the cart earlier, then the ‘Buy it Now’ item changes to ‘Buy Another’ so as to make the microinteraction more desirable.

Modes are a fork in the rules and should be used less. Most of the microinteractions work mode-free, but sometimes it becomes essential to use it. The reason for using it less is that it clutters the main purpose of the microinteraction as it comes into scene on an infrequent basis. An example can be Settings mode, where the task in hand is not something major, but just a change.

It is separate from the rest of the interaction. Just like when you select the city in a weather or stock market app, you are performing a sub-task and after you are done with the settings, you return. Thus, if you want to avoid errors, try keeping modes aside. Without doubt, there will be less confusion and less effort involved on the users’ end.

If you desire to have superior user experiences, microinteractions can do the trick. Having evolved from electric devices, these have somewhat become digital standards for us. As we live in the 21st century, we have problems that come in different shapes and sizes. So, we need solutions that goes well both for the big or small. Large systems can become more humane provided the smaller aspects are mastered by the designers. This is where microinteractions can actually work in full swing.

These timely details can surely lead to seamless interaction with our products. Details, although tiny, work large. It is by giving attention to every tiny detail that you can ultimately get the sense of accomplishment. A product can become more cherished if it goes for a clear interaction and that can be achieved if you design for ‘moments’ rather than ‘systems’.

At Think 360, we believe in empowering designs. For every product, our design begins at the atomic level, packed with principles, so that a super model comes out that takes layout altogether to a new level. Inspired with the insightful approach of Microinteractions, we take one interaction at a time to derive most out of the tiny nuanced interesting moments experienced by the user.

Let’s just say, we consider microinteractions as the macro step to success. Indeed, small sells big!

Credits - DAN SAFFER, MICROINTERACTIONS