Meaningful Microinteractions

If you love a product – your phone, a new wearable, that great app – chances are, it’s because of the microinteractions designed into the product user experience. Every time you unlock your smartphone, pull down to refresh, glance at the typing indicator while chatting, swipe to delete an email or glance at your Apple Watch, you are experiencing a simple, brief and nearly effortless microinteraction.

The path to designing great microinteractions is very user-focused. It requires understanding what users need rather than designing based on a best guess. The steps include:

1. Observing how people interact with a product to accomplish a task.
2. Identifying pain points.
3. Evaluating logical sequences that make sense to combine.
4. Designing timely and easy-to-understand triggers that initiate the microinteraction.
5. Establishing rules that define how the microinteraction can be used.
6. Providing feedback that tells users what is happening.
7. Creating loops or modes that let users set preferences or modify a microinteraction.

Below are a few examples of meaningful microinteractions.

Gmail Notification of Missing Attachment

Gmail checks the words that are written in an email message. In this example, Gmail identified that “Attached is” was typed into the message, but no files were attached before the user clicked Send.

iOS8 Icons

The iPhone iOS8 clock application icon shows the current time and second. It also automatically updates to display Daylight Savings Time.

Medium Tweets

When reading posts on Medium, users can select text in a post, select Twitter from the pop-up and then the tweet is prefilled with the selected text.

Apple Watch

Going beyond the browser, the Apple Watch blurs the boundary between physical object and user interface. It requires us to think and design in that realm to meet the user’s needs with a delightful, relevant experience. Apps on the Apple Watch are designed for quick, lightweight microinteractions that make the most of the display size and the watch’s position on the wrist. Information is accessible and dismissible quickly and easily, for both privacy and usability. The short-look notification, for example, is a minimal alert, revealing more information only if the wearer remains engaged. Glances provide information from apps in an easy-to-access, swipeable interface.

Signature Moments

Some microinteractions catch on and do surprisingly well, so much so that they become a product differentiator – a Signature Moment. One famous signature moment is the Facebook Like button, added in February 2009, which quickly became a popular and frequently used feature. The Facebook Like button remains a popular part of the brand today, with an estimated 3,125,000 Facebook likes each minute.

Microinteractions are critical in the driving experience and can influence behavior change. The Ford Fusion Hybrid “Efficiency Leaves” interface caught on with customers and became a near game-like interaction in coordinating movement. Over time, if you were driving in an eco-friendly way, growing leaves and vines displayed to the right of the speedometer. You could also lose leaves if driving inefficiently. People became attached to the leaves and tried to grow as many as possible. This became a real signature moment and ultimately resulted in people getting better gas mileage, to the extent that Ford went back to the EPA to up the gas mileage on the sticker. Since then, the Lincoln MKZ Hybrid has begun using a newer version of Efficiency Leaves that helps drivers achieve even better levels of efficiency.

Well-designed microinteractions are often the differentiators between products we love and those we simply tolerate. Taking what could be a dull or difficult task and turning it into an enjoyable experience is a way for brands to increase adoption and customer loyalty, and could become key to the success of a new digital experience in a crowded marketplace.