Under the lens #7: Microinteractions

Microinteraction, the new superstar in the digital design world leaving designers everywhere scurrying to design and implement creative microinteractions. Some do this through neat animations, some through visual and few through audio. If you’ve been wondering what exactly a microinteraction is, you’ve come to the right place.

In this article, we’ll look not only at what a microinteraction is, but also a solid example of how it can impact the end user experience.

What is a microinteraction?

There are many explanations for what a microinteraction is/does. Some say they are contained product moments that revolve around a single use case—they have one main task. Others say “The best products do two things well: features and details. Features are what draw people to your product; details are what keep them there. Microinteractions are those details. According to Dan Saffer, it’s a product use case boiled down to a single moment, focused on a single task.

Each of them talks about the same basic concept: the individual minute details which make/break a user’s experience. I agree with those explanations, but not completely. Here’s my question: does a carefully designed, delightful detail alone qualify as a good microinteraction? I say no. I would go one step further and add that feedback is also a vital ingredient for the success of a microinteraction.

What are microinteractions?

Here are a few examples of microinteractions we experience nearly everyday:

Autocorrect, Bluetooth device auto connect, auto brightness, scroll to refresh etc in the digital world.

Clicky buttons, the resistance to your card when swiping it at a POS device, the resistance built into a rotating dial etc in the physical world.

All these tasks/activities are so natural for us to perform that we don’t take time to appreciate the design thinking to make them behave this way. For instance, imagine your credit card passing through that POS device’s slot with no resistance/friction; the experience feels incomplete and you aren’t sure the card even got detected. In luxury automobiles, all the dials and switches feel luxurious not only because of top tier materials and colors (though they play a huge role), but also due to their built in resistance. Sure they can design and engineer the dial to rotate with no resistance but that experience doesn’t match up to our high expectation from a luxury vehicle. Even the scroll to refresh feature feels so natural that we don’t even realize we effortlessly do it multiple times everyday. All of these microinteractions also have the common trait of offering excellent feedback once the interaction has been performed, which is critical.

What I’m getting at is that microinteractions don’t necessarily have to be explicit and grab the user’s attention but they do have to, at minimum, subconsciously delight the user with the experience of using the product.

Now lets look at one such experience: luxury sport sedans. There is no dearth for cars in this segment; Audi, BMW, Cadillac, Lexus, Mercedes, Volvo to name a few. All of these brands’ sedans offer automatic gearboxes as default with the option to manually shift through gears when we need to spice the drive up a bit. The shifter can move only in 1 axis: either up/down or right/left depending on the brand but a majority have the up/down shifting design and this is the focus of this section.

All cars1
Gear shifters in Cadillac, Camaro, Audi and Volvo
BMW alone
Gear shifter in BMW

If you’re wondering why BMW is in a separate image, you’re on the right track. Yes it has the same shifting axis, yes it is automatic, no it is not significantly more powerful than its rivals… but here’s why. BMWs are known for their sheer driving pleasure. This is definitely in large part owed to an excellent engine, suspension and steering set up. But there are minute details you don’t notice which further enhance the experience of driving a BMW and I’d like to highlight one such experience. If you notice the images closely, especially the direction of shifting gears manually (denoted by the + and – symbols), you’ll see that BMW shifts gears Up when pulled backward and shifts Down when pushed forward. This is exactly opposite to what other cars do; they shift Up when pushed forward and shift Down when pulled back. This design decision is what I wanted to highlight.

Logically, pushing forward to advance gears makes sense, but logic alone is not always the best consultant in design; context is king.

When we are accelerating hard and fast, which is precisely when this shifting method is useful, we are pushed back into our seats i.e, we are moving backward relative to the shifter. The opposite happens when braking. Thus, shifting is easier and more natural if the action is along our motion i.e. going backwards to shift Up and forward to shift Down and I feel this plays a huge part in improving the driving pleasure in a BMW. When you’re being pushed backward, you do not want to force yourself forward to shift Up. If you think I am exaggerating, I am not; try it yourself the next time you get a chance to compare BMW with another brand and you will feel the difference. This, I think, is a good example of how such a small change in the method of interaction, a microinteraction, can subtly but significantly affect the user experience.

I hope this article helped you understand what a microinteraction is and why they are important. I only scratched the surface of microinteractions as it was not my goal to dive deep; I wanted to share what I experienced and observed since it was a great learning experience. I am still learning to be able to identify these minute design changes and decisions so I can learn to implement them in my designs in the right manner. I hope you learned something from this too.

Have a similar experience or something even more interesting? Lets start a conversation, I’d like to hear about it.

Till the next article, cheers!

Enter your email address to follow this blog and receive notifications of new posts by email.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s