XD Essentials: Microinteractions and Their Macro Effect on User Experience

Great products do two things well: features and details. Features are what draw people to the product, and details are what keep them there. Are microinteractions those details? Yes! It is these details that lead to seamless interaction with products. Alternatively, it is the lack of attention to those details that lead to user frustration and eventual dislike of a product.

The Essence of Microinteraction

Basically, microinteractions are contained product moments that do one small task. They are so small, you don’t think about them. When you mute your phone, rate a product, or play music, you are engaging with a microinteraction. It’s likely that you start your day with a microinteraction by turning off the alarm on your mobile phone.

Microinteractions aren’t restricted to just computers, they are absolutely everywhere. You can find them in the mobile devices we use, the appliances in our house, and even embedded in the environments we live in.

In Dan Saffer’s book Microinteractions, he notes these atomic design moments typically serve following essential functions:

• Accomplish an individual task.
• Communicate status and provide feedback on user actions.
• Prevent human error.
• Enhance the sense of direct manipulation.
• Help users visualize the results of their actions.

Some examples of microinteractions include:

• The on/off switch is often the first microinteraction people encounter with a product.https://blog.adobe.com/media_1bb56709a85850609b106e7a82055778008a21d9.gif
• iPhone’s mute switch provides multi-modal feedback — the haptic feedback from the switch, the vibration of the device, and the UI overlay on the display.
• https://blog.adobe.com/media_60a1461961cfe1c799caf98be35ea01480b136be.gif
• Image credit: Smart Design

The ’like’ button on social networks which highlights changes by using interactive animations. Such feedback informs users that they are in the list of those who liked the post.

Four Parts of MicroInteractions

According to Dan Saffer, all microinteractions should have a four-part structure.

https://blog.adobe.com/media_8c8274371dbba88c38c8f774522995d8318b9de6.gif

• Trigger is what starts a microinteraction.
• Rules determine what happens – the flow of the microinteraction by defining the sequence of events.
• Feedback lets people know what’s happening. Since rules are invisible, users understand them through feedback.
• Loops and Modes determine the meta-rules of the microinteraction. Modes should only be used when there is a critical, but infrequent, action that would otherwise disrupt the flow of the microinteraction. Loops determine how long the microinteraction goes on for, if it repeats, and how it changes over time.

Why Do Microinteractions Work?

In trying to answer this question, all roads lead to a human-centered design approach, where the user is the prime focus. Taking a human-centered design approach means leading with user’s wants, needs and behavior, and here, microinteractions come into play. A direct focus on interactive animations make user interfaces more appealing by:

• Offering informative feedback. The user wants to be in control and trust that the app behaves as expected. It could be even said that users don’t like surprises. Microinteractions work because they acknowledge user actions and lets users know instantly that it was accepted.
• Providing system status to the user. Again, the less the users have to guess the better. Microinteractions provide users with needed understanding of the ongoing processes and can guide and teach the users how to interact with the interface.
• Adding a visual delight. UX delight is part of establishing an emotional connection with your users and reminding them that there are real humans behind the design, and microinteractions are one of the best techniques for giving delightful feedback.
• Speaking like a human. Good microinteractions help to establish a connection between app and the real world, because they use the same language your user does.

The most important thing in UX is how you deal with users and how they feel when using the product. If microinteractions are delightful, humane, and effective, then they should improve the app’s user experience and bring the user interface to life.

Conclusion

In today’s world where a typical person encounters a hundred or more different user experiences each day, only the clearest interactions will turn a new user experience into something special. Microinteractions are one of the key things to pay careful attention to in UX design. If you can master the art of creating small, delightful moments in your user’s daily interactions with technology, you will leave a positive, lasting impression.

In my next article (Part 2 – coming soon!), I’ll explain useful techniques for mobile apps and dissect some great examples.