/ Design

UX design with microinteractions

We love apps. We use them everyday. We open Instagram and double tap on a photo of a friend. We open Twitter and pull down the feed to see the latest tweets. It feels natural and we do this regularly throughout the day. But why do we love using some apps more than others?

The key ingredient is in the microinteractions designed in the apps.

What is a microinteraction?

Imagine if you opened Spotify and clicked the Play button to start a song, but it no longer changes automatically into a Pause button. If there were any delay in the song starting, you wouldn't be sure if you had performed the action you desired. That's where a microinteraction should come in.

A microinteraction is a system that is nearly invisible, inconspicuous but crucial for you to accomplish a task in a user interface, both virtual and physical.

It is a system that contains four components:

  1. Trigger - This action initiates a microinteraction.
  2. Rules - The Rules determine what happens.
  3. Feedback - This lets people know what's happening.
  4. Loops & Modes - These determine the metarules of the microinteraction.
    alt

Take YouTube as an example.

The Trigger is when the user clicks on a video and starts to watch it.

The Rules will analyse what kind of videos they are watching.

The Feedback is a customised video feed showing up on their YouTube homepage the next time.

The Loops & Modes -
Loops are the next videos that YouTube suggests for the user to watch. They will be able to watch the next one in 15 seconds. If they don't want to watch it, they can cancel it. These loops allow the user to immerse in and out from the content.

Modes are hidden actions underlying the video. If the user wants to report a video for it inappropriate content, the video will stop when they click the Report button. If the user finds that the customised feed is not what they want, they can hide it and YouTube will adjust the algorithm again.

This is just one example of a microinteraction shaping a product and informing our behaviour.

Examples of microinteractions

Successful products and services are focused on the user experience. To have a magical user experience, microinteractions play an important role.

Here are some examples:

Flipboard
Content flipping navigation like how you read a newspaper.
alt

This Trigger helps to humanise the news reading experience by replicating the physical experience.


Pinterest
You access more actions by holding onto an image.
alt

This microinteraction encourages you to create your own customised feed.


Chrome iOS
The pull down action is not just for refreshing the page.
alt

This microinteraction increases the efficiency of your daily navigation.


Periscope
Show how much you appreciate the performer by spamming Like!
alt

This Trigger builds popularity and the visual Feedback encourages sharing and community.


Conclusion

The microinteraction is an unsung hero in crafting amazing digital experiences and enhances a product both functionally and emotionally. By building systems of behaviour and feedback, microinteractions bring products and services into people's lives and help them stay there.

More Resources: