Design thinking—

The Art of Microinteractions

It’s all about the details. In the world of UI, these details are microinteractions. Whether it's swiping left to refresh your home screen or playing the dinosaur game on Google Chrome’s error page, we interact with microinteractions as consumers daily. Here are some examples of how to effectively incorporate microinteractions to subtly engage the user. 

3 min

It’s all about the details. In the world of UI, these details are microinteractions. Whether it's swiping left to refresh your home screen or playing the dinosaur game on Google Chrome’s error page, we interact with microinteractions as consumers daily. Here are some examples of how to effectively incorporate microinteractions to subtly engage the user. 

What is a microinteraction?

The definition of microinteractions

First off, what is a microinteraction? Microinteractions are contained product moments that revolve around one purpose. Through providing feedback, microinteractions help users interact with an interface. 

The function of microinteractions

According to Dan Saffer, the author of Microinteractions, microinteractions have many functions, including:

  • accomplishing a single task
  • connecting devices together
  • interacting with a single piece of data such as the temperature
  • controlling an ongoing process such as music volume
  • adjusting a setting
  • viewing or creating a small piece of content like a status message
  • turning a feature or function on or off

The structure of microinteractions 

Microinteractions are initiated by a Trigger, or an icon that encourages users to swipe, pull, scroll, click, or swipe. The Trigger then engages the Rules, which determines what happens. Feedback is then provided to inform the user about what is happening. Loops and Modes 

A Trigger initiates a microinteraction. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the length and continuity of microinteractions. 

 

How do you use microinteractions?

Show the user progress

Users are always looking for an immediate response, but sometimes that response is delayed. Showing system status through microinteractions keeps users informed. For example, if a page is loading, show a percentage or icon that displays how much longer the user will have to wait. 


Show the user changes

Notifications help communicate with users about important events. Using animation, such as a number next to your inbox tab for each unread email, will capture and maintain user attention. 



Show the user motion

Screens are often filled with information that can overwhelm the user. Using triggers -floating icons that encourage a user to click, swipe, tap, scroll, or pull - to guide users through the motions of your interface. For example, showcase a swiping motion across the screen to display to the user the necessary trigger. 


 


Show the user data

Most interfaces require some form of data collection from users. Whether it’s a date of birth or credit card number, create an input method that incorporates small details to simplify the user experience. 

Show the user speed

Taking longevity and repetitiveness into account when using microinteractions is also essential to maintain the user’s focus. By using Loops and Modes to manage speed and assigning every microinteraction a purpose, you can retain a quick feedback time and eliminate user distractions and annoyances. 

Final Thoughts

Microinteractions are an easy way to keep users engrossed in your interface. By keeping in mind the context of an interaction with your system, microinteractions can facilitate clear communication and save time for your users. At Pixoul, we keep these small details in mind to enhance the overall user experience. Need help keeping users engaged? Contact Pixoul today!