Microinteractions: Introduction to Our Unsung Heroes (Pt 1)

“Designing a product is designing a relationship” – Steve Rogers

We get it! Details are important in design. But what exactly are the details when it comes to a product’s visual design? These pesky little things are referred to as microinteractions the features that draw the user in. It is the microinteractions—the details—that keep ‘em coming back and wanting to use a product. The main proponent of microinteractions, Dan Saffer, described it best stating, “details are a delivery system for emotions. They are the “feel” part of “look and feel”.

So, break it down for me—what exactly are microinteractions?

Microinteractions can take on many roles and exist around, inside, and within our day-to-day activities. If you will, they are the unsung heroes in our products and should be recognized more as design continues to evolve and technology advances. They can communicate feedback, prevent user error, accomplish a unique task, and much, much more! As users, we often overlook them unless something works surprisingly well or goes more poorly than we expected. In the world of digital marketing, brands hope for the former; this means that the microinteraction has captivated the audience and created what is called a signature moment for their brand. One popular example is Facebook’s Like feature—we see it and immediately identify it as Facebook. Just imagine what a micro interaction could do for an up-and-coming product; the marketing (and branding) implications are limitless if a signature moment can be achieved!

“The details are not the details. They make the design” – Charles Eames

What makes up a microinteraction?

A microinteraction can be broken down into four components:

• Trigger: The start of a microinteraction. It can be a manual control or triggered when a condition is met.
• Rules: These determine the flow of the microinteraction. It is the sequence of events as well as what can and cannot be done during the interaction. The user understands these through feedback.
• Feedback: How we, the user, understands the rules of the interaction. It can range from visual to tactile.
• Loops (and Modes) – Loops determine how long the microinteraction lasts if it repeats, and how it changes over time; modes are used for critical but infrequent actions, that would disrupt the flow.

An easy way to digest the process is: Triggers engage rules. Rules are recognized through feedback. And loops and modes are the “how” of it all—how long and how often?

Ways to improve and/or create awesomeness!

• Less is more. Do not make your microinteraction too complicated. Too much can overwhelm your users!
• Think longevity. You want your microinteraction to survive the test of time. Can it withstand constant use without boredom? Or worse, without irritating the user?
• Your user is human. Remember the interaction is human-centered, so the copy should not be emotionless and robotic.
• Mimic normal. This is not to say you shouldn’t implement innovative ideas, but to prevent human error, your microinteraction should be intuitive and familiar.

Takeaways

Microinteractions don’t often get a lot of attention from companies or their users, which is understandable because no one uses an app to enjoy the loading screens. But…ignoring this unsung hero is a major mistake, especially in today’s competitive marketplace. Paying attention to these details makes all the difference between a product we love and one we tolerate or pass-up. A well-designed microinteraction not only increases adoption and customer loyalty but elevates a brand’s identity—especially for the few that are signature moments.