The Delight of Microinteractions
Originally posted on Manifestdigital.com from 2013–2015
WHEN SWEATING THE SMALL STUFF MAKES A BIG DIFFERENCE
Focusing on the big picture is extremely important when creating a user experience that is holistic and consistent. However, a well-designed, delightful experience is in the details. The only problem is that the details are oftentimes overlooked.
One way to get those details and delighters right is to work microinteractions into your designs. microinteractions are the small actions you experience in an interface while taking an action, like organizing apps on your iPhone. Or, they can be related to the primary purpose of a tool, such as sending Tweets on Twitter or doing basic tasks on a simple coffee maker. Done well, they can be a great way to delight your users and increase engagement.
To build microinteractions, you’ll need to understand the four parts of interaction: Trigger, Rules, Feedback, and Modes.
Triggers: A trigger is the action a user takes to start microinteractions. Choosing the settings on your coffee maker or pressing an icon on your iPhone to organize your apps are all examples of triggers.
Rules: Rules are the defining guidelines of microinteractions. When using your coffee maker, you may have to choose a number of ounces before the machine will brew. For the iPhone, you are able to rearrange, group, ungroup and delete the apps on your home screen, but cannot group multiple groups together. These are all examples of rules.
Feedback: This is one of the best opportunities for a designer to delight a user. Feedback is a transition or action that lets the user know the microinteraction is taking place. Many microinteractions will use feedback that humanizes an action in a friendly way or mimics human behavior. For the coffee maker, it might be a simple beep letting you know your coffee is ready. For the iPhone, it’s the shaking icons when you go to delete an app (as if the app is scared of being deleted) and the visual changes that occur when you are about to group apps together.
Modes: Gmail has a great example of a mode. Over time, Gmail recognizes when you stop using certain folders, like “Sent Mail”, and will automatically move those unused folders out of sight to the “More” menu. Modes change the way microinteractions work and can be helpful for those microinteractions that are more progressive, like the ones in Gmail. This is a tricky one, as having too many modes or even one mode can cause confusion to users.
But lets not get carried away. Although we do need to focus on the details, not every interaction needs exciting microinteractions with fun transitions and animations. Make sure microinteractions are necessary and provide value to your users. And while delight is valuable, clutter is not.
If there are microinteractions that can be used in multiple places, do it; and if your interface crosses multiple platforms, make sure microinteractions are scalable and consistent. Remember, as Dan Saffer, the guy who literally wrote the book on microinteractions says, “The details are not details. They make the design.”
