The Magic is in the Details: The Beauty of Well Designed Micro-interactions and the Horror of Badly Designed Ones

 

What are microinteractions? Microinteractions are the tiny details of a process that create the flow from beginning to completion. Dan Saffler defines Microinteractions as single moments within a use case.  They are discreet touch points that support over all user experience.

 

Why do you care? Microinteractions appear in the digital world as well as in the physical. They can be the make or break moments that become the difference between loving an experience and having it drive you to drink. An annoying or frustrating microinteraction that keeps you from completing your intended task can sour your entire view of a brand, leaving you with the impression that they do not care enough about you to make their app efficient and easy. I have set out to notice these microinteractions in my day to day life both real and digital.

 

Common examples of well designed microinteractions are things that improve your life without you even noticing. Digitally they are things like, autocorrect, Google Instant (predictive search) drag to refresh in your mobile Facebook feed, and that little ellipsis that can cause so much anxiety, yet informs you that the person on the other end of your iMessage is typing something. 

 

 

There are plenty of common wonderful microinteractions in the physical world too. For instance when the automatic paper towel dispenser in the bathroom at the airport spits out the appropriate amount of stiff towel to dry your hands the moment you wave your palm in front of it. Another example is a when your coffee maker is so smart that it just knows that you are impatient and have removed the pot mid-brew and stops the drip while you fill your eager mug.

 

The flip side of these fantastic little experience bits is those that are either not well designed, or don’t function as expected. Digital examples are out there causing endless heartache, distrust, and disappointment.

 

One example of that is the less than descriptive feedback that impedes the user from completing their intended task. For instance, you go to fill out a form to receive a picture per day from your favorite funny cat site. You exhaustively fill in all of the rows of desired information that is needed to determine the cats that will suit your fancy. As soon as you finally click ‘submit’, you are slapped in the face with an error message that simply says, ‘* information is missing, please correct and resubmit’. How frustrating that you are not informed which field to modify and you must scroll up and down to figure it out yourself.

 

Another example is when you have a weird pain in your leg and are trying to google your symptoms only so that you can be convinced that you are dying when your Mom texts. The text message drops an alert right in the spot where you were typing and disrupts your (very time sensitive) self diagnosis. This causes you to have to swipe upward to dismiss, in order to complete your task. Ugh. Mom.

 

 

Or how about in the physical world when the door handle is facing is situated wrong and you always pull it rather than push?

 

As I mentioned earlier, I am trying to notice these things in my everyday life. I have noticed a couple of examples of microinteractions that have made things easier for me. One is Apple maps remembering my common addresses so that I can simply bark the first few words of the address that I’d like to find at Siri to get her to pull up the driving directions, rather than saying the full address.

 

Another is in Gmail. I love Gmail. I have noticed that if I go to send an email, and forget the attachment, it tries it’s best to save me from humiliation by detecting that I have written about an attachment, but not attached anything and alerting me of such. Good lookin’ out, Gmail!

 

 

One more microinteraction that always makes me smile is the google chrome “Unable to connect to the internet” alert. Get it? The T-rex can’t reach the internet. I’d bet he can’t make a bed either! Bonus: if you see this message, you can hit the space bar (tap Rex on mobile) and play a little game.

 

 

I also walked around my house looking for some day to day items that have microinteractions that make me adore them. One that I found is my electric toothbrush. With a simple extra click of the brush’s single button, it gives me a whitening round once the regular brush cycle is done. Who wouldn’t want that? Another example is in my car. It makes me feel like royalty every time that it rains even a drop and my windshield wipers come on by themselves. It’s as if they are saying, “oh, let me get that for you right away, Ms. Spengel.” and I appreciate it.

 

It is interesting to think about how these tiny bits of each of our experiences impact our emotions so much. As designers, we have the responsibility to consider each microinteraction, no matter how insignificant it seems.  At the end of the day, something very simple can make a product stand out as ground breaking, or just plain broken. We owe our users a delightful experience.

 

What are some of the great microinteractions that you have noticed? How about some terrible ones?